AngularJS Node.JS Grunt 一个例子

做了一个简单的示例，目的是记录环境配置以及这套框架的结构流程。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/2014-05/102140.htm
带你走近AngularJS - 体验指令实例 http://www.linuxidc.com/Linux/2014-05/102141.htm
带你走近AngularJS - 创建自定义指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中对控制器进行单元测试 http://www.linuxidc.com/Linux/2013-12/94166.htm在 AngularJS 应用中通过 JSON 文件来设置状态 http://www.linuxidc.com/Linux/2014-07/104083.htmAngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htmAngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据 http://www.linuxidc.com/Linux/2014-07/104402.htmAngularJS 的详细介绍：请点这里
AngularJS 的下载地址：请点这里本文永久更新链接地址：http://www.linuxidc.com/Linux/2014-11/109354.htm