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/。

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

名称	作用
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	设置环境

参数名	类型	默认值	作用
–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的版本了

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

名称	示例
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 当前已禁用

命令参数

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

参数名	类型	默认值	作用
–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	生成对应的单元测试文件

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

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

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

参数名	类型	默认值	作用
–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	在哪个环境中使用

参数名	类型	默认值	作用
–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值