最近，接到了新的任務(wù)，跟UI開發(fā)有關(guān)，用的是Angular JS，Express JS等技術(shù)。于是周末順便學(xué)習(xí)下新技術(shù)。
組里產(chǎn)品UI架構(gòu)如下：
其中前端，主要使用Angular JS框架，另外配合Bootstrap提供的很多控件以及JQuery，后臺主要是Express JS搭建的Web Server，Express JS配合Nginx使用非常方便。
由此在項目不忙的時候，自己于是有時間和興趣學(xué)習(xí)一下Angular JS與Express JS。
同時自己實現(xiàn)了一個最簡單的Angular JS + Express JS的網(wǎng)站示例。
一. Angular JS
Angular JS是由谷歌員工開發(fā)，后由谷歌維護(hù)的一個項目，官網(wǎng)為：https://angularjs.org/。上面有詳細(xì)的文檔，可以下載最新的版本1.4和穩(wěn)定版1.3.15。
簡單來講，Angular JS是一個作用在前端的Javascript框架。它的兩大特點是通過指令擴(kuò)展了Html，并且通過表達(dá)式綁定數(shù)據(jù)到Html。同時提供了控制器，F(xiàn)ilter過濾器，F(xiàn)actory等服務(wù)。
Angular JS因為作用在前端，所以可以和任何服務(wù)器技術(shù)相結(jié)合，與Express JS就是很好的結(jié)合。
Angular JS的產(chǎn)生為了解決靜態(tài)網(wǎng)頁操作DOM的弊端，適用于開發(fā)動態(tài)Web應(yīng)用。
Angular JS的原理可通過下圖了解：
網(wǎng)上入門學(xué)習(xí)的資料也很多，這里不予贅述。但介紹一下Angular JS的幾個重要概念：
1. 控制器Controller
要動態(tài)操作網(wǎng)頁中的數(shù)據(jù)，我們可以針對Html頁面編寫控制器，控制器本質(zhì)是一個Javascript方法，例如我們可以針對每一個HTML頁面，寫一個對應(yīng)的Javascript方法做控制器，來控制頁面中的數(shù)據(jù)。如下：
index.html
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ī)范，好維護(hù)。
那有一個問題，indexContrl如何與index.html關(guān)聯(lián)起來？Angular JS怎么知道我們要用indexContrl來控制index.html？
這里有兩種方式，一是在index.html中直接指定，
Hello {{name}}
但這種方式，對于大型網(wǎng)站來說，太麻煩。建議使用另外一種方式，就是用Angular JS的另一個Module ng-route，做路由控制，針對不同的路徑，在同一個文件中定義好各自的控制器。如下：
重慶分公司
重慶分公司
