[Pro Angular.JS]学习笔记1.1：设置开发环境

浏览数：43 / 时间：2015年06月09日

可以使用yeoman.io，很方便。我已经写了一篇随笔，介绍如何使用。这里也有一篇介绍的文章：http://www.cnblogs.com/JoannaQ/p/3756281.html

代码编辑器，在Mac下用了一下WebStorm，太恶心了。另外发现书的作者使用的开发环境是Windows + VS Express 2013，为了方便学习，我也使用VS Express 2013 Update2。VS2013用起来蛮舒服的，把WebStorm比得跟驼屎一样。也许是因为我没用习惯吧。

1、安装Node.js，没啥说的，去官网下载，安装。

2、然后安装Web Server。作者使用Node.js的Connect自己写了个网页服务器。下面是安装Connect模块。以管理员运行CMD，进入刚刚Node.js的安装路径，也就是Node的可执行文件所在路径，运行：

npm install connect

这个npm是node的包安装器，它也在Node的可执行文件所在路径下，用来下载模块必须的文件。

安装好connect模块后，在Node的可执行文件所在路径下，新建一个Server.js文件，这个就是咱们的Web Server了，代码如下：

var connect = require(‘connect‘);
connect.createServer(
connect.static("../angularjs")
).listen(5000);

该文件，创建了一个基本的web server，他在5000端口号上相应请求，为angularjs这个文件夹里的文件服务。这个文件夹和Node.js的安装文件夹一个级别。

3、安装测试系统

AngularJS最重要的一个方面，就是提供单元测试。书中作者使用Karma test runner和Jasmine test framework，他们两个都被广泛地使用，并易于使用。安装命令：

npm install -g karma

在25章会用到该测试系统。

4、创建项目路径

我的Node.JS安装路径为C:\angularjs\nodejs 。我的项目路径为C:\angularjs\angularjs 。如果你使用其他路径，请调整上面Server.js中的服务路径。

4.1、下载AngularJS库

没啥说的，选择没有压缩的稳定版，我将它放在项目的根目录下。C:\angularjs\angularjs\angular.js。

4.2下载AngularJS扩展

在以后的章节会用到，这里一并下载了吧。包括touch,animate,mocks,route,sanitize,locale，同样放在项目根目录下。

4.3下载Bootstrap

没啥说的，这里将bootstrap.css和bootstrap-theme.css拷贝到项目跟目录。本书不使用bootstrap的JavaScript特性。

4.4可选地，可以安装LiveReload

在Yeoman.IO中自带的有，用了下，很好用。简单来讲，就是这边代码编辑器里修改完，那边浏览器里不用刷新，就能看到更新后的效果。

4.5下载Deployd

这个在第六章才用到，现在先不装了。

5、执行一个简单的测试

在项目文件夹下新建test.html，代码如下：

<!DOCTYPE html>
<html ng-app>
<head>
<title>First Test</title>
<script src="angular.js"></script>
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-theme.css" rel="stylesheet" />
</head>
<body>
<div class="btn btn-default">{{"AngularJS"}}</div>
<div class="btn btn-success">Bootstrap</div>
</body>
</html>