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

为什么选angular4作为前端框架

安装

(一)Nodejs安装

cd /usr/local/src/
wget http://nodejs.org/dist/v0.10.24/node-v0.10.24.tar.gz[/code] 
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


[b]启动项目

[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 *