建立 AngularJS 开发环境

1、浏览器

    我用的是 Google Chrome，它拥有出色的 F12 developer tools，并且 Google 还像 F12 tools中加了 Chrome 扩展用于支持 AngularJS。

【警示：像大多数JavaScript库一样，老版本的 IE 有一些兼容性问题。我会在适当的章节中告诉你如何解决常见的问题，你可以浏览一下这个网址：http://docs.angularjs.org/guide/ie，可以看到一些问题的总结以及如何解决它们】

 

2、代码编辑器

    WebStorm和Sublime Text都是付费产品。另外微软的 Visual Studio Express 2013就不收费而且对AngularJS有内置支持。

 

3、安装 Node.js

    许多常常用于客户端Web app开发的开发工具都是用JS写的并依赖 Node.js 才能运行。Node.js 所依赖的JavaScript引擎来自于Google Chrome浏览器，但做了一些调整以便可以在浏览器之外工作。

 

4、安装 Web 服务器

    一个简单的 web 服务器已足够应付开发了，下面会用Node.js的 connect模块来创建一个服务器。从Node.js 的安装目录中，运行 npm install connect。NPM也就是Node Package Manager。然后创建一个新文件 server.js。文件内容如下：

var connect = require('connect');

connect.createServer(

    connect.static("../angularjs")

).listen(5000);

    该简单文件创建了一个基本的 web服务器，在5000端口上回应请求，从一个叫angularjs的文件夹中提供文件。该文件夹和Node.js的安装目录在同一级别。

 

5、安装测试系统

    AngularJS支持单元测试。Karma test runner、Jasmine test framework。

安装命令：npm install -g karma

 

6、创建 AngularJS 目录

    也就是创建一个项目目录。在 Node.js 安装目录的同一层次上创建一个叫 angularjs 的目录。

 

6.1、获取 AngularJS 库

    从 http://angularjs.org 下载最新稳定版。将它放到刚才建的angularjs目录中。

 

6.2、Getting the AngularJS Extras

    在那个下载页面上，你会看到一个 Extras 链接。通过它你可以看到一些额外的文件，它们扩展了核心AngularJS库。

 

6.3、Getting Bootstrap

    我将使用 Bootstrap CSS 框架来给例子中的内容提供样式。不是说用 AngularJS 就需要 Bootstrap。可以去 http://getbootstrap.com下载。拷贝其中的dist/css下的bootstrap.css以及bootstrap-theme.css到刚才创建的angularjs目录中。

    Bootstrap 包含了一些 CSS 和 JS 文件，我会在例子中使用它的CSS文件，但不会用到它的JS文件，因为解释 AngularJS 是如何工作的用不到这些JS文件。

 

6.4、Getting Deployd

    在第6章，会开始创建一个内容充实的例子程序，那时，就需要一个服务器，向它发送HTTP查询获取数据。在用到 Ajax 以及访问 RESTful web服务时也需要用到服务器。

    我为这个任务选的服务器叫 Deployd，它是一个出色的跨平台的工具。它是在 Node.js 以及 MongoDB上建立起来的，这样它就可以存储 JSON 数据，服务端行为就是用JS写的。

 

7、Performing a Simple Test

    为了确认所有的东西都安装好并能工作了，请创建一个新HTML文件，叫 test.html，放在 angularjs 目录中。内容如下：

 

7.1、 启动 web server

    node server.js

 

7.2、加载测试文件

    http://localhost:5000/test.html

 

注意：我在运行 node server.js 时报了如下的错

[localhost:oracle:O11R2]$ node server.js

/home/oracle/node-v0.12.7-linux-x64/server.js:3

    connect.static('../angularjsDevEnv')

                  ^

TypeError: undefined is not a function

    at Object.<anonymous> (/home/oracle/node-v0.12.7-linux-x64/server.js:3:19)

    at Module._compile (module.js:460:26)

    at Object.Module._extensions..js (module.js:478:10)

    at Module.load (module.js:355:32)

    at Function.Module._load (module.js:310:12)

    at Function.Module.runMain (module.js:501:10)

    at startup (node.js:129:16)

    at node.js:814:3

 

网上资料说：“the connect package has made some changes in the latest 3.x version of their code base, moving the static middleware to it's own package”。下面是通过安装老版来解决此问题。

 

[localhost:oracle:O11R2]$ npm uninstall connect

unbuild connect@3.4.0

[localhost:oracle:O11R2]$ npm install connect@2.X.X

 

那个链接是http://stackoverflow.com/questions/24346161/nodejs-connect-cannot-find-static

 

最终运行效果：