Angular 2 + 折腾记 ：(1)初识Angular-cli[官方脚手架]及脱坑要点
Angular 2 + 折腾记 ：(1)初识Angular-cli[官方脚手架]及脱坑要点
前言
这个系列的进度有些跳跃性，我尽量直白点解释，但是我不是官方文档，直入主题！！！！
什么是Angular-cli
简言之：就是NG团队自行维护的一个｀脚手架｀[内置单元测试及webpack2打包工具等] －－ 这货前身是ember-cli；
官网：cli.angular.io/ Github: github.com/angular/ang… npm: www.npmjs.com/package/ang…
我最早是从beta18开始用的，截止beta28.3 -- 这个分支已经废弃，已经迁移,之前npm install angular-cli不推荐；
目前最新的是v1.0.0正式版【2017-3-24】;从旧版本到rc期间坑了太多次，每次升级各种酸爽；
rc2开始基本变化不大，可以直接拿来用了。。
正式版的配置稍微有些改动，我比较了下基本不大，放心使用
安装之前
- window下：
- 安装
lts版本的nodejs[6.10.0] ， Angular-cli中的node-sass不支持7.x，装不上的 - 装了visual studio 2015+及python2+ [node-sass及部分模块需要调用这两个依赖进行编译]
- 或者采用国内的cnpm安装,记得带版本号，有时候不带版本会安装
0.0.1版本，cnpm好像会把编译好node-sass装上，不用本地再次编译 -- 亲测多次可用 - 或者安装
windows-build-tools:windows下的依赖库，再执行官方安装命令
- 安装
- Linux下：
- nodejs控制推荐用
nvm来管理 ：github.com/creationix/…- 先下载
nvm的脚本，用curl或者wget都行，前者有些不预装，后者基本都有wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bashcurl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
- 记得重新读取bash的配置文件，因为脚本没法实时生效，用linux的
source命令一下子就搞定了source ~/.bashrc: 意思就是重新加载当前用户的bash配置文件
nvm的命令不多，仔细看看文档哈，我们这里只需要稳定版本(lts)nvm install --lts： 之后node怎么用就怎么用哈
- 先下载
- 其次，linux下推荐用
yarn替代npm，使用起来体验好很多，速度也快很多 # 下载公钥 curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - # 把源写进去源请求列表 echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list # 我用的是deepin !!!! 支持一下国产，挺好用哈～～～～ sudo apt-get update && sudo apt-get install yarn复制代码
- nodejs控制推荐用
开发工具这些就不扯了，我选择VSCODE
安装
npm install -g @angular/cli -- 无压力过墙的孩子推荐
或者
cnpm install -g @angular/cli@v1.0.0-rc.2 -- 国内淘宝源(cnpm的安装自行搜索)
或者
yarn add global @angular/cli -- 看网络了。。。
初始化项目
angular-cli可以初始化ng2或者ng4的项目，我这里说2+；
脚手架的命令很多，我这里只列出最常用的；
- 新建东东
范围 | 命令 | 作用 |
|---|---|---|
new | ng new new_project | 初始化新项目 |
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 | 新建一个模块 |
- 测试及检测
范围 | 命令 | 作用 |
|---|---|---|
e2e | ng e2e | 跑自动化测试-自己写测试测试用例 |
test | ng test | 跑单元测试 -- 自己写 |
lint | ng lint | 调用tslint跑整个项目，可以收获一堆警告和错误，--force --fix --format可以帮助格式和修复部分问题 |
- 启动
ng serve： 启动脚手架服务，默认端口4200；自定义什么看帮助额
- 打包
ng build: 开发模式打包，调用的环境文件是/src/environments/environments.ts;
ng build --prod: 以前调用aot打包还需要带上--aot,从beta31开始，--prod模式下自动调用aot打包，
调用的环境文件是/src/environments/environments.prod.ts
- 弹出配置文件(还原真实的配置文件)
ng eject : 这个东西的配置很多，可以弹出各种各样的源配置和文件
我们看到的ng开头的命令都是二重封装的。。。有时候我们想要改源文件或者看到原始配置是怎么样的这货就用到了
生成的目录树小解释
总结
- 这个脚手架支持sass和less，手动改下
.angular-cli.json就可以了。或者执行命令改下支持，，一个道理的 - 当然可以配置接口反向代理，但是我感觉不实用，推荐还是把不同接口的url写在不同的environment里面，用
nginx做反向代理！ng serve --proxy-config proxy.conf.json配置反向代理(用webpack)这个老版本是支持的，现在不知道支不支持，写法如下
{
"/": {
"target": "http://localhost:3000",
"secure": false
}
}复制代码- ng2+写起来很清晰，各种注入~~欢迎品尝。。。