网站建设需要多长时间,漳州微网站建设公司,免费产品推广软件,wordpress哪个版本php做了一个简单的示例#xff0c;目的是记录环境配置以及这套框架的结构流程。
1.配置环境
默认nodejs已安装。
安装以下模块#xff1a;express#xff08;nodejs框架#xff09;,grunt#xff08;javascript task runner#xff09;,grunt-contrib-watch#xff08;g…做了一个简单的示例目的是记录环境配置以及这套框架的结构流程。
1.配置环境
默认nodejs已安装。
安装以下模块expressnodejs框架,gruntjavascript task runner,grunt-contrib-watchgrunt live load插件,grunt-express-servergrunt启动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 projectgrunt.initConfig({watch: {options: {livereload: true,},express: {files: [ server.js ],options: {spawn: false}}},//start express server and run server.jsexpress: {options: {// Override defaults here},dev: {options: {script: server.js}}}});//enable pluginsgrunt.loadNpmTasks(grunt-express-server);grunt.loadNpmTasks(grunt-contrib-watch);//register taskgrunt.registerTask(default, [express,watch]);
};3. 主要文件serve_data.jsserver.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
scriptsrchttps://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js/script
scriptsrchttp://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-resource.min.js/script
/head
body ng-appmyApp ng-controllerMainCtrldiv{{data}}/divscriptvar myApp angular.module(myApp, [ ngResource ]);//define app factorymyApp.factory(DataFac, function($resource) {//request data from route /datareturn $resource(data);});//define app controllermyApp.controller(MainCtrl, function($scope, DataFac) {DataFac.get(function(response) {$scope.data response;})});/script
/body
/htmlserver.js://use express
var express require(express);
var app express();//require file serve_data.js to use its exported modules
var instancerequire(./serve_data.js)
var datainstance.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 directlyvar 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/ 得到以下结果
