歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

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系列

  1. 帶你走近AngularJS - 基本功能介紹 http://www.linuxidc.com/Linux/2014-05/102140.htm
  2. 帶你走近AngularJS - 體驗指令實例 http://www.linuxidc.com/Linux/2014-05/102141.htm
  3. 帶你走近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.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交數據 http://www.linuxidc.com/Linux/2014-07/104402.htm

AngularJS 的詳細介紹:請點這裡
AngularJS 的下載地址:請點這裡

Copyright © Linux教程網 All Rights Reserved