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 [email protected]
[localhost:oracle:O11R2]$ npm install [email protected]
那个链接是http://stackoverflow.com/questions/24346161/nodejs-connect-cannot-find-static
最终运行效果: