用Angule Cli建立Angular项目

Angular4.0来了，更小，更快，改动少

接下来为Angular4.0准备环境和学会使用Angular cli项目

1.环境准备：

　　1）在开始工做以前咱们必须设置好开发环境

若是你的机器上尚未安装Node.js和npm，请安装他们

（这里特别推荐使用淘宝的镜像cnpm，记得之后把npm的指令改成cnpm就能够了）

npm install -g cnpm --registry=https://registry.npm.taobao.org

而后咱们能够经过node -v和cnpm -v来分别查看node和cnpm安装的版本和结果

node -v cnpm -v

     2）安装全局Angular cli

cnpm install -g @angular/cli

2.建立新的项目

　　打开终端窗口（这里我使用的是webstorm的Terminal，也可使用计算机自带的powershell）

ng new my-app

项目会很快建立完成，接下来你会看到

Installing packages for tooling via npm

这里若是你选这了淘宝的cnmp镜像，应该最好在安装彻底局Angular cli后设置一下，保证正常下载工具

ng set --global packageManager = cnpm

而后咱们的项目就建立完成了

咱们会发如今文档中有不少文件，这里参考Angular官方文档 ，以便认识这些文件的做用。

 3.在项目中引入bootstrap和jQuery

　　　　这里我使用webstorm的Terminal，直接在终端操做

cnpm install bootstrap --save  

cnpm install jquery --save

咱们在项目中就添加了bootstrap和jQuery，咱们能够在node_modules文件夹中找到他们（这个文件夹放的是第三方库）；

而后咱们须要操做.angular-cli.json文件，把bootstrap和jQuery添加进去:

这里须要注意的是：由于angular用的是微软开发的typescript语言，咱们须要在终端作下面的操做，以便让typescript认识bootstrap和jQuery一些字符（好比jQuery的$）：

cnpm install @types/bootstrap --save-dev

cnpm install @types/jquery --save-dev

这样咱们就在项目中正常使用bootstrap和jQuery了

4）项目的启动

 　　启动项目咱们能够直接经过：

ng serve

或者是

npm start

这两个的默认端口都是4200：

http://localhost:4200

 这里你也能够修改默认的端口:

ng serve -p 3000

5)最后项目的打包

　　　用angular cli建立的项目会有不少文件，咱们就须要打包后再发行：

ng build