(一)Angular4 英雄征途HeroConquest-Angular4的安装

为什么选angular4作为前端框架

• 1.模块化项目迭代思想，适合大型项目的迭代管理

• 2.社区强大，毕竟它爸爸是谷歌和广大爱好者
• 3.对angularjs进行了高度进化，很优秀
• 4.单页面应用的一种快速而强大的解决方案

---

安装

• 由于TypeScript是Angular2以后推荐的脚本语言，而npm（Node Package Manager）是安装TypeScript的管理工具，以及Angular4的脚手架——Angular-cli

---

(一)Nodejs安装

1.Nodejs 安装,编译
下载源码，你需要在https://nodejs.org/en/download/下载最新的Nodejs版本，本文以v0.10.24为例:

cd /usr/local/src/
wget http://nodejs.org/dist/v0.10.24/node-v0.10.24.tar.gz

2、解压源码

tar zxvf node-v0.10.24.tar.gz

3、 编译安装

cd node-v0.10.24./configure --prefix=/usr/local/node/0.10.24
make
make install

4、 配置NODE_HOME，进入profile编辑环境变量

vim /etc/profile

设置nodejs环境变量，在如下：

export PATH USER LOGNAME MAIL HOSTNAME HISTSIZE HISTCONTROL 

一行的上面添加如下内容:

#set for nodejsexport 
NODE_HOME=/usr/local/node/0.10.24export PATH=$NODE_HOME/bin:$PATH

:wq保存并退出，编译/etc/profile 使配置生效

source /etc/profile

5.实际操作如下

[root@ChangerLee bin]# pwd
/usr/local/node/8.2.1/bin
[root@ChangerLee bin]# echo "export NODE_HOME=/usr/local/node/8.2.1" >>/etc/profile   
[root@ChangerLee bin]# echo "export NODE_HOME=/usr/local/node/8.2.1" >>/etc/profile 
[root@ChangerLee bin]# echo "export PATH=$NODE_HOME/bin:$PATH" >>/etc/profile 
root@ChangerLee bin]# vim /etc/profile
[root@ChangerLee bin]# source /etc/profile
[root@ChangerLee bin]# node -v
v8.2.1

6.验证是否安装配置成功

node -v

输出 v8.2.1 表示配置成功

---

• 大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。 淘宝 NPM 镜像是一个完整 npmjs.org镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。 你可以使用淘宝定制的 cnpm (gzip压缩支持) 命令行工具代替默认的 npm

7.实际操作如下

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
[root@ChangerLee bin]# npm install -g cnpm --registry=https://registry.npm.taobao.org
/usr/local/node/8.2.1/bin/cnpm -> /usr/local/node/8.2.1/lib/node_modules/cnpm/bin/cnpm
+ cnpm@5.0.0
added 639 packages in 55.18s

这样就可以使用 cnpm 命令来安装模块了：

$ cnpm install [name]

(二)脚手架安装 angular-cli

1.实际操作如下

npm安装慢

[root@ChangerLee bin]# npm install -g @angular/cli

最好用阿里的cnpm

[root@ChangerLee bin]# cnpm install -g @angular/cli
Downloading @angular/cli to /usr/local/node/8.2.1/lib/node_modules/@angular/cli_tmp
Copying /usr/local/node/8.2.1/lib/node_modules/@angular/cli_tmp/_@angular_cli@1.2.6@@angular/cli to /usr/local/node/8.2.1/lib/node_modules/@angular/cli
Installing @angular/cli's dependencies to /usr/local/node/8.2.1/lib/node_modules/@angular/cli/node_modules
。。。。。。。略。。。。。。

使用脚手架创建Angular4项目

[root@ChangerLee Angular4Demo]# ng new my-ng4-Demo1

启动项目

[root@ChangerLee Angular4Demo]# cd my-ng4-Demo1/
[root@ChangerLee my-ng4-Demo1]# 
[root@ChangerLee my-ng4-Demo1]# ng serve --port 8888 --open

* NG Live Development Server is listening on localhost:8888, open your browser on http://localhost:8888 *