使用AngularJS搭建前台框架

Node.js部署：

• 下载安装包：
  从Node.js官网下载Node.js安装包。
• 安装Node.js：
  打开node-v6.9.4.pkg文件，一步步安装即可。

linux环境下node-v6.9.4.tar.gz包安装：
tar -zxvf node-v6.9.4.tar.gz
cd node-v6.9.4
./configure
make
sudo make install

AngularJS2部署：

• 全局安装yo：

yangweidandeMacBook-Pro:~ zhaoxueyong$ node -v
v6.9.4
yangweidandeMacBook-Pro:~ zhaoxueyong$ npm -v
3.10.10
yangweidandeMacBook-Pro:~ zhaoxueyong$ sudo npm install -g yo

• 全局安装generator：

yangweidandeMacBook-Pro:Browser zhaoxueyong$ sudo npm install -g generator-karma
npm ERR! shasum check failed for /tmp/npm-17960-7f712c1b/registry.npmjs.org/istextorbinary/-/istextorbinary-2.1.0.tgz
npm ERR! Expected: dbed2a6f51be2f7475b68f89465811141b758874
npm ERR! Actual:   6a2b96fd6b0894eb0e63405d2a97cab7cbc65926
npm ERR! From:     https://registry.npmjs.org/istextorbinary/-/istextorbinary-2.1.0.tgz
#解决方法参考“参考资料[5]”
yangweidandeMacBook-Pro:Browser zhaoxueyong$ sudo npm install -g grunt-cli bower yo generator-karma generator-angular #必须同时安装才能成功，很神奇
yangweidandeMacBook-Pro:ColusLifeDemo zhaoxueyong$ sudo npm install phantomjs -g

phantomjs安装失败，个人遇到的原因是默认安装包地址被墙，更换成可用地址即可。
npm install phantomjs-prebuilt --phantomjs_cdnurl=http://cnpmjs.org/downloads

• 构建前台框架：

yangweidandeMacBook-Pro:ColusLifeDemo zhaoxueyong$ cd Browser/
yangweidandeMacBook-Pro:ColusLifeDemo zhaoxueyong$ sudo yo angular

• 启动服务：

yangweidandeMacBook-Pro:Browser zhaoxueyong$ cat Gruntfile.js 
yangweidandeMacBook-Pro:Browser zhaoxueyong$ grunt serve
# 启动已经存在的项目之前，需要在项目目录下执行npm install && bower install

页面快照

Bootstrap部署（不需要）：

• 下载Bootstrap预编译包：

yangweidandeMacBook-Pro:bootstrap-3.3.7-dist zhaoxueyong$ tree
.
├── css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   ├── bootstrap-theme.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
├── fonts
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
└── js
    ├── bootstrap.js
    ├── bootstrap.min.js
    └── npm.js

• 把编译包放到库目录：

yangweidandeMacBook-Pro:lib zhaoxueyong$ mv bootstrap-3.3.7-dist/ /usr/local/lib/
yangweidandeMacBook-Pro:lib zhaoxueyong$ cd /usr/local/lib/
yangweidandeMacBook-Pro:~ zhaoxueyong$ mv bootstrap-3.3.7-dist/ bootstrap

• 问题解决：
  启动时提示如下告警：

Warning: not found: compass Used --force, continuing.

应该是没有安装Ruby导致的，安装Ruby再尝试尝试。

参考资料：

• [1]Bootstrap 环境安装
• [2]使用AngularJS构建大型Web应用
• [3]AngularJS从构建项目开始
• [4]从零开始nodejs系列文章
• [5]解决npm 的 shasum check failed for错误（npm注册国内镜像介绍）
• [6]使用Yeoman快速启动AngularJS项目开发
• [7]http://gruntjs.com/getting-started
• [8]安装yeoman