AngularJS5.0 (第一篇)

angular 1中提供了做用域，能够存储数据，实现数据绑定，可是出现了性能瓶颈；提供了指令，对DOM拓展，方便开发，占用了更多的资源，没有组件开发，一般是没法复用的。

　　基于ES3.1版本开发的框架，没法使用class，extends，import等关键字，没法使用面向对象方式开发，不利于大型项目维护。

angular 5从新设计了angular，解决了性能问题，采用了组件开发，使得代码得以复用。

　　基于ES6 ( 源码基于Typescript语言开发 ) 语法开发的框架，所以支持，class，extends，import等关键字，支持面向对象的开发，着眼于大型项目的开发。

Github地址：https://github.com/angular/angular

　　通常用ng5表示angularjs5.0版本，angular团队，为了简化ng5开发，提供了cli工具，因此须要先安装cli

1，安装nodejs：

　　https://nodejs.org/en/

2，全局范围安装cli：

　　npm install -g @angular/cli

3，建立一个新项目

　　ng new my-app

4，转到项目目录，并启动服务器

　　cd my-app

　　ng serve --open

该ng serve命令启动服务器，监视您的文件，并在您对这些文件进行更改时重建应用程序。

使用--open（或只是-o）选项会自动打开您的浏览器http://localhost:4200/。

您的应用使用如下消息迎接您：

 

Angular CLI 基本指令

 

名称	做用
ng init	在当前目录下建立应用
ng new	建立新的目录并在新目录下运行ng init命令
ng serve	启动
ng doc	在浏览器中打开Angular文档并搜索当前关键字
ng e2e	使用 protractor 在当前应用中运行e2e测试
ng format	使用 clang-format 格式化当前项目代码
ng generate	在项目中构建新代码
ng g	ng generate的简写
ng build	构建项目
ng github-pages:deploy [options]	将项目部署到GitHub Pages
ng version	输出cli版本, node 版本和操做系统信息
ng set	设置环境

---

ng new

参数名	类型	默认值	做用
–dry-run	boolean	FALSE	只输出要建立的文件和执行的操做，实际上并无建立项目
–verbose	boolean	FALSE	输出详细信息
–link-cli	boolean	FALSE	自动链接到angular-cli包
–skip-install	boolean	FALSE	在项目第一次建立时不执行npm install
–skip-bower	boolean	TRUE	不安装bower
–skip-git	boolean	FALSE	不执行Git repository初始化工做
–directory	string	目录名	默认与项目名称同样
–source-dir	string	‘src’	源文件目录名
–style	string	‘css’	使用 (‘css’, ‘less’ 仍是 ‘scss’)编写css
–prefix	string	‘app’	生成新组件的前缀
–mobile	boolean	FALSE	生成 Progressive Web App （PWA）项目
–routing	boolean	FALSE	添加带路由的模块(module)并import到main app module中
–inline-style	boolean	FALSE	生成新应用的时候使用inline styles(内联，不生成单独的css文件)方式
–inline-template	boolean	FALSE	生成新应用的时候使用 inline templates(内联，不生成单独的html文件)方式
0	无	无	使用Angular4的依赖建立空项目，如今默认已是4的版本了

---

ng serve

参数名	类型	默认值	做用
–host	string	12.0.0.1	自定义配置 IP
–disable-host-check	–	–	跟在–host后面,容许使用localhost之外的host打开项目
–port	number	4200	自定义端口号
–live-reload-port	number	4200	时时重载端口号
–hmr	–	–	热替换

---

ng generate支持的类型

名称	示例
Component	ng g component my-new-component
Directive	ng g directive my-new-directive
Pipe	ng g pipe my-new-pipe
Service	ng g service my-new-service
Class	ng g class my-new-class
Interface	ng g interface my-new-interface
Enum	ng g enum my-new-enum
Module	ng g module my-module
Route	ng g route my-route 当前已禁用

---

命令参数

ng generate class

参数名	类型	默认值	做用
–spec	boolean	FALSE	生成对应的单元测试文件

---

ng generate component

参数名	类型	默认值	做用
–flat	boolean	FALSE	在src/app中生成component文件，而不是在当前目录下
–inline-template	boolean	FALSE	使用inline template，而不是独立的HTML文件
–inline-style	boolean	FALSE	使用inline styles，而不是独立的CSS文件
–prefix	boolean	TRUE	使用在angular-cli.json指定的前缀来生成component selector（前缀表示selector的第一个单词）
–spec	boolean	TRUE	生成对应的单元测试文件

---

ng generate directive

参数名	类型	默认值	做用
–flat	boolean	FALSE	在src/app中生成component文件，而不是在当前目录下
–prefix	boolean	TRUE	默认true, 使用在angular-cli.json指定的前缀来生成component selector（前缀表示selector的第一个单词）
–spec	boolean	TRUE	生成对应的单元测试文件

---

ng generate module

参数名	类型	默认值	做用
–routing	boolean	FALSE	新增一个与module对应的路由模块，并import到module中
–spec	boolean	FALSE	用于检测模块是否存在

---

ng generate service

参数名	类型	默认值	做用
–flat	boolean	TRUE	在src/app中生成component文件，而不是在当前目录下
–spec	boolean	TRUE	生成单元测试文件

---

ng build

参数名	类型	默认值	做用
–aot	string	无	预编译
–base-href	string	‘/’	设置index.html文件中的base href参数
–environment	string	dev	在哪一个环境中使用,prod表明生成环境
–output-path	string	dist	文件输出目标路径
–target	string	development	development:默认值，不压缩混淆，production:压缩混淆代码
–watch	boolean	FALSE	在哪一个环境中使用

ng github-pages:deploy

参数名	类型	默认值	做用
–message	string	无	构建的时候提交的message，必须写在引号中
–target	string	development	使用的环境
–user-page	boolean	FALSE	是否以user/org页面部署到GitHub上
–skip-build	boolean	FALSE	跳过构建直接部署
–gh-token	string	无	使用Github的token
–gh-username	string	无	使用Github用户名
–base-href	string	‘/’	在index.html文件中使用的base href值

ng set

参数名	类型	默认值	做用
–global	–	无	是否设置全局
packageManager	string	无	可设置为npm\cnpm\yarn