Angular环境搭建
文章目录
环境搭建
1_1. 下载安装nodejs
打开nodejs官网，点击硕大的绿色Download按钮，它会根据系统信息选择对应版本（.msi文件）。
node.js插件在windows系统下是个.msi工具，只要一直下一步即可，软件会自动在写入环境变量中，这样就能在cmd命令窗口中直接使用node或npm命令。
PS:Angular基于node.js，所以要先安装nodejs环境
具体可以参考Node.js安装
1_2. 安装cnpm
在cmd命令窗口中直接输入：
npm install cnpm -g --registry=https://registry.npm.taobao.org
安装完毕之后，需输入：
node -v
npm -v
cnpm –v
查看版本号或者关闭命令提示符重新打开，否则安装完毕后直接使用会出现错误。
PS:由于npm安装插件是从国外服务器下载，受网络影响很大，可能出现异常，继而淘宝团队生产一个完整的npmjs.org镜像，用cnpm代替npm, cnpm与nodejs的npm用法一致,只是在执行命令时，将npm改为cnpm
1_3. 安装typescript和typings
用npm安装typescript和typings,在命令提示符中直接输入：
npm install typescript@2.2.2 typings –g
PS:@2.2.2 是版本号，去掉直接安装最新版本，自己视情况而定。angular-cli是用typescript写的，所以需要安装typescript和typings
运行完毕之后，查看版本确定是否安装成功，在命令提示符中直接输入：
tsc –v
出现版本号，即为安装成功。
1_4. 安装@angular/cli
用cnpm安装@angular/cli,直接在命令提示符中输入：
npm install @angular/cli –g
PS：环境搭建到此完成，便可以运行ng项目啦，即为angular项目，在命令窗口输入“ng version”,出现如下图所示效果，证明@angluar/cli安装成功。
项目流程
2_1. 安装webstorm-持续集成服务器
注意：由于运行webstorm工具占用内存较高，我目前使用vscode,这个工具进行开发。
2_2. 新建angular项目
直接在命令提示符中输入：
ng new angular-cli-project
PS:angular-cli-project这是项目名称，视情况而命名，这里我直接安装到了桌面，也可以安装到别的地方，尽量安装到除C盘之外的其他盘中。
PS:angular的基本文件已经创建，接下来就是下载项目所依赖的nodejs包，用ng new angular-cli-project,直接创建如果不终止的话，默认用npm从国外网站下载资源，下载速度极慢。所以基本文件下载完毕之后，终止进程，然后用cnpm下载项目所依赖的nodejs包。
定位到项目目录
在命令提示符中直接输入：
cd angular-cli-project
或者用vscode打开新建的文件，在终端 点回车 会直接定位显示
可以在这里检查一下，以上的环境搭建是否都成功了，直接-v 就好，出现版本号的，都是安装成功的。
2_3. 安装项目依赖的所有node.js包
在命令提示符中直接输入：
如果像上一步骤都安装好了，可以略过这一步，如上图 -v 检查就行了。
npm install
直接在命令提示符中输入:
ng serve
PS:除了用ng serve启动项目之外，也可以在命令提示符中直接输入：npm start(或者cnpm start)开启。
效果图：
浙公网安备 33010602011771号