AngularJS2 教程 -- Angular-cli搭建Angular2开发环境
1.nodejs
2.npm 包管理
以下的东西就当你是知道了这些概念了
1.首先，到nodejs 官网下载nodejs并安装
2.添加淘宝的npm镜像（由于国内访问国外网站的速度实在是太慢了），由于我们只有要用到的一些东西，我们采用以下的添加镜像方法
（windows 用户使用cmd，输入以下命令，新手请去看看npm使用教程吧）
npm config set registryhttps://registry.npm.taobao.org
值得说明一下的是不要直接使用淘宝的npm官方镜像安装模式（npm install -g angular-cli –registry=https://registry.npm.taobao.org），这样我们只能使用cnpm命令，而Angular-cli创建新项目的时候是直接使用的npm，
会导致访问速度奇慢，直接使用上面的这个命令就行了
3.使用npm 安装Angular-cli
Angular-cli是angular团队针对Angular2提供的脚手架，用于环境搭建，运行等；具体参考Angular-cli GitHub
在命令行中输入
npm install -g angular-cli
如果你之前安装失败过，最好在安装angular-cli之前先卸载干净，用以下两句：
npm uninstall -g angular-cli
npm cache clean
在检查你全局的那些npm文件下还残留ng和ng.cmd，有的话也要删掉，删掉后再安装最新的angular-cli即可。npm install -g angular-cli
若安装过程中 node-sass卡在下载的地方，根据cmd中提示的doload地址通过浏览器或则下载工具下载文件，找到npm的全局地址C:\Users\用户\AppData\Roaming\npm\node_modules\angular-cli\node_modules\node-sass\vendor\win32-x64-51，将刚下载的文件按照文件夹中的文件重命名替换即可。
安装完毕后，试下ng -v 和ng –help，有显示正确内容就成功了。
ng –help 提示rxjs，可通过cmd命令进入C:\Users\用户\AppData\Roaming\npm\node_modules\angular-cli重新安装 npm install rxjs
之后我们就可以在全局使用ng命令了
4.使用Angular-cli搭建开发环境
首先到你的工作目录下建立Angular工程目录
然后然后用命令行进入该目录，输入
ng new projectName
然后脚手架会帮我们搭建初始环境，由于初始化的时候Angualr-cli会去初始化node-modules依赖，所以会比较慢；如果没有切换淘宝镜像，那不是一般的慢
最终安装好了是这样的
就这样，最简单的angular2工程创建好了；
工程结构熟悉一下：angular-cli.json 是angular-cli的配置文件，测试配置文件karma.conf.js，typescript的lint配置文件，端到端的测试配置文件protractor.conf.js，导入es6模块的配置文件polyfills.ts，angular工程的main.ts引导启动文件，全局样式style.css，typescript配置文件ts.config.json;typescript的声明文件typings.d.ts,以及生成了最贱的的一个angular组建 app.components相关的css，html，ts。这些配置都是angular2的生产项目中需要配置的文件，angular-cli帮我们做了这么多事情，我们只用了一个命令；
5.运行Angular
这个时候整个Angular2已经搭建好了
cd projectName
命令行进入进入刚才的工程目录，输入
ng serve
浏览器输入 http://localhost:4200/ 就可以看到app works！
因为默认的4200的端口，如果你需要换的话也是可以的package.json里面的
ng serve --host localhost --port 4201
原文链接：http://www.shellsec.com/news/36095.html
创建module，component，service，class
命令以 ng generate 开头，可以缩写为 ng g
下表里是所有的命令：
组件实战
这里我先尝试创建一个 component，命令如下。
ng g component nav
这里我创建了一个 nav 组件。执行成功后，后台会自动部署。我们看一下文件目录有什么改变
多了一个叫做 nav 的文件夹，看一看文件目录
我们发现与项目创建时自带的 app component 目录结构相同，内容也大同小异，大家可以尝试去创建一个自己的组件，组件的样式可以去对应的 css 文件中修改。
创建一个home的module；
ng g component home
我们看到 app下面多了一个home的component，它应有的css，html，*.spec.ts(测试代码)，ts都生成了；如果没有组件化经验的同学可能会问，为啥有css，html，ts，*.spec.ts都放在这下面啊？因为组件化可以重复使用，提高效率，庞大的工程代码中可以提高可维护性，阅读性，方便测试等等；
再试着创建一个angular的模块
ng g module about
可以看出模块比component多了一个module.ts文件。
创建路由
这里 cli 暂时禁用了创建路由，新的路由生成器即将到来，您可以在这里阅读新路由器的官方文档：https://angular.io/docs/ts/la...
建立一个 build
ng build
会生成到 dist/ 目录下，其它关于测试，配置文件请大家去 Github 仔细阅读，这里只给最基本的搭建流程。