AngularJS + Express JS入門搭建網站

2015-05-12 10:45:32來源:kevin song的博客作者:

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

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網站搭建示例。希望對你有用

關鍵詞:AngularJSExpressJS

贊助商鏈接:

双色球基本走势图图表中彩网