在“使用AngularJS”中，我們提到了如何在Node.js項目中引入AngularJS，這次提供一個非常簡單的示例，演示AngularJS里的指令、數據綁定、服務等內容。
我準備做Web后臺管理系統，不同的管理員會有不同的權限，管理員登錄后看到的菜單和他的權限有關，能看到什么，是動態生成的（類似RBAC）。本文的示例從這個項目而來，當然，現在還是最簡單的。
如果沒有特別說明，后面我們用到的示例都使用express generator生成。
Angular小demo
先搞起來吧。
第一步，進入myprojects目錄，執行“express AngularDemo”。
第二步，導航到AngularDemo目錄，執行“npm install”
第三步，到AngularJS下載最新的AngularJS庫文件，我下載的是1.4.3 min版本，重命名為“angular-1.4.3.min.js”，放在AngularDemo/public/javascripts下面。對于我們這個簡單的Demo，只要這一個文件就可以了。
第四步，準備我們要用的文件。
首先是admin.html，放在AngularDemo/public下面即可。admin.html的編碼格式要用UTF8。內容如下：
<!DOCTYPE html><html ng-app="x-admin"> <head> <meta charset="UTF-8"> <title>X管理系統</title> <link rel="stylesheet" href="/stylesheets/admin.css" rel="external nofollow" > </head> <body> <div class="x-view-full" ng-controller="x-controller"> <div class="x-project-header"> <div id="x-project-title">X管理后臺</div> <div id="x-login-user"><a href="/user/tttt" rel="external nofollow" rel="external nofollow" >{{currentUser}}</a> <a href="/logout" rel="external nofollow" rel="external nofollow" >退出</a></div> </div> <div class="x-sidemenu"> <div class="x-sidemenu-one" ng-repeat="menu in menus" ng-show="menu.enabled"> <p class="sidemenu-one">{{menu.text}}</p> <div class="x-sidemenu-two" ng-repeat="subMenu in menu.subMenus" ng-show="subMenu.enabled"> <input type="button" class="sidemenu-button" value="{{subMenu.text}}" ng-click="setContent(subMenu.action)"></input> </div> </div> </div> <div class="x-contents"> <div ng-include="content"></div> </div> </div> <script src="/javascripts/angular-1.4.3.min.js"></script> <script src="/javascripts/admin.js"></script> </body></html>接著是admin.js文件，放在AngularDemo/public/javascripts下面。UTF8編碼哦，內容如下：
angular.module('x-admin', []).controller('x-controller', function ($scope, $http) { $scope.currentUser="ZhangSan"; $scope.content = '/welcome.html'; $scope.menus = [ { text: "系統管理", enabled: true, subMenus:[ { text: "用戶管理", enabled: true, action:"/login.html" }, { text: "角色管理", enabled: true, action:"/role" }, { text: "權限管理", enabled: true, action:"/access" } ] }, { text: "內容管理", enabled: true, subMenus:[ { text: "直播監控", enabled: true, action:"/stream-monitor" }, { text: "預約管理", enabled: true, action:"/book-mgr" } ] }, { text: "推送管理", enabled: true, subMenus:[ { text: "推送列表", enabled: true, action:"/push-list" }, { text: "新增推送", enabled: true, action:"/add-push" } ] } ]; $scope.setContent = function(action){ console.log(action); $scope.content=action; };});接下來我寫了一個簡單的CSS文件——admin.css，放在AngularDemo/public/stylesheets下面。內容如下：
a { color: #00B7FF;}div.x-view-full { width: 100%; height: 100%;}div.x-project-header { display: inline-block; position: absolute; border: 1px solid #E4E4E4; background: #F2F2F2; width: 100%; height: 60px; left: 0px; top: 0px;}div.x-sidemenu { display: inline-block; position: absolute; border: 1px solid #E4E4E4; background: #F2F2F2; left: 0px; top: 66px; width: 160px; height: 600px; }div.x-contents { display: inline-block; position: absolute; left: 170px; top: 66px; min-width: 200px; min-height: 200px;}div.x-sidemenu-one{ margin-left: 8px;}div.x-sidemenu-two{ margin-left: 14px; font-size: 14px;}p.sidemenu-one{ font-size: 18px; font-weight: bold; color: black;}.sidemenu-button{ font-size: 14px; border: 0px; margin-bottom: 6px; background: #F2F2F2;}.sidemenu-button:hover {background-color: #218fd5;}#x-project-title{ position: absolute; display: inline-block; top: 20px; left: 20px; font-size: 28px; font-weight: bold; width: 200px;}#x-login-user{ position: absolute; display: inline-block; top: 30px; right: 10px; width: 200px; text-align: right;}div.admin-addUser{ position: relative; top: 4px; left: 10px; width: auto; height: auto;}最后，為演示菜單功能，我們還需要welcome.html和login.html這兩個靜態的html文件，都放在public下面即可。
welcome.html內容如下：
Welcome to X-Manager!
login.html內容如下（注意，UTF8編碼）：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登錄</title> </head> <body> <div class="form-container"> <p class="form-header">登錄</p> <form action='login' method='POST' align="center"> <table> <tr> <td><label for="user">賬號：</label></td> <td><input type="text" id="user" name="login_username" /></td> </tr> <tr> <td><label for="pwd">密碼：</label></td> <td><input type="password" id="pwd" name="login_password" /></td> </tr> <tr> <td colspan='2' align="right"> <a href="/signup" rel="external nofollow" >注冊</a> <input type="submit" value='登錄'/> </td> </tr> </table> </form> </div> </body></html>
第五步，在AngularDemo目錄里，執行“npm start”命令，啟動網站。
第六步，在瀏覽器里訪問“http://localhost:3000/admin.html”。應該會看到下面的效果哦：
創建基本AngularJS應用的步驟
前面我們不管三七二十一先把AngularDemo跑起來了?，F在我們看下創建一個基本的AngularJS應用的步驟。
第一步是實現一個Node.js Web服務器。這個express為我們代勞了，我們就用默認的應用模板，你去看app.js的話，應該發現它把public目錄使用app.static中間件處理了一下，我們可以直接在瀏覽器里訪問public目錄下的文件，比如http://localhost:3000/admin.html。
第二步就是實現一個AngularJS HTML模板，比如我們的admin.html。這是最重要的，我們展開來看看。
1. 加載AngularJS庫
嗯，script元素，放在HTML文檔body元素的最后，如admin.html那樣。瀏覽器會幫你下載并執行angular-1.4.3.min.js文件。HTML代碼如下：
<script src="/javascripts/angular-1.4.3.min.js"></script>
2. 實現你的Angular模塊
比如我們示例中的admin.js，它實現了一個控制器來支持HTML模板。
3. 加載你的主模塊
script元素，就放在angular庫的后面，放后面，這是必須的。HTML代碼如下：
<script src="/javascripts/admin.js"></script>
4. 定義根元素
admin.html有這么一行代碼：
<html ng-app="x-admin">
admin.js的第1行代碼
angular.module('x-admin', [])這兩行代碼是對應的，HTML里使用ng-app指令指定了Angular模塊名字。而這個模塊名字，就是你的js代碼里使用angular.module定義模塊時提供的第一個參數。對于我們的示例，模塊名字叫“x-admin”。
在HTML中關聯了ng-app后，就可以添加控制器了。
關于ng-app指令和angular.module方法，參考這里吧：http://docs.angularjs.cn/api。國內的，無需翻qiang。
使用angular.module定義模塊時，第二個參數是依賴的模塊列表，Angular會自動為你解決依賴注入問題。比如你依賴ui bootstrap，可以這么寫：
angular.module('x-admin', ['ui.bootstrap'])需要注意的是：文檔里描述指令時，都是ngApp這種形式，而寫代碼時，是ng-app。angular的文檔還是不錯的，贊一個。
5. 添加控制器
admin.html文檔中有這行代碼：
<div class="x-view-full" ng-controller="x-controller">
上面的代碼把名字是“x-controller”的控制器分配到
元素中，這樣我們就可以在這個元素中使用js里定義的同名控制器的作用域內的數據（Model）。
admin.js的第2行代碼：
controller('x-controller', function ($scope, $http) {定義了一個控制器。具體的語法參考這里吧：http://docs.angularjs.cn/api。國內的，無需翻qiang。
controller是angular.Module的一個方法，用來定義控制器，原型是： controller(name, constructor);
第一個參數是控制器的名字，第二個參數是控制器的構造函數。構造函數的參數是控制器依賴的服務。
還有一種語法controller(name,[])，第二個參數是控制器的依賴數組。比如：
我看1.3.x，1.4.x的文檔里controller方法的原型都是第一種，第二種是我在《Node.js+MongoDB+AngularJS Web開發》里看到。兩種我都測試了，都可以用。但跟什么版本什么關系，存疑了。
6. 實現作用域模型
使用Module的controller方法定義控制器時，會讓開發者提供控制器的構造函數。當Angular編譯HTML時，會使用開發者提供的控制器構造函數創建控制器的實例。構造函數內，會初始化一些數據，關聯到作用域
我在admin.js里x-controller控制器的構造函數內，提供了menus數組，用于構造管理界面的左側菜單；提供了currentUser，顯示在管理界面右上角；content則用來保存管理界面左下角區域使用的局部html模板；最后呢，提供了一個setContent方法，以便用戶可以通過管理界面的菜單來更改content，進而改變功能區域的內容。
7. 在HTML模板中使用指令和綁定數據
其實在實現作用域模型時，心里對“什么數據和哪個HTML元素對應”這一點是一清二楚的，不清楚你也實現不來啊不是。
一旦你實現了作用域模型，就可以在HTML模板里使用ng指令來關聯數據了。其實有時候你是先寫HTML模板，還是先實現作用域模型，還真分不太清楚。
我們以admin.html為例來說明一下ng指令的用法，注意，只提admin.html中用到的，沒用到就看http://docs.angularjs.cn/api。我們用到了ng-app、ng-controller、ng-repeat、ng-click、ng-show、ng-include、{{}}。
ng-app和ng-controller已經說過了。咱說沒提過的。
這行代碼里用到了{{expression}}這種語法，花括號之間是一個使用作用域內的變量構成的JS表達式。示例里直接引用了currentUser變量，實際運行中會用admin.js里的currentUser的值替換HTML文檔中的這部分代碼。如果在運行過程中currentUser變量的值發生變化，HTML也會變化，這是數據綁定。
我們可以修改一下admin.js，使用$interval服務來啟動一個定時器，修改currentUser的值。新的admin.js是這樣的：
angular.module('x-admin', []).controller('x-controller', function ($scope, $http, $interval) { $scope.currentUser="ZhangSan"; $scope.content = '/welcome.html'; $scope.menus = [ ...... ]; $scope.setContent = function(action){ console.log(action); $scope.content=action; }; //2秒后改變一次currentUser $interval(function(){ $scope.currentUser = "LiSi"; }, 2000, 1);});ng-repeat指令可以根據一個集合，使用一個模板化的item來創建多個相似的HTML元素。
<div class="x-sidemenu-one" ng-repeat="menu in menus" ng-show="menu.enabled">
上面的代碼使用ng-repeat指令，根據x-controller里定義的menus數組來創建多個
元素，每個都具有相同的結構。在ng-repeat指令內，通常使用“x in collections”這種語法來遍歷作用域中的某個集合，而x又可以在ng-repeat定義的模板元素內部使用。比如上面定義的div模板，使用ng-show指令時就使用了“menu in menus”中定義的menu變量。同時這個div模板內部代碼也引用了menu，參看下面的代碼：
<p class="sidemenu-one">{{menu.text}}</p>ng-show指令放在某個HTML元素內部，用來指示是否顯示該元素。
ng-click指令可以指定某個元素被點擊時的響應（函數）。
上面的代碼使用ng-click指令為代表子菜單的按鈕指定了響應鼠標點擊的代碼“setContent(subMenu.action)”。setContent是作用域內定義的方法，subMenu是ng-repeat指令內定義的變量。
有了這樣的處理，當用戶點擊某個菜單時，就會調用到admin.js里的setContent方法來改變content的值。而這種改變，會反過來影響HTML的效果，改變管理頁面左下區域內顯示的內容。示例里當你點擊用戶管理時會顯示一個登陸頁面。
促成這種效果的代碼如下：
<div ng-include="content"></div>
上面的代碼使用ng-include指令來包含一個HTML片段。當你使用ng-include指定了一個html片段后，Angular會解析這個指令，獲取對應的html文檔，編譯，并且將其內容整合進原始html文檔內。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
