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 | 无 | 可设置为npmcnpmyarn |