Angular4学习笔记之新建项目的方法

Angular4我自己还在摸索学习中，这个系列中的笔记会不定期修改和更新……

一、安装nodejs（下面方式 二选一，个人推荐第二种）

1、nodejs官网下载安装

2、使用nvm安装管理（具体方式参照我的另一篇）

二、全局安装angular-cli

npm install -g @angular/cli

三、进入一个存放项目的文件夹，运行以下代码，初始化项目

ng new <项目名>

四、启动项目

cd <项目名>
npm install
ng serve

附：

1.引入jQuery和bootstrap

a.安装jquery和bootstrap

npm install jquery --save
npm install bootstrap --save

b.安装@types/jquery

代码如下:

npm install @types/jquery --save-dev <!-- 这一步是让jquery可以在Ts文件中被识别使用 --!>

c.在项目的根目录下找到.angular-cli.json文件修改其配置，修改时注意引用路径是以index.html文件为起始路径，而不是项目根路径

{
 "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 "project": {
  "version": "1.0.0-alpha.4",
  "name": "angualr4demo"
 },
 "apps": [
  {
   "root": "src",
   "outDir": "dist",
   "assets": ["assets"],
   "index": "index.html",
   "main": "main.ts",
   "polyfills": "polyfills.ts",
   "test": "test.ts",
   "tsconfig": "tsconfig.app.json",
   "testTsconfig": "tsconfig.spec.json",
   "prefix": "app",
   "styles": [
   "../node_modules/bootstrap/dist/css/bootstrap.min.css",<!-- 这里添加bootstrap引用路径 --!>
    "scss/style.scss"
   ],
   "scripts": [
    "../node_modules/jquery/dist/jquery.js"<!-- 这里添加jquery引用路径 --!>
   ],
   "environmentSource": "environments/environment.ts",
   "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
   }
  }
 ],
 "e2e": {
  "protractor": {
   "config": "./protractor.conf.js"
  }
 },
 "lint": [
  {
   "project": "src/tsconfig.app.json"
  },
  {
   "project": "src/tsconfig.spec.json"
  },
  {
   "project": "e2e/tsconfig.e2e.json"
  }
 ],
 "test": {
  "karma": {
   "config": "./karma.conf.js"
  }
 },
 "defaults": {
  "styleExt": "scss",
  "prefixInterfaces": false
 }
}

d. 在src/typings.d.ts 中添加

declare var $: JQueryStatic;

2、引入require

在在src/typings.d.ts 中添加

