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 |