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文件夾里看到相應的模塊文件夾：
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.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> <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.運行程序
在命令行中進入程序目錄，輸入grunt運行grunt任務。打開瀏覽器進入http://localhost:9001/ ?，得到以下結果：
總結
以上是生活随笔為你收集整理的Angularjs Nodejs Grunt 一个例子的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 最小生成树构造算法--Prim算法，Kr
- 下一篇： Hive设置参数-指定引擎-队列