安装以下模块：express（nodejs框架）,grunt（java script task runner）,grunt-contrib-watch（grunt live load插件）,grunt-express-server（grunt启动express服务端插件）。
3. 主要文件
serve_data.js，server.js和index.html都在程序目录下。
index.html用angularjs resource向服务器上的‘/data’路径发起http请求。
在server.js中定义了路径‘/data’的行为是返回通过serve_data.js文件中的getData()方法获取的data变量。
index.html 的resource收到返回的data后，通过数据绑定{{data}}将其显示在页面上。
三个文件具体代码及注释如下：
index.html:
http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-resource.min.js">>
?{{data}}
?<script>
? var myApp = angular.module('myApp', [ 'ngResource' ]);
? //define app factory
? myApp.factory('DataFac', function($resource) {
? ?//request data from route '/data'
? ?return $resource('data');
? });
? //define app controller
? myApp.controller('MainCtrl', function($scope, DataFac) {
? ?DataFac.get(function(response) {
? ? $scope.data = response;
? ?})
? });
?
server.js:
//use express
var express = require('express');
var app = express();
//require file serve_data.js to use its exported modules
var instance=require('./serve_data.js')
var data=instance.getData();
//define route
app.get('/data',function(req,res){
?res.send(data);
});
//serve static index.html as default
app.use(express.static(__dirname + '/'));
//bind and listen for connections on the given host and port
app.listen(9001,function(){
?console.log('Server listening on',9001)
})
serve_data.js:
//export funtion getData
module.exports={
? getData:function(){
? ?//data can be fetched from a database or a file and so on. Here for simplicity,provide json data directly
? ?var data={"widget": {
? ? "debug": "on",
? ? "window": {
? ? ?"title": "Sample Widget",
? ? ?"name": "main_window",
? ? ?"width": 500,
? ? ?"height": 500
? ? },
? ? "image": {
? ? ?"src": "Images/test.png",
? ? ?"hOffset": 250,
? ? ?"vOffset": 250,
? ? ?"alignment": "center"
? ? },
? ? "text": {
? ? ?"data": "Click Here",
? ? ?"size": 36,
? ? ?"style": "bold",
? ? ?"name": "text1",
? ? ?"hOffset": 250,
? ? ?"vOffset": 100,
? ? ?"alignment": "center"
? ? }
? ?}} ;
? ?return data;
? }
}
4.运行程序
在命令行中进入程序目录，输入grunt运行grunt任务。打开浏览器进入http://localhost:9001/? ，得到以下结果：
希望你喜欢，并分享我的工作~带你走近AngularJS系列：
