做了一個簡單的示例，目的是記錄環境配置以及這套框架的結構流程。
1.配置環境
默認nodejs已安裝。
安裝以下模塊：express（nodejs框架）,grunt（javascript task runner）,grunt-contrib-watch（grunt live load插件）,grunt-express-server（grunt啟動express服務端插件）。
命令行中進入程序目錄，依次輸入以下命令：
npm install express 回車
npm install grunt 回車
npm install grunt-contrib-watch 回車
npm install grunt-express-server 回車
安裝成功後，可以在程序目錄中的node_modules文件夾裡看到相應的模塊文件夾：
2.配置grunt 任務
打開程序目錄下的Gruntfile.js文件，注冊express和watch任務。
express任務啟動express服務器並且運行server.js文件。watch任務監視express任務以及live reload。代碼如下：
module.exports = function(grunt) {
//config project
grunt.initConfig({
watch: {
options: {
livereload: true,
},
express: {
files: [ 'server.js' ],
options: {
spawn: false
}
}
},
//start express server and run server.js
express: {
options: {
// Override defaults here
},
dev: {
options: {
script: 'server.js'
}
}
}
});
//enable plugins
grunt.loadNpmTasks('grunt-express-server');
grunt.loadNpmTasks('grunt-contrib-watch');
//register task
grunt.registerTask('default', ['express','watch']);
};
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:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script
src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-resource.min.js"></script>
</head>
<body ng-app="myApp" ng-controller=MainCtrl>
<div>{{data}}</div>
<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;
})
});
</script>
</body>
</html>
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系列：
如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm
在 AngularJS 應用中通過 JSON 文件來設置狀態 http://www.linuxidc.com/Linux/2014-07/104083.htm
AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm
AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交數據 http://www.linuxidc.com/Linux/2014-07/104402.htm
AngularJS 的詳細介紹：請點這裡
AngularJS 的下載地址：請點這裡
