日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 
 

  
  
 
  
  
 
  
  
     
  
  
         
  
  
         
  
  
         
  
  
         
  
  
     
  
  
     
  
  
        
 
  
  
            
Hello {{name}}
 
  
  
        

 這是一個Angular JS控制編寫的頁面，指定Angular JS的app為myApp，注意看其中的表達(dá)式，{{name}}，name就是一個動態(tài)變量。那name的值從何而來？就是要在對應(yīng)的控制器中給name賦值，從來用戶訪問index.html頁面時可看到name真實的值。

controller.js

 
 

  
  
// Declare angular JS level module wich depends on filters, and services 
  
  
var myControllers = angular.module('myControllers', []); 
  
  
 
  
  
// controller 
  
  
myControllers.controller('indexContrl', ['$scope', function ($scope) { 
  
  
    $scope.name = "Kevin"; 
  
  
}]); 
 
 

 在controller.js中，我們定義了一個indexContrl的控制器，這個控制器來給index.html中的name賦值。當(dāng)然我覺得真實開發(fā)中，控制器的代碼肯定會很多，建議每一個像indexContrl的控制器單獨放在一個JS文件中，這樣規(guī)范，好維護。

那有一個問題，indexContrl如何與index.html關(guān)聯(lián)起來？Angular JS怎么知道我們要用indexContrl來控制index.html？

這里有兩種方式，一是在index.html中直接指定，

但這種方式，對于大型網(wǎng)站來說，太麻煩。建議使用另外一種方式，就是用Angular JS的另一個Module ng-route，做路由控制，針對不同的路徑，在同一個文件中定義好各自的控制器。如下：

myAngularApp.js

 
 

  
  
// Declare angular JS level module wich depends on filters, and services 
  
  
var myApp = angular.module('myApp', [ 'ngRoute', 'myControllers']); 
  
  
 
  
  
// route 
  
  
myApp.config(['$routeProvider', 
  
  
    function($routeProvider) { 
  
  
        $routeProvider. 
  
  
        when( 
  
  
                '/', 
  
  
                { 
  
  
                    templateUrl: 'index.html', 
  
  
                    controller: 'indexContrl' 
  
  
                } 
  
  
        ). 
  
  
        otherwise( { 
  
  
            redirectTo: '/404' 
  
  
        }); 
  
  
    } 
  
  
]); 
 
 

 值得注意的是，一定要在myApp的moudle中引用ng-route，同時要在文件中引用angular-route.js文件，否則不起作用。

這樣index.html頁面中的數(shù)據(jù)，會被indexContrl函數(shù)控制。這里只是一個簡單的Demo，更多的功能要去看文檔。

2. Filter過濾器

Angular JS提供過濾器功能，本質(zhì)是我們定義一些通用的方法，來格式化頁面上輸出的數(shù)據(jù)。非常方便。

建議開發(fā)時放在單獨的Filter.js文件中。

3. Factory服務(wù)

也是讓我們定義一些通用的方法，作為服務(wù)。但所有的服務(wù)都是延遲實例化，只要用到時或被依賴時才會實例化，都是單例。

建議開發(fā)時放在單獨的Factory.js文件中。

#p#

二. Express JS

在示例的前端中，我們使用Angular JS框架開發(fā)了Html頁面以及對應(yīng)的JS文件。但網(wǎng)站的后臺就要用其他技術(shù)了。如果我們要用Node.js做后臺，那很簡單，http.createServer就可以了。但在真實的網(wǎng)站開發(fā)中，用Express JS會更適合。

Express JS是目前***的基于Node.js的Web開發(fā)框架，提供各種模塊，如session，cookie等，可快速搭建一個具有完整功能的網(wǎng)站。

本質(zhì)來講，Express JS是基于Node.js內(nèi)置的http模塊開發(fā)而成。

Express JS和Nginx反向代理服務(wù)器搭配非常方便。

這里Express JS有一個重要概念是中間件middleware，可以加載使用很多Express JS或其他模塊提供的模塊作為中間件，它的作用是處理http請求，一個中間件處理完，可以傳遞給下一個中間件。

可使用NPM來下載Express JS。

 npm install express

如果要快速使用Express JS來搭建網(wǎng)站后臺，推薦一個工具，叫express-generator，它可以幫你快速建一個Express JS項目，生成必要的文件。

npm install -g express-generator

但這里，我發(fā)現(xiàn)express generator中使用的其他模塊較多，如jade做視圖渲染等，稍顯復(fù)雜。我還是參照，自己建立一個最簡單的Express JS項目。

路徑如下：

其中public文件夾中放置的是UI相關(guān)文件，如下：

其中app.js是Express JS的起始文件，相當(dāng)于main函數(shù)。

app.js

 
 

  
  
var express = require('express'); 
  
  
var http    = require('http'); 
  
  
var path    = require('path'); 
  
  
var routes  = require('./routes/index'); 
  
  
 
  
  
var app = express(); 
  
  
 
  
  
app.use(express.static(path.join(__dirname, 'public'))); 
  
  
 
  
  
app.use('/', routes); 
  
  
 
  
  
http.createServer(app).listen(3000); 
 
 

 這里，就是使用Express JS建立一個server，注意第8行代碼的作用是指定頁面的文件夾，第10句的作用是關(guān)于路徑/的路由信息在routes文件夾里的index文件中定義，這兩句順序不能錯。

routes/index

 
 

  
  
var express = require('express'); 
  
  
var router = express.Router(); 
  
  
 
  
  
/* GET home page. */ 
  
  
router.get('/', function(req, res, next) { 
  
  
  res.render('index', { title: 'Express' }); 
  
  
}); 
  
  
 
  
  
module.exports = router; 
 
 

 意為對于路徑/的訪問，去public文件夾下找index.html文件。

這樣通過一條命令，

node app.js

就可以把網(wǎng)站掛起來。

三. 示例結(jié)果及小結(jié)

***訪問網(wǎng)站，可看到正確的結(jié)果，網(wǎng)站已被掛起，同時頁面中的變量已被Angular JS控制器替換為正確數(shù)據(jù)。

這里講一個小地方，最初試驗時頁面的變量怎么也不替換，花了很多個小時，換了Angular JS庫，改變了控制器等寫法，都沒用。***查資料和文檔，才發(fā)現(xiàn)只有頁面中有ng-view，才會起作用。原來是這樣?？拥?。本文只介紹一個很簡單的Angular JS + Express JS網(wǎng)站搭建示例。希望對你有用:-)