Angularjs Nodejs 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目录里看到对应的模块目录：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VubnlfZm9yZXZlcg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

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向server上的‘/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 Nodejs Grunt 一个样例

最新文章

热门文章