3月份開始,接到了新的任務(wù),跟UI開發(fā)有關(guān),用的是Angular JS,Express JS等技術(shù)。于是周末順便學(xué)習(xí)下新技術(shù)。
組里產(chǎn)品UI架構(gòu)如下:
其中前端,主要使用Angular JS框架,另外配合Bootstrap提供的很多控件以及JQuery,后臺(tái)主要是Express JS搭建的Web Server,Express JS配合Nginx使用非常方便。
由此在項(xiàng)目不忙的時(shí)候,自己于是有時(shí)間和興趣學(xué)習(xí)一下Angular JS與Express JS。
同時(shí)自己實(shí)現(xiàn)了一個(gè)最簡單的Angular JS + Express JS的網(wǎng)站示例。
一. Angular JS
Angular JS是由谷歌員工開發(fā),后由谷歌維護(hù)的一個(gè)項(xiàng)目,官網(wǎng)為:https://angularjs.org/。上面有詳細(xì)的文檔,可以下載最新的版本1.4和穩(wěn)定版1.3.15。
簡單來講,Angular JS是一個(gè)作用在前端的Javascript框架。它的兩大特點(diǎn)是通過指令擴(kuò)展了Html,并且通過表達(dá)式綁定數(shù)據(jù)到Html。同時(shí)提供了控制器,F(xiàn)ilter過濾器,F(xiàn)actory等服務(wù)。
Angular JS因?yàn)樽饔迷谇岸,所以可以和任何服?wù)器技術(shù)相結(jié)合,與Express JS就是很好的結(jié)合。
Angular JS的產(chǎn)生為了解決靜態(tài)網(wǎng)頁操作DOM的弊端,適用于開發(fā)動(dòng)態(tài)Web應(yīng)用。
Angular JS的原理可通過下圖了解:
網(wǎng)上入門學(xué)習(xí)的資料也很多,這里不予贅述。但介紹一下Angular JS的幾個(gè)重要概念:
1. 控制器Controller
要?jiǎng)討B(tài)操作網(wǎng)頁中的數(shù)據(jù),我們可以針對Html頁面編寫控制器,控制器本質(zhì)是一個(gè)Javascript方法,例如我們可以針對每一個(gè)HTML頁面,寫一個(gè)對應(yīng)的Javascript方法做控制器,來控制頁面中的數(shù)據(jù)。如下:
index.html
1 <!doctype html> 2 <html ng-app="myApp"> 3 <head> 4 <script src="lib/angular-1.3.15/angular.js"></script> 5 <script src="lib/angular-1.3.15/angular-route.js"></script> 6 <script src="js/controller.js"></script> 7 <script src="js/angularMainApp.js"></script> 8 </head> 9 <body ng-view> 10 <div> 11 <p>Hello {{name}}</p> 12 </div> 13 </body> 14 </html>
這是一個(gè)Angular JS控制編寫的頁面,指定Angular JS的app為myApp,注意看其中的表達(dá)式,{{name}},name就是一個(gè)動(dòng)態(tài)變量。那name的值從何而來?就是要在對應(yīng)的控制器中給name賦值,從來用戶訪問index.html頁面時(shí)可看到name真實(shí)的值。
controller.js
1 // Declare angular JS level module wich depends on filters, and services 2 var myControllers = angular.module(‘myControllers‘, []); 3 4 // controller 5 myControllers.controller(‘indexContrl‘, [‘$scope‘, function ($scope) { 6 $scope.name = "Kevin"; 7 }]);
在controller.js中,我們定義了一個(gè)indexContrl的控制器,這個(gè)控制器來給index.html中的name賦值。當(dāng)然我覺得真實(shí)開發(fā)中,控制器的代碼肯定會(huì)很多,建議每一個(gè)像indexContrl的控制器單獨(dú)放在一個(gè)JS文件中,這樣規(guī)范,好維護(hù)。
那有一個(gè)問題,indexContrl如何與index.html關(guān)聯(lián)起來?Angular JS怎么知道我們要用indexContrl來控制index.html?
這里有兩種方式,一是在index.html中直接指定,
1 <div ng-controller="indexContrl"> 2 <p>Hello {{name}}</p> 3 </div>
但這種方式,對于大型網(wǎng)站來說,太麻煩。建議使用另外一種方式,就是用Angular JS的另一個(gè)Module ng-route,做路由控制,針對不同的路徑,在同一個(gè)文件中定義好各自的控制器。如下:
myAngularApp.js
1 // Declare angular JS level module wich depends on filters, and services 2 var myApp = angular.module(‘myApp‘, [ ‘ngRoute‘, ‘myControllers‘]); 3 4 // route 5 myApp.config([‘$routeProvider‘, 6 function($routeProvider) { 7 $routeProvider. 8 when( 9 ‘/‘, 10 { 11 templateUrl: ‘index.html‘, 12 controller: ‘indexContrl‘ 13 } 14 ). 15 otherwise( { 16 redirectTo: ‘/404‘ 17 }); 18 } 19 ]);
值得注意的是,一定要在myApp的moudle中引用ng-route,同時(shí)要在文件中引用angular-route.js文件,否則不起作用。
這樣index.html頁面中的數(shù)據(jù),會(huì)被indexContrl函數(shù)控制。這里只是一個(gè)簡單的Demo,更多的功能要去看文檔。
2. Filter過濾器
Angular JS提供過濾器功能,本質(zhì)是我們定義一些通用的方法,來格式化頁面上輸出的數(shù)據(jù)。非常方便。
建議開發(fā)時(shí)放在單獨(dú)的Filter.js文件中。
3. Factory服務(wù)
也是讓我們定義一些通用的方法,作為服務(wù)。但所有的服務(wù)都是延遲實(shí)例化,只要用到時(shí)或被依賴時(shí)才會(huì)實(shí)例化,都是單例。
建議開發(fā)時(shí)放在單獨(dú)的Factory.js文檔中。
二. Express JS
在示例的前端中,我們使用Angular JS框架開發(fā)了Html頁面以及對應(yīng)的JS文件。但網(wǎng)站的后臺(tái)就要用其他技術(shù)了。如果我們要用Node.js做后臺(tái),那很簡單,http.createServer就可以了。但在真實(shí)的網(wǎng)站開發(fā)中,用Express JS會(huì)更適合。
Express JS是目前最流行的基于Node.js的Web開發(fā)框架,提供各種模塊,如session,cookie等,可快速搭建一個(gè)具有完整功能的網(wǎng)站。
本質(zhì)來講,Express JS是基于Node.js內(nèi)置的http模塊開發(fā)而成。
Express JS和Nginx反向代理服務(wù)器搭配非常方便。
這里Express JS有一個(gè)重要概念是中間件middleware,可以加載使用很多Express JS或其他模塊提供的模塊作為中間件,它的作用是處理http請求,一個(gè)中間件處理完,可以傳遞給下一個(gè)中間件。
可使用NPM來下載Express JS。
1 npm install express
如果要快速使用Express JS來搭建網(wǎng)站后臺(tái),推薦一個(gè)工具,叫express-generator,它可以幫你快速建一個(gè)Express JS項(xiàng)目,生成必要的文件。
1 npm install -g express-generator
但這里,我發(fā)現(xiàn)express generator中使用的其他模塊較多,如jade做視圖渲染等,稍顯復(fù)雜。我還是參照,自己建立一個(gè)最簡單的Express JS項(xiàng)目。
路徑如下:
其中public文件夾中放置的是UI相關(guān)文件,如下:
其中app.js是Express JS的起始文件,相當(dāng)于main函數(shù)。
app.js
1 var express = require(‘express‘); 2 var http = require(‘http‘); 3 var path = require(‘path‘); 4 var routes = require(‘./routes/index‘); 5 6 var app = express(); 7 8 app.use(express.static(path.join(__dirname, ‘public‘))); 9 10 app.use(‘/‘, routes); 11 12 http.createServer(app).listen(3000);
這里,就是使用Express JS建立一個(gè)server,注意第8行代碼的作用是指定頁面的文件夾,第10句的作用是關(guān)于路徑/的路由信息在routes文件夾里的index文件中定義,這兩句順序不能錯(cuò)。
routes/index
1 var express = require(‘express‘); 2 var router = express.Router(); 3 4 /* GET home page. */ 5 router.get(‘/‘, function(req, res, next) { 6 res.render(‘index‘, { title: ‘Express‘ }); 7 }); 8 9 module.exports = router;
意為對于路徑/的訪問,去public文件夾下找index.html文件。
這樣通過一條命令,
1 node app.js
就可以把網(wǎng)站掛起來。
三. 示例結(jié)果及小結(jié)
最后訪問網(wǎng)站,可看到正確的結(jié)果,網(wǎng)站已被掛起,同時(shí)頁面中的變量已被Angular JS控制器替換為正確數(shù)據(jù)。
這里講一個(gè)小地方,最初試驗(yàn)時(shí)頁面的變量怎么也不替換,花了很多個(gè)小時(shí),換了Angular JS庫,改變了控制器等寫法,都沒用。最后查資料和文檔,才發(fā)現(xiàn)只有頁面中有ng-view,才會(huì)起作用。原來是這樣。。?拥。。。
本文只介紹一個(gè)很簡單的Angular JS + Express JS網(wǎng)站搭建示例。希望對你有用