Angular 2 ：初识 Angular-cli[官方脚手架] 及脱坑要点

为什么80%的码农都做不了架构师？>>>

什么是Angular-cli

简言之：就是NG团队自行维护的一个｀脚手架｀[内置单元测试及webpack2打包工具等] －－这货前身是 ember-cli ；

官网： https://cli.angular.io/

Github: https://github.com/angular/angular-cli

npm: https://www.npmjs.com/package/angular-cli

我最早是从beta18开始用的，截止beta28.3-- 这个分支已经废弃，已经迁移,之前 npm install angular-cli 不推荐；

目前最新的是 v1.0.0-rc.2 ;从旧版本到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 来管理： https://github.com/creationix/nvm
先下载 nvm 的脚本，用 curl 或者 wget 都行，前者有些不预装，后者基本都有
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
curl -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

开发工具这些就不扯了，我选择VSCODE
安装

npm install -g @angular/cli -- 无压力过墙的孩子推荐

或者

cnpm install -g @angular/[email protected] -- 国内淘宝源(cnpm的安装自行搜索)

或者

yarn add global @angular/cli -- 看网络了。。。

初始化项目
angular-cli可以初始化ng2或者ng4的项目，我这里说2+；

脚手架的命令很多，我这里只列出最常用的；

范围
命令
作用

1、new
ng new new_project
初始化新项目 /

2、Component
ng g component my-new-component
新建一个组件
3、Directive
ng g directive my-new-directive
新建一个指令
4、Pipe
ng g pipe my-new-pipe
新建一个管道
5、Service
ng g service my-new-service
新建一个服务
6、Class
ng g class my-new-class
新建一个类
7、Interface
ng g interface my-new-interface
新建一个接口
8、Enum
ng g enum my-new-enum
新建一个枚举
9、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 开头的命令都是二重封装的。。。有时候我们想要改源文件或者看到原始配置是怎么样的这货就用到了

ng eject : 这个东西的配置很多，可以弹出各种各样的源配置和文件

在 cnpm install -g @angular/cli@latest 安装完成（latest代表ng最新版本）之后
如果想安装指定版本 cnpm或者npm install -g @angular/[email protected]

用 ng -v 查看一下版本以及是否安装成功

会出现 Angular-cli
              angular-cli:1.0.0-beta.28.3 ng版本号
              node:8.2.1                              node版本号
              os:win32 x64                          电脑系统
npm install 之后 ng-serve 然后在地址栏：localhost：4200 出现以下页面

如果之前安装失败了一定要卸载干净

npm uninstall -g angular-cli

npm cache clean

生成的目录树小解释

总结
这个脚手架支持sass和less，手动改下 .angular-cli.json 就可以了。或者执行命令改下支持，，一个道理的
当然可以配置接口反向代理，但是我感觉不实用，推荐还是把不同接口的url写在不同的environment里面，用 nginx 做反向代理！ ng serve --proxy-config proxy.conf.json ;这个老版本是支持的，现在不知道支不支持
{
"/": {
"target": "http://localhost:3000",
"secure": false
}
}

Angular 2 ：初识 Angular-cli[官方脚手架] 及脱坑要点

你可能感兴趣的:(javascript,测试,json,ViewUI)