declare var require: any;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Angular2平滑升级到Angular4的步骤详解

    前言 Angular4终于在两天前发布了正式版本,那么怎么升级呢?其实Angular2和Angular4之间属于平滑过渡,并不像1和2之间颠覆性的重写代码. Angular4现已发布  http://www.jb51.net/article/109685.htm 为什么跳过Angular 3? 根据Angular团队首席开发Igor Minar的说法:随着Angular 2的发布,Angular团队引入了语义化版本控制规范,即:将语义化版本用三组数字来表示,按照major.minor.patch

  • Angular 4中如何显示内容的CSS样式示例代码

    前言 在开始本文的正文之前,我们先来看一下angular2中将带标签的文本输出在页面上的相关内容,为了系统性的防范XSS问题,Angular默认把所有值都当做不可信任的. 当值从模板中以属性(Property).DOM元素属性(Attribte).CSS类绑定或插值表达式等途径插入到DOM中的时候, Angular将对这些值进行无害化处理(Sanitize),对不可信的值进行编码. h3>Binding innerHTML</h3> <p>Bound value:</p

  • Web前端框架Angular4.0.0 正式版发布

    前言 angular4.0.0正式版现在可以使用了.这是自我们宣布angular改版后,首次发布的专业版本.它向下兼容,支持所有使用了angular2.x.x版本的应用程序. 我们很高兴和大家分享这个版本,它包括最近的3个月中我们做的功能上的主要改进.我们努力让开发者们能够很容易的接受angular4.0.0. 新版本的特性 •更轻量化.更快 在这个新版本上,我们履行了我们的承诺,我们做到了让Angular的程序变的更轻量化,更快.但是我们还没有完全的优化完,在接下来的日子中,你会看到我们将着重

  • Angular4 中常用的指令入门总结

    前言 本文主要给大家介绍了关于Angular4 常用指令的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: NgIf <div *ngIf="false"></div> <!-- never displayed --> <div *ngIf="a > b"></div> <!-- displayed if a is more than b --> <div *ngIf=&

  • Angular4 中内置指令的基本用法

    前言 大家都知道ng内置了许多自定义的指令,这避免了我们自己去造轮子.同时,ng也提供了自定义指令的功能,可以让我们的页面元素标签更加实例化. 在这篇文章中,我们将分别列举每一个内置指令的用法,并提供一个例子作为演示.尽量用最少最简单的描述,让你在更快更准确地学会每一种内置指令的基本用法. ngFor 作用:像 for 循环一样,可以重复的从数组中取值并显示出来. 例子: // .ts this.userInfo = ['张三', '李四', '王五']; // .html <div class

  • angular学习之从零搭建一个angular4.0项目

    angular学习之从零搭建一个angular4.0项目

    话说现在angular更新迭代太快了,从前几年用angular版本去搭建项目时还是1.x版本,到现在都已经是angular4.0了(直接跳过了3.0),由于公司要求用到angular4.0,所以就不能只是了解一下了,谁让我那么热爱学习了(咳咳!此处有一个推眼镜的动作),废话不多说,直接上手,首先用到的工具会有angular4.0.angular-cli.npm(v3.10.8).node(v6.2.0) 上述node和npm包管理器版本是我本机的版本号,这个版本不要太低应该都没问题 angula

  • Angular4学习笔记之新建项目的方法

    Angular4我自己还在摸索学习中,这个系列中的笔记会不定期修改和更新-- 一.安装nodejs(下面方式 二选一,个人推荐第二种) 1.nodejs官网下载安装 2.使用nvm安装管理(具体方式参照我的另一篇) 二.全局安装angular-cli npm install -g @angular/cli 三.进入一个存放项目的文件夹,运行以下代码,初始化项目 ng new <项目名> 四.启动项目 cd <项目名> npm install ng serve 附: 1.引入jQue

  • Angular4学习笔记之实现绑定和分包

    Angular4学习笔记之实现绑定和分包

    本文介绍了Angular4学习笔记之实现绑定和分包,分享给大家,希望对大家有帮助 src目录下的app/app.component.ts文件是一个标准的angular4组件的结构. 上面@component()括号内template属性里用`(这个符号不是单引号,而是键盘1左边.tab键上面的那个符号)包裹的是View,下面export的class部分是Controller. 希望实现的效果长这个样子: 万里长征第一步,先从修改View开始. 修改temlate里的HTML文件,改成下面的样子:

  • JS学习笔记之数组去重实现方法小结

    本文实例讲述了JS学习笔记之数组去重实现方法.分享给大家供大家参考,具体如下: 操作的数组 let arr=[0,1,23,'1',4,2,8,5,5,6,9,'asdasd','5'] 1. 利用ES6 的set 来进行数组去重 console.time("set") let type1=new Set(arr) console.log(type1) type1=[...type1] console.log(type1) console.timeEnd("set"

  • python OpenCV学习笔记之绘制直方图的方法

    本篇文章主要介绍了python OpenCV学习笔记之绘制直方图的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 官方文档 – https://docs.opencv.org/3.4.0/d1/db7/tutorial_py_histogram_begins.html 直方图会让你对图像的强度分布有一个全面的认识.它是一个在x轴上带有像素值(从0到255,但不总是),在y轴上的图像中对应的像素数量的图. 这只是理解图像的另一种方式.通过观察图像的直方图,你可以直

  • Python学习笔记之字符串和字符串方法实例详解

    Python学习笔记之字符串和字符串方法实例详解

    本文实例讲述了Python学习笔记之字符串和字符串方法.分享给大家供大家参考,具体如下: 字符串 在 python 中,字符串的变量类型显示为 str.你可以使用双引号 " 或单引号 ' 定义字符串 定义字符串 my_string = 'this is a string!' my_string2 = "this is also a string!!!" # Also , we can use backslash '/' to escape quotes. this_strin

  • Angular4学习笔记之准备和环境搭建项目

    Angular4学习笔记之准备和环境搭建项目

    写在前面的废话1 我用angular的时候还是1.x,属于代码写的很反人类但是angular2还没出的蛮荒年代.我本身是从j2ee转到Android的工程师,也是就是说,我的日常开发语言是Java.突然切换到JavaScript那真是难受的像北极熊同企鹅讲话,更何况后来嫌webstorm太卡而用起了没有提示的sublime(嗯,终于治好了多年顽疾的"从不记函数名症候群").经过了一段痛苦不堪的撞墙经历后,总算是开始习惯了. 但我还是想大吼一声,JavaScriptWCNM. 发泄完了说

  • Angular4学习笔记router的简单使用

    router,也就是路由,是前端中一个比较重要的概念.通过router把特定的地址和对应的页面关联后分离出来,以达到解耦的目的.在src/app目录下新建一个detail的文件夹,建立一个名为gundam-detail.component的文件. import { Component } from '@angular/core'; import { Gundam } from '../../model/gundam'; @Component({ template: ` <div *ngIf=&quo

  • Python学习笔记之解析json的方法分析

    Python学习笔记之解析json的方法分析

    本文实例讲述了Python解析json的方法.分享给大家供大家参考,具体如下: 刚学习到Python中解析json的方法,觉得有必要在这里坐下笔记. 我是在python的内部环境中看的 Encoding basic Python object hierarchies >>> import json >>> json.dumps(['foo', {'bar': ('baz', None, 1.0, 2)}]) '["foo", {"bar&q

  • Angular4学习笔记之根模块与Ng模块

    根模块 (root module) 每个应用都至少有一个根模块用来引导并运行应用.根模块通常命名为 AppModule. 示例 src/app/app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imp

  • 快速入门python学习笔记

    本篇不是教给大家如何去学习python,有需要详细深入学习的朋友可以参阅:Python基础语言学习笔记总结(精华)本文通过一周快速学习python入门知识总计了学习笔记和心得,分享给大家. ##一:语法元素 ###1.注释,变量,空格的使用 注释 单行注释以#开头,多行注释以''开头和结尾 变量 变量前面不需要声明数据类型,但是必须赋值 变量命名可以使用大小写字母,数字和下划线的组合,但是首字母只能是大小写字母或者下划线,不能使用空格 中文等非字母符号也可以作为名字 空格的使用 表示缩进关系的空

随机推荐