建立 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

 

最终运行效果:



 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值