AngularJS + Express JS入門搭建網站

kevin song的部落格發表於2015-05-11
AngularJSExpress網站

3月份開始，接到了新的任務，跟UI開發有關，用的是Angular JS，Express JS等技術。於是週末順便學習下新技術。

組裡產品UI架構如下：

其中前端，主要使用Angular JS框架，另外配合Bootstrap提供的很多控制元件以及JQuery，後臺主要是Express JS搭建的Web Server，Express JS配合Nginx使用非常方便。

由此在專案不忙的時候，自己於是有時間和興趣學習一下Angular JS與Express JS。

同時自己實現了一個最簡單的Angular JS + Express JS的網站示例。

一. Angular JS

Angular JS是由谷歌員工開發，後由谷歌維護的一個專案，官網為：https://angularjs.org/。上面有詳細的文件，可以下載最新的版本1.4和穩定版1.3.15。

簡單來講，Angular JS是一個作用在前端的Javascript框架。它的兩大特點是通過指令擴充套件了Html，並且通過表示式繫結資料到Html。同時提供了控制器，Filter過濾器，Factory等服務。

Angular JS因為作用在前端，所以可以和任何伺服器技術相結合，與Express JS就是很好的結合。

Angular JS的產生為了解決靜態網頁操作DOM的弊端，適用於開發動態Web應用。

Angular JS的原理可通過下圖瞭解：

網上入門學習的資料也很多，這裡不予贅述。但介紹一下Angular JS的幾個重要概念：

1. 控制器Controller

要動態操作網頁中的資料，我們可以針對Html頁面編寫控制器，控制器本質是一個Javascript方法，例如我們可以針對每一個HTML頁面，寫一個對應的Javascript方法做控制器，來控制頁面中的資料。如下：

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>

這是一個Angular JS控制編寫的頁面，指定Angular JS的app為myApp，注意看其中的表示式，{{name}}，name就是一個動態變數。那name的值從何而來？就是要在對應的控制器中給name賦值，從來使用者訪問index.html頁面時可看到name真實的值。

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中，我們定義了一個indexContrl的控制器，這個控制器來給index.html中的name賦值。當然我覺得真實開發中，控制器的程式碼肯定會很多，建議每一個像indexContrl的控制器單獨放在一個JS檔案中，這樣規範，好維護。

那有一個問題，indexContrl如何與index.html關聯起來？Angular JS怎麼知道我們要用indexContrl來控制index.html？

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

1         <div ng-controller="indexContrl">
2             <p>Hello {{name}}</p>
3         </div>

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

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，同時要在檔案中引用angular-route.js檔案，否則不起作用。

這樣index.html頁面中的資料，會被indexContrl函式控制。這裡只是一個簡單的Demo，更多的功能要去看文件。

2. Filter過濾器

Angular JS提供過濾器功能，本質是我們定義一些通用的方法，來格式化頁面上輸出的資料。非常方便。

建議開發時放在單獨的Filter.js檔案中。

3. Factory服務

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

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

二. Express JS

在示例的前端中，我們使用Angular JS框架開發了Html頁面以及對應的JS檔案。但網站的後臺就要用其他技術了。如果我們要用Node.js做後臺，那很簡單，http.createServer就可以了。但在真實的網站開發中，用Express JS會更適合。

Express JS是目前最流行的基於Node.js的Web開發框架，提供各種模組，如session，cookie等，可快速搭建一個具有完整功能的網站。

本質來講，Express JS是基於Node.js內建的http模組開發而成。

Express JS和Nginx反向代理伺服器搭配非常方便。

這裡Express JS有一個重要概念是中介軟體middleware，可以載入使用很多Express JS或其他模組提供的模組作為中介軟體，它的作用是處理http請求，一箇中介軟體處理完，可以傳遞給下一個中介軟體。

可使用NPM來下載Express JS。

1 npm install express

如果要快速使用Express JS來搭建網站後臺，推薦一個工具，叫express-generator，它可以幫你快速建一個Express JS專案，生成必要的檔案。

1 npm install -g express-generator

但這裡，我發現express generator中使用的其他模組較多，如jade做檢視渲染等，稍顯複雜。我還是參照，自己建立一個最簡單的Express JS專案。

路徑如下：

其中public資料夾中放置的是UI相關檔案，如下：

其中app.js是Express JS的起始檔案，相當於main函式。

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建立一個server，注意第8行程式碼的作用是指定頁面的資料夾，第10句的作用是關於路徑/的路由資訊在routes資料夾裡的index檔案中定義，這兩句順序不能錯。

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

就可以把網站掛起來。

三. 示例結果及小結

最後訪問網站，可看到正確的結果，網站已被掛起，同時頁面中的變數已被Angular JS控制器替換為正確資料。

這裡講一個小地方，最初試驗時頁面的變數怎麼也不替換，花了很多個小時，換了Angular JS庫，改變了控制器等寫法，都沒用。最後查資料和文件，才發現只有頁面中有ng-view，才會起作用。原來是這樣。。。坑爹啊。。。

本文只介紹一個很簡單的Angular JS + Express JS網站搭建示例。希望對你有用

相關文章