Angularjs Nodejs Grunt 一个例子
做了一個(gè)簡(jiǎn)單的示例，目的是記錄環(huán)境配置以及這套框架的結(jié)構(gòu)流程。
1.配置環(huán)境
默認(rèn)nodejs已安裝。
安裝以下模塊：express（nodejs框架）,grunt（javascript task runner）,grunt-contrib-watch（grunt live load插件）,grunt-express-server（grunt啟動(dòng)express服務(wù)端插件）。
命令行中進(jìn)入程序目錄，依次輸入以下命令：
npm install express 回車
npm install grunt ?回車
npm install grunt-contrib-watch 回車
npm install grunt-express-server 回車
安裝成功后，可以在程序目錄中的node_modules文件夾里看到相應(yīng)的模塊文件夾：
2.配置grunt 任務(wù)
打開(kāi)程序目錄下的Gruntfile.js文件，注冊(cè)express和watch任務(wù)。
express任務(wù)啟動(dòng)express服務(wù)器并且運(yùn)行server.js文件。watch任務(wù)監(jiān)視express任務(wù)以及l(fā)ive 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.js，server.js和index.html都在程序目錄下。
index.html用angularjs resource向服務(wù)器上的‘/data’路徑發(fā)起http請(qǐng)求。
在server.js中定義了路徑‘/data’的行為是返回通過(guò)serve_data.js文件中的getData()方法獲取的data變量。
index.html 的resource收到返回的data后，通過(guò)數(shù)據(jù)綁定{{data}}將其顯示在頁(yè)面上。
三個(gè)文件具體代碼及注釋如下：
index.html:
<!DOCTYPE html> <html> <head> <scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script> <scriptsrc="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 factorymyApp.factory('DataFac', function($resource) {//request data from route '/data'return $resource('data');});//define app controllermyApp.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) })
4.運(yùn)行程序
在命令行中進(jìn)入程序目錄，輸入grunt運(yùn)行g(shù)runt任務(wù)。打開(kāi)瀏覽器進(jìn)入http://localhost:9001/ ?，得到以下結(jié)果：
總結(jié)
以上是生活随笔為你收集整理的Angularjs Nodejs Grunt 一个例子的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 最小生成树构造算法--Prim算法，Kr
- 下一篇： Hive设置参数-指定引擎-队列