Angular CLI 类似 ember-cli,yeoman 的 app 模板生成器。自己配置整个开发 build tool 比较繁琐,因为 typescript 需要额外配置文件,选 gulp、systemjs、webpack,又要配置。又要写跑 test 的配置,karma、protractor……太麻烦,弄完也要半天的时间。

用 Angular CLI 通通自动化这些繁琐过程。跑 2-3 命令就可以进行开发了

安装 Angular CLI

$ npm install -g @angular/cli

基本命令

$ ng new MYAPP
$ cd MYAPP
$ ng serve

Angular CLI:

命令 功能
ng new APPNAME 创建新的app。

参数:--routing

创建路由的 app。目前还是需要手动修改 xx-routing.module.ts 文件。
ng build 复制并组建到 dist 的文件夹,可以上传这个文件夹到伺服器。

可选参数:
ng build --dev 默认参数
ng build --prod --aot
ng build --base-href /myUrl/ 适合子文件夹的 app
ng serve 开发伺服器。自动重启。

可选参数:跟 ng build 一样。
ng g component XYZ 创建新的组件。@Component()
ng g directive XYZ 创建新的指令。
ng g pipe XYZ 创建新的pipe。
ng g service XYZ 创建新的 service。
ng g module XYZ 创建新的模组。支持 --routing 参数~~,默认会生成一个 component。~~[^1]

Angular CLI 支持 SCSS、LESS、stylus:

$ ng new PROJECTNAME --style=scss # 创建新的项目
$ ng set defaults.styleExt scss # 现有项目

更新 Angular CLI

$ npm uninstall -g angular-cli @angular/cli
$ npm cache clean
$ npm install -g @angular/cli@latest

讨论

CLI 实现 appshell 也是用 universal,只是在 build tool 的时候渲染成静态文件。网络再慢,半秒内一定能看到 app 的轮廓。Toolbar、加载图标,等等⋯⋯游览器下载完所有 script 的文件,Angular 才渲染完整的 app。

有什么用?AngularJS 1.x 每次打开只能看到白画面。要等到 AngularJS 渲染完,才能看到画面。快慢,看 app 大小、优化、网络速度。

各有个好处

你也可以在 HTTP 伺服器安装配置 universal 模组,不用每次更改东西要 build 一次再上传。

CLI 建造的静态文件只要上传到静态 CDN,而 universal 需要伺服器。

Changelog 摘录

  • beta.5
    • 2016年5月22日:beta 就是多 bugs,beta5 不能运行 ng build --prod,等 1.0.0 发布后再写一篇如何使用。
  • beta.30 (隔了 25 个贝塔,文章再次更新。超多改变!)
    • Angular v2 已经正式发布了,v4 都已经开工了
    • --mobile Appshell、Universal 的参数暂时取消掉
    • 改用了 webpack,支持 ahead of time 编译。
  • beta.31
    • 更新记录有写加入了 service-worker?!没官方文件说明,不过,你自己可以在 angular-cli.jsonapps[0] 加入一个参数 "serviceWorker": true,,然后再安装 @angular/service-worker,重新 build 应该可以看到 sw-register.[hash].bundle.js 这些文件了。当然 BETA 嘛~ 东西不一定稳定 😂 。
  • beta.32
    • 移除了 ng update ng init 这些命令……而官方推荐的更新方法是,创建一个新的 app,把旧的app 你写的拷贝过去……😓
    • ng build --prod 不会再产生 .gz 文件了。

开源就是这样,不是每次更新都要“喂”你的。真的有什么更新,你自己要看看更新了什么。

扩展阅读

Footnote