前言
鑽研ABP框架的日子，遇到了很多新的知識，因為對自己而言是新知識，所以經常卡在很多地方，遲遲不能有所突破，作為一個稍有上進心的程式設計師，內心絕對是不服輸的，也絕對是不畏困難的，心底必然有這樣一股力量“I must conquer it!”。比如，以前沒用過AutoMapper,那我就去學，最後將學到的寫成了部落格，和大家一起分享，爭取讓那些還沒接觸的人少走彎路。現在，在前端設計時，ABP很多用到的都是AngularJS，而之前做專案都是用的JQuery，所以繼續研究ABP也是相當有阻力。但是，不能因為有阻力就拖延，最終導致半途而廢吧！因而，還是得學，畢竟技多不壓身嘛！況且，JQuery是MPA【經典】，而AngularJS是SPA【年輕】，這兩種框架都掌握了，也算是挺圓滿的吧。
現在回到正題，這篇部落格，我們將會看到如何使用AngularJS建立Web應用。對初學者而言，涵蓋並解釋一些AngularJS框架的基本特徵。我設計了一個簡單的關於產品的CRUD的例子，解釋了演示中所有的程式碼片段。
背景
當前，AngularJS作為Javascript的MVC（也有人說是MV*，暫且不糾結這個）框架被廣泛使用，它為更快且更容易地開發響應式的Web提供了強大的機制。作為MVC框架，它將Web前端程式碼分成三個元件Model，View和Controller。因此，在data model,應用邏輯（Controllers）和view展示之間有明確的分離，讓你更容易地關注關鍵的開發區域。view接收來自model的資料來展示。當使用者通過點選或者敲擊鍵盤和應用互動時，controller通過改變模型中的資料進行響應。最終，view得到了發生在model中的變化這個通知，從而它能更新展示的內容。
在Angular應用中，view是DOM（文件物件模型），controller是javascript類，model資料儲存在物件屬性中。AngularJS將整合在客戶端的html和資料傳輸給瀏覽器。就像Jquery庫一樣，為了使用新鮮的model狀態更新UI，你必須和DOM互動。例如，無論你何時觀察到model中的任何改變，你都必須和DOM互動來影響這個改變（如果以前經常使用Jquery，那麼這句話不難理解）。然而，AngularJS提供了資料繫結，我們不必將資料從一個地方移到另一個地方，只需要使用javascript屬性對映UI部件，然後它就會自動同步了。
使用程式碼
原始碼下載
現在開始寫程式碼，讓我們一步一步地建立這個簡單的CRUD操作案例。
新增一個index.html頁面，並新增一個屬性ng-app屬性，例如：
<html ng-app="demoApp">
這句程式碼就將我們的應用定義為AngularJS應用。因為AngularJS是SPA（單頁面應用）框架，所以它會使用html檢視模板作為分部檢視來響應確定的路由。為了渲染一個分部檢視，我們會給一個div標籤新增一個ng-view屬性，所有的分部檢視都會渲染在這個div標籤中。
<div ng-view=""></div>
下載兩個檔案angular.js 和angular-route.js，在index.html中新增這些檔案的引用。或者你也可以用CDN的靜態資源，比如百度CDN的靜態資源http://apps.bdimg.com/libs/angular.js/1.4.6/angular.js：
<script src="../Scripts/angular.min.js"></script> <script src="../Scripts/angular-route.min.js"></script>
分部檢視
現在來點我們CRUD案例的真實的內容，我們會開發兩個分部檢視，ProductList.html和ProductEdit.html。先來看一下ProductList.html的程式碼：
<div class="container"> <h2 class="page-title">產品列表</h2> <div class="searchbar"> <ul class="entity-tabular-fields"> <li> <label>搜尋：</label> <span class="field-control"> <input type="text" ng-model="filter.productName" value=" " /> </span> <label></label> </li> </ul> </div> <h2><a href="#/ProductEdit">新增產品</a></h2> <table class="items-listing"> <thead> <tr> <th>程式碼</th> <th>名稱</th> <th>描述</th> <th>類別</th> <th>操作</th> </tr> </thead> <tbody> <tr ng-repeat="product in products|filter:filter.productName"> <td><a href="#/ProductEdit?code={{product.code}}">{{product.code}}</a></td> <td>{{product.name}}</td> <td>{{product.description}}</td> <td>{{product.category}}</td> <td><a href="#/?code={{product.code}}">刪除</a></td> </tr> </tbody> </table> </div>
效果圖：
除了html和css，更要關注angular指令的使用。在<tbody>中，我們使用了指令ng-repeat="product in products | filter:filter.productName"。products是一個javascript陣列，它是儲存在記憶體中的。該指令告訴javascript迴圈遍歷陣列中的每個元素（如果你使用過C#的話，那麼它就相當於C#中的foreach），並且為每個元素生成一個<tr>標籤。接下來，我們新增了過濾器，該過濾器根據productName過濾出我們搜尋條件中要求的一些元素，也許正如你看到的，它是一個物件屬性，該屬性通過資料繫結指令ng-model="filter.productName"繫結在搜尋框上。因此無論你在搜尋框中輸入什麼，產品陣列都會使用匹配的字串過濾。為了輸出一些值到html上，我們使用angular的資料繫結語法{{output_Expression}},例如表格單元的產品屬性：
<td>{{product.name}}</td>
對於第一個單元格，我們顯示了product.code，它會連結到第二個分部檢視ProductEdit.html。
最後一個單元格也包含了一個到列表展示頁面的連結，它會使用產品程式碼product.code作為查詢字串。後面我們會看到models/controllers的Javascript程式碼。現在看一下ProductEdit.html程式碼：
<div class="container"> <h2 class="page-title">產品編輯</h2> <br/> <ul class="entity-tabular-fields"> <li class="entity-field-row"> <label>產品程式碼：</label> <span class="field-control"> <input type="text" ng-model="currentProduct.code"/> <label></label> </span> </li> <li class="entity-field-row"> <label>產品名稱：</label> <span class="field-control"> <input type="text" ng-model="currentProduct.name" /> <label></label> </span> </li> <li class="entity-field-row"> <label>產品描述：</label> <span class="field-control"> <input type="text" ng-model="currentProduct.description"/> </span> <label></label> </li> <li class="entity-field-row"> <label>產品種類：</label> <span class="field-control"> <input type="text" ng-model="currentProduct.category"/> </span> <label></label> </li> <li class="entity-field-row"> <span class="field-control"> <button ng-click="saveProduct()">儲存</button> </span> </li> </ul> </div>
效果圖:
注意我們給所有的input標籤加了ng-model屬性，這個將model（product）屬性和相應的UI元素繫結在一起。在這個案例中，會自動地建立一個新的叫做“currentProduct”的產品物件，並且使用使用者在文字框中輸入的值生成該物件的屬性。最後，在button標籤中新增了一個ng-click的屬性，該屬性繫結了按鈕的點選事件saveProduct，該事件在當前的$scope中。這個$scope，你可以把它認為一個特殊的Javascript物件，我們當前的檢視所有必須的物件或者方法都繫結在$scope上，我們可以從檢視中訪問在$scope中宣告的任何東西。隨著我們繼續推進model或者controller程式碼，你會更清楚的。
Javascript/Angular 部分
現在，該看看Javascript部分的程式碼了。之前已經在index.html中新增了兩個AngularJS庫的引用，現在再新增一個Javascript檔案，我們命名為“App.js”,並將該檔案的引用新增到index頁面中。
首先，通過呼叫angular.module宣告我們的應用物件。
var demoApp = angular.module('demoApp', ['ngRoute']);
第一個引數“demoApp”是我們定義的模組名稱，第二引數是我們的模組必須要有的依賴陣列，當前部落格的案例中，我們只依賴“ngRoute”。
現在我們為分部檢視配置路由：
//配置路由
demoApp.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: "ProductController",
templateUrl: "partials/ProductList.html"
})
.when('/ProductEdit', {
controller: "ProductController",
templateUrl: "partials/ProductEdit.html"
})
.otherwise({
redirectTo: '/'
});
});
引數$routeProvider傳到路由配置的函式中，然後使用了一個鏈式的when函式來尋找url路徑，並且傳遞一個物件來定義和controller相聯絡的目標檢視。Controller屬性定義了在templateUrl屬性中指定的分部檢視會使用哪一個控制器。我們的例子中只使用了一個控制器ProductController。otherwise()函式的作用是，如果沒有指定的路徑匹配到請求的url路徑，就會匹配的預設檢視。可以聯想一下switch…case…default語法。
是時候定義ProductController了，在AngularJS中，有多種方式定義控制器。我麼現在使用一個controllers物件，然後把所有的controller加到這個物件中，最後將這個物件配置給我們app模組的controllers屬性。
每一個controller都必須傳遞一個$scope引數，檢視要使用它來訪問data model中的資料。在$scope中定義的任何資料都可以在檢視中直接訪問。如果需要的話也可以使用一些其他可選的引數$route, $routeParams, $location 。
在這個控制器中，我們新增了和ProductFactory互動的支援函式，通過新增到$scope物件中使得這些函式在檢視中可以使用。我們用到了一個事件“$viewContentLoaded”，這個事件在分部檢視載入到div標籤中時觸發。因為我們對於新增和編輯任務都是用的ProductEdit頁面，因此我將被編輯的產品的code作為查詢字串引數。然後在這個事件中檢測查詢引數code，如果有此引數，檢視就是編輯模式，否則就是一個建立新產品的頁面。刪除也是類似的原理，如果我們在查詢字串引數中檢測到了code，那麼就刪除產品，然後重新整理列表。
你可能會注意到控制器中的另一個引數ProductFactory，這是我們需要從控制器訪問資料的服務元件。Angular框架允許用不同的方式建立服務元件。最常用的一種方式是使用工廠建立。我們需要在應用模組中新增該服務，該應用模組包含兩個引數：服務名稱和工廠函式。別害怕，它不過是一個返回新物件的簡單函式。
1 //定義controllers物件 2 var controllers = {}; 3 4 controllers.ProductController= function($scope,$route,$routeParams,$location,ProductFactory) { 5 $scope.products = []; 6 7 var init= function() { 8 $scope.products = ProductFactory.getProducts(); 9 } 10 11 var initProductEdit= function() { 12 var code = $routeParams.code; 13 if (code==undefined) { 14 $scope.currentProduct = {}; 15 } else { 16 $scope.currentProduct = ProductFactory.loadProductByCode(code); 17 } 18 } 19 20 $scope.$on('$viewContentLoaded', function() { 21 var tempalteUrl = $route.current.templateUrl; 22 if (tempalteUrl=="partials/ProductEdit.html") { 23 initProductEdit(); 24 }else if (tempalteUrl=="partials/ProductList.html") {//大小寫要和temlateUrl中的大小寫保持一致 25 var code = $routeParams.code; 26 if (code!=undefined) { 27 $scope.deleteProduct(code); 28 } 29 } 30 }); 31 32 init(); 33 34 $scope.saveProduct= function() { 35 ProductFactory.saveProduct($scope.currentProduct); 36 $location.search('code', null); 37 $location.path('/'); 38 } 39 40 $scope.deleteProduct= function(code) { 41 ProductFactory.deleteProduct(code); 42 $location.search('code', null); 43 $location.path('/'); 44 } 45 } 46 47 //將所有的控制器賦值給app模組 48 demoApp.controller(controllers); 49 50 //定義工廠 51 demoApp.factory('ProductFactory', function () { 52 //初始化產品陣列 53 var products = [ 54 {code:'P001',name:'Lumia 950XL',description:'win10系統最好的手機，帶有黑科技色彩',category:'mobile'}, 55 {code:'P002',name:'Lumia 950',description:'win10系統次好的手機，相比XL低個檔次',category:'mobile'}, 56 {code:'P003',name:'Surface Pro Book',description:'微軟最具創新的筆記本',category:'Notebook'}, 57 {code:'P004',name:'Surface Pro 4',description:'微軟最好的PC/平板二合一產品',category:'Surface'}, 58 { code: 'P005', name: 'Surface 4', description: '微軟次好的PC/平板二合一產品', category: 'Surface' }, 59 {code:'P006',name:'Surface Phone',description:'傳說中微軟下一代win10系統超旗艦手機',category:'mobile'} 60 ]; 61 62 var factory = {}; 63 factory.getProducts= function() { 64 return products; 65 } 66 67 factory.loadProductByCode= function(code) { 68 var productFound={}; 69 for (var i = 0; i < products.length; i++) { 70 if (products[i].code==code) { 71 productFound = products[i]; 72 break; 73 } 74 } 75 return productFound; 76 } 77 78 factory.saveProduct= function(product) { 79 var tempProduct = factory.loadProductByCode(product.code); 80 81 if (tempProduct == null || tempProduct == undefined) { 82 tempProduct = {}; 83 tempProduct.code = product.code; 84 tempProduct.name = product.name; 85 tempProduct.description = product.description; 86 tempProduct.category = product.category; 87 } else{ 88 89 tempProduct.code = product.code; 90 tempProduct.name = product.name; 91 tempProduct.description = product.description; 92 tempProduct.category = product.category; 93 94 products.push(tempProduct); 95 } 96 } 97 98 factory.deleteProduct= function(code) { 99 var tempProduct = factory.loadProductByCode(code); 100 101 if (tempProduct!=null) { 102 products.remove(tempProduct); 103 } 104 } 105 return factory; 106 });
如上面的程式碼，我們使用模組的工廠函式來定義工廠服務元件。程式碼很明顯，它只包含了一些幫助屬性和方法。程式碼末尾的deleteProduct函式使用了一個陣列的remove函式，它不是預設的陣列函式，我定義了一個函式，把它新增到Array.prototype中，使得它可以在網站中的任何地方都可以訪問。但要確保在應用載入的開始處理這個，在一些相關的程式碼執行之前執行，比如我放到了index.html頁面中的script標籤中。
在工廠元件中，我們經常必須從server中存取資料，但在這篇部落格中，我們只用到了臨時的記憶體中的產品陣列。在下一篇部落格中，我將從server的資料庫中存取資料。
註解：
$route:用於控制器和檢視（html分部檢視）的深度連結。檢視更多。
$routeParams:該服務允許檢索當前路由引數的集合。檢視更多。
$location:該服務分析瀏覽器位址列中的URL（基於window.location），使得該URL對應用可用。檢視更多。