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

about 模块创建

可以看出模块比component多了一个module.ts文件。

创建路由

这里 cli 暂时禁用了创建路由，新的路由生成器即将到来，您可以在这里阅读新路由器的官方文档：https://angular.io/docs/ts/la...

建立一个 build

ng build

 

会生成到 dist/ 目录下，其它关于测试，配置文件请大家去 Github 仔细阅读，这里只给最基本的搭建流程。

详细链接：https://segmentfault.com/a/1190000007176295?from=timeline&isappinstalled=1