使用 AngularJS 開發一個大規模的單頁應用（SPA） - 技術翻譯
- PHP中文网原創
- 2016-12-05 13:44:12969瀏覽
介紹
（SPA）這樣一個名字裡面蘊含著什麼呢? 如果你是經典的Seinfeld電視秀的粉絲，那麼你一定知道Donna Chang這個名字。 Jerry跟Donna見面，Donna其實不是華人，但是卻因在談論其對中國的固有印像比如在針灸上的興趣，以及偶然的一次單詞發音帶上了點兒中文口音，她將自己末尾的名字縮成了Chang Donna 在電話上與George的母親交談，（藉由引用孔子）給她提了些建議。當George向自己的父母介紹Donna是，George的母親意識到Donna並不是華人，因此並沒有接受Donna的建議.
單頁引用(SPA), 被定義成一個目的在於提供一種接近桌面應用程序的流暢用戶體驗單web頁面應用程序，或者說網站. 在一個SPA中, 所有必需的代碼– HTML, JavaScript, 以及CSS – 都是在單頁面加載的時候獲取，或者相關的資源被動態的加載並按需添加到頁面中, 這常常是在響應用戶動作的時候發生的. 儘管現代的Web技術（比如那些在HTML5中引入的技術）提供了應用程序中各自獨立的邏輯頁面相互感知和導航的能力，頁面卻不會在過程中重新加載任何端點，或者將控制轉到另外一個頁面. 同單頁面應用程序的交互常常設計到同位於後台的web伺服器的動態交互.
那麼拿這項技術同ASP.NET 的母版頁Master Pages比較呢? 誠然ASP.NET 的母版頁讓你可以為自己應用程式裡的頁面建立一個一直的版面。一個單獨的母版頁就可以定義好你想要在整個應用程式中的所有頁面（或一組頁面）上應用的外觀和標準動作. 然後你就可以再來創建你想要展示的內容各自獨立頁面. 當使用者發起對內容頁面的請求時，它們會將來自母版頁的佈局和來自內容頁面的內容混合到一起，產生輸出.
當你深入研究SPA和ASP.NET母版頁實現這當兩者之間的不同時，你就開始會意識到它們之間相同的地方多於不同的地方——那就是SPA可以看做是一個簡單的裝著內容頁面的外殼頁面，就像是一個母版頁, 只是SPA中的外殼頁面不能像母版頁那樣根據每一個新的頁面請求來重新裝載和執行.
也許“單頁應用”是個不幸運的名字（像唐娜`程一樣），讓你相信這個技術不適合開發需要拓展到企業級，可能包含上百頁以及數千用戶的Web應用。
本文的目標是基於單頁應用程式開發出擁有數百頁的內容，包括認證，授權，會話狀態等功能，可以支援上千個使用者的企業級應用程式。
AngularJS - 概述
而且，它還允許用戶針對所有資訊執行查詢，建立和跟隨新銷售訂單。為了實現這些功能，此範例將會基於
AngularJS
來開發。 AngularJS 是一個由Google和AngularJS社群的開發人員所維護的開源的網路應用框架。
AngularJS只需HTML，CSS和JavaScript可在客戶端建立單一頁面應用程式。它的目標是開發和測試更容易，增強MVC Web應用的效能。
這個函式庫讀取HTML中包含的其他客製化的標籤屬性；然後服從這個客製化的屬性的指令，把頁面的I/O結合到有標準JavaScript變數產生的模組中。這些JavaScript標準變數的值可以手動設置，或是從靜態或動態的JSON資料來源中取得。
AngularJS使用入門- 外殼頁面，模組和路由
://www.php.cn/ 取得框架. 本文的範例程式是使用MS Visual Studio Web Express 2013 Edition開發的，因此我是使用如下的命令從一個Nuget套件安裝AngularJS的:
Install-Package AngularJS - Version 1.2.21
Nuget套件管理控制台上
. 為了保持簡單和靈活性，我創建了一個空的Visual Studio web 應用程式項目，並將Microsoft Web API 2庫選進了核心引用. 這個應用程式將使用Web API 2 庫來實作RESTful API 的伺服器端請求.
現在當你要使用AngularJS創建一個SPA應用程式是，首先要做的兩件事情就是設置一個外殼頁面，以及用於獲取內容頁面的路由表. 開始的時候，外殼頁面只需要一個隊AngularJS JavaScript庫的引用，還有一個ng-view，來告訴AngularJS內容頁面需要在外殼頁面的那個地方被渲染.
<!DOCTYPE html> <html lang="en"> <head> <title>AngularJS Shell Page example</title> </head> <body> <p> <ul> <li><a href="#Customers/AddNewCustomer">Add New Customer</a></li> <li><a href="#Customers/CustomerInquiry">Show Customers</a></li> </ul> </p> <!-- ng-view directive to tell AngularJS where to inject content pages --> <p ng-view></p> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script src="app.js"></script> </body> </html>
在上面的外殼頁面示例中，幾個鏈接唄映射到了AngularJS的路由。 p標籤上的ng-view指令是一個能將選定路由的被渲染內容頁麵包含到外殼頁面來補充AngularJS的$route服務的指令. 每次噹噹前的路由變化時，包含的視圖也會根據$ route服務的配置隨之改變. 例如，當用戶選擇了"Add New Customer" 鏈接，AngularJS 就會在ng-view所在的p裡面渲染用於添加一個新顧客的內容. 被渲染的內容是一個HTML片段.
接下來的app.js檔案同樣也被外殼頁引用了。這個檔案裡的JavaScript將會為應用程式建立AngularJS模組。此外，應用程式所有的路由配置也會在這個檔案中定義。你可以把一個AngularJS模組想像成封裝你應用程式不同部分的容器。大多數的應用程式都會有一個主方法，用來初始化應用程式的不同部分，並將它們連結起來。 AngularJS應用程式卻沒有一個主方法，而是讓模組聲明性的指定應用程式如何啟動和配置. 本文的範例程式將只會有一個AngularJS模組，雖然應用程式中存在幾個明顯不同的部分(顧客，產品，訂單和使用者).
現在，app.js的主要目的就是如下所示，用來設定AngularJS的路由。 AngularJS的$routeProvider服務會接受 when() 方法，它將為一個Uri匹配一個模式. 當發現一次匹配時，獨立頁面的HTML內容會跟隨相關內容的控制器文件一同被加載到外殼頁面中. 控制器文件就簡單的只是一個JavaScript文件，它將獲得帶有某個特定路由請求內容的引用.
//Define an angular module for our app
var sampleApp = angular.module('sampleApp', []);
//Define Routing for the application
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/Customers/AddNewCustomer', {
templateUrl: 'Customers/AddNewCustomer.html',
controller: 'AddNewCustomerController'
}).
when('/Customers/CustomerInquiry', {
templateUrl: 'Customers/CustomerInquiry.html',
controller: 'CustomerInquiryController'
}).
otherwise({
redirectTo: '/Customers/AddNewCustomer'
});
}]);AngularJS 的控制器
<p ng-controller="customerController"> <input ng-model="FirstName" type="text" style="width: 300px" /> <input ng-model="LastName" type="text" style="width: 300px" /> <p> <button class="btn btn-primary btn-large" ng-click="createCustomer()"/>Create</button>