第一章:搭建开发环境
1:选择Chrome浏览器,给Chrome装调试angular的插件Batarang,
安装步骤:
(1).从http://pan.baidu.com/s/1jGILtzg下载插件,如果连接失效了,百度Batarang下载即可,网上提供很多下载的地方;
(2)下载后是一个后缀名为“.crx”的chorme拓展文件。建议复制到你的chrome浏览器安装目录下,位置随意放,确保文件不会被删除就好了;
(3)接下来是安装这个Batarang插件了,打开chrome后,在地址栏输入chrome://extensions/,回车即可进入google chrome扩展程序管理页面(进入扩展程序的另一个方法是控制——设置——扩展程序);
(4)在扩展程序界面下,将刚才下载的Batarang的.crx文件拖放进来;
(5)接下来浏览器会提示是否确定添加或安装AngularJS Batarang应用,点击添加即可,最后确保启用被勾选,现在Batarang就安装完成了。chrome 就可以调式angularJS应用了;
(6)检测是否安装成功:打开chrome开发者工具,你可以看到后边多了一个AngularJS的面板了。
2:安装Node.js
(1)访问http://node.js.org下载和安装适合你的平台的Node.js安装包。确保已经安装了包管理器(npm),并且安装目录已经添加到了你的路径中;
(2)测试Node.js是否安装成功:打开命令行工具并输入node。等待提示信息变化后,然后输入以下信息(在同一行中):
function testNode(){return "Node is working"};testNode();
如果安装成功你将看到如下输出:'Node is working'
3:安装Web服务器
(1)在Node.js安装目录下安装Connect
npm install connect
(2)在Node.js安装目录下创建一个名为server.js的新文件
server.js文件内容
var connect = require('connect');
connect.createServer(connect.static("../angularjs")).listen(5000);
4.获取AngularJS库
(1)从官网(httop://angularjs.org)下载AngularJS的最新稳定版,根据你在server.js写的路径,建立一个angularjs文件夹,并把angular.js放到此文件夹下
(2)获取Bootstrap文件,不要重组文件结构,把文件直接拷贝到angularjs文件夹下
5:执行一个简单的测试
(1)<!DOCTYPE html>
<html ng-app>
<head>
<title>First Test</title>
<script type="text/javascript" src="framework/angular-1.3.0.14/angular.js"></script>
<link rel="stylesheet" type="text/css" href="framework/bootstrap-3.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="framework/bootstrap-3.3.0/dist/css/bootstrap-theme.min.css">
</head>
<body>
<div class="btn btn-default">{{"AngularJS"}}</div>
<div class="btn btn-success">Bootstrap</div>
</body>
</html>
(2)启动Web服务器
从Node.js的安装目录下运行
node server.js
(3)打开Chrome并浏览这个URL http://localhost:5000/test.html,如果看到一下显示说明就正确了
(4)如果报以下错误connect.static is not a funtion
原因是3.x的connect把很多非核心功能分离出去了, 由其他的middleware实现. 2.x的static方法, 在3.x中由serve-static实现. 你安装的是3.x的版本, 所以会报这个错.
解决办法有两种:如下图所示
方法一: 在安装connect的时候指定使用2.x的connect;
方法二:再安装一个 serve-static即在Node.js的安装目录下(npm install serve-static),然后修改server.js文件如下图所示
即可
(5)如果遇到其他问题,可以检查你的Web服务器的配置,检查你的文件是否放对了位置,然后再试。