使用 AngularJS 開發(fā)一個大規(guī)模的單頁應用（SPA）
下載源代碼
介紹
（SPA）這樣一個名字里面蘊含著什么呢? 如果你是經(jīng)典的Seinfeld電視秀的粉絲，那么你一定知道Donna Chang這個名字。Jerry跟Donna見面，Donna其實不是華人，但是卻因在談論其對中國的固有印象比如在針灸上的興趣，以及偶然的一次單詞發(fā)音帶上了點兒中文口音，她將自己末尾的名字縮成了Chang Donna 在電話上同George的母親交談，（通過引用孔子）給她提了些建議。當George向自己的父母介紹Donna是，George的母親意識到Donna并不是華人，因此并沒有接受Donna的建議.
單頁面引用 (SPA), 被定義成一個目的在于提供一種接近桌面應用程序的流暢用戶體驗單web頁面應用程序，或者說網(wǎng)站. 在一個SPA中, 所有必需的代碼 – HTML, JavaScript, 以及 CSS – 都是在單頁面加載的時候獲取，或者相關的資源被動態(tài)的加載并按需添加到頁面中, 這常常是在響應用戶動作的時候發(fā)生的. 盡管現(xiàn)代的Web技術（比如那些在HTML5中引入的技術）提供了應用程序中各自獨立的邏輯頁面相互感知和導航的能力，頁面卻不會在過程中重新加載任何端點，或者將控制轉(zhuǎn)到另外一個頁面. 同單頁面應用程序的交互常常設計到同位于后臺的web服務器的動態(tài)交互.
那么拿這項技術同 ASP.NET 的母版頁Master Pages相比呢? 誠然 ASP.NET 的母版頁讓你可以為自己應用程序里的頁面創(chuàng)建一個一直的布局。一個單獨的母版頁就可以定義好你想要在整個應用程序中的所有頁面（或者一組頁面）上應用的外觀和標準動作. 然后你就可以再來創(chuàng)建你想要展示的內(nèi)容各自獨立頁面. 當用戶發(fā)起對內(nèi)容頁面的請求時，它們會將來自母版頁的布局和來自內(nèi)容頁面的內(nèi)容混合到一起，產(chǎn)生輸出.
當你深入研究SPA和ASP.NET母版頁實現(xiàn)這兩者之間的不同時，你就開始會意識到它們之間相同的地方多于不同的地方——那就是SPA可以看做是一個簡單的裝著內(nèi)容頁面的外殼頁面，就像是一個母版頁, 只是SPA中的外殼頁面不能像母版頁那樣根據(jù)每一個新的頁面請求來重新裝載和執(zhí)行.
也許“單頁面應用”是個不幸運的名字（像唐娜`程一樣），讓你相信這個技術不適合開發(fā)需要拓展到企業(yè)級，可能 包含上百頁面以及數(shù)千用戶的Web應用。
本文的目標是基于單頁面應用程序開發(fā)出擁有數(shù)百頁的內(nèi)容，包括認證，授權，會話狀態(tài)等功能，可以支持上千個用戶的企業(yè)級應用。
AngularJS - 概述
本文的樣例包含的功能有創(chuàng)建/跟新用戶賬號，創(chuàng)建/更新客戶和產(chǎn)品。而且，它還允許用戶針對所有信息執(zhí)行查詢，創(chuàng)建和跟新銷售訂單。為了實現(xiàn)這些功能，該樣例將會基于AngularJS來開發(fā)。 AngularJS 是一個由Google和AngularJS社區(qū)的開發(fā)人員維護的開源的Web應用框架。
AngularJS僅需HTML，CSS和JavaScript就可在客戶端創(chuàng)建單頁面應用。它的目標是是開發(fā)和測試更容易，增強MVC Web應用的性能。
這個庫讀取HTML中包含的其他定制的標簽屬性；然后服從這個定制的屬性的指令，把頁面的I/O結合到有標準JavaScript變量生成的模塊中。這些JavaScript標準變量的值可以手動設置，或者從靜態(tài)或動態(tài)的JSON數(shù)據(jù)源中獲取。
AngularJS使用入門 - 外殼頁面，模塊和路由
你首先要做的一件事情就是講AngularJS框架下載到你的項目中，你可以從 https://angularjs.org 獲得框架. 本文的示例程序是使用MS Visual Studio Web Express 2013 Edition開發(fā)的，因此我是使用如下的命令從一個Nuget包安裝AngularJS的:
Install-Package AngularJS -Version 1.2.21
在Nuget包管理控制臺上. 為了保持簡單和靈活性，我創(chuàng)建了一個空的 Visual Studio web 應用程序項目，并將Microsoft Web API 2庫選進了核心引用. 這個應用程序?qū)⑹褂肳eb API 2 庫來實現(xiàn) RESTful API 的服務器端請求.
現(xiàn)在當你要使用AngularJS創(chuàng)建一個SPA應用程序是，首先要做的兩件事情就是設置一個外殼頁面，以及用于獲取內(nèi)容頁面的路由表. 開始的時候，外殼頁面只需要一個隊AngularJS JavaScript庫的引用，還有一個ng-view，來告訴AngularJS內(nèi)容頁面需要在外殼頁面的那個地方被渲染.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>AngularJS Shell Page example</title>
- </head>
- <body>
- <div>
- <ul>
- <li><a href="#Customers/AddNewCustomer">Add New Customer</a></li>
- <li><a href="#Customers/CustomerInquiry">Show Customers</a></li>
- </ul>
- </div>
- <!-- ng-view directive to tell AngularJS where to inject content pages -->
- <div ng-view></div>
- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
- <script src="app.js"></script>
- </body>
- </html>
在上面的外殼頁面示例中，幾個鏈接唄映射到了AngularJS的路由。div標簽上的ng-view指令是一個能將選定路由的被渲染內(nèi)容頁面包含到外殼頁面來補充AngularJS的$route服務的指令. 每次當目前的路由變化時，包含的視圖也會根據(jù)$route服務的配置隨之改變. 比如，當用戶選擇了 "Add New Customer" 鏈接，AngularJS 就會在ng-view所在的div里面渲染用于添加一個新顧客的內(nèi)容 . 被渲染的內(nèi)容是一個HTML片段.
下來的app.js文件同樣也被外殼頁面引用了。這個文件里的JavaScript將會為應用程序創(chuàng)建AngularJS模塊。此外，應用程序所有的路由配置也會在這個文件中定義。你可以把一個AngularJS模塊想象成封裝你應用程序不同部分的容器。大多數(shù)的應用程序都會有一個主方法，用來初始化應用程序的不同部分，并將它們聯(lián)系起來。AngularJS應用程序卻沒有一個主方法，而是讓模塊聲明性的指定應用程序如何啟動和配置. 本文的示例程序?qū)⒅粫幸粋€AngularJS模塊，雖然應用程序中存在幾個明顯不同的部分(顧客，產(chǎn)品，訂單和用戶).
現(xiàn)在，app.js的主要目的就是如下所示，用來設置AngularJS的路由。AngularJS的$routeProvider服務會接受 when() 方法，它將為一個Uri匹配一個模式. 當發(fā)現(xiàn)一次匹配時，獨立頁面的HTML內(nèi)容會跟隨相關內(nèi)容的控制器文件一同被加載到外殼頁面中. 控制器文件就簡單的只是一個JavaScript文件，它將獲得帶有某個特定路由請求內(nèi)容的引用.
- //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 的控制器
AngularJS 控制器無非就是一個原生的JavaScript函數(shù)，只是被綁定到了一個特定的范圍而已?？刂破饔脕韺⑦壿嬏砑拥侥愕囊晥D。視圖就是HTML頁面。這些頁面只是做簡單的數(shù)據(jù)展示工作，我們會使用雙向數(shù)據(jù)綁定來將數(shù)據(jù)綁定到這些HTML頁面上. 將模型（也就是數(shù)據(jù)）同數(shù)據(jù)粘合起來基本山就是控制器的職責了.
- <div ng-controller="customerController">
- <input ng-model="FirstName" type="text" style="width: 300px" />
- <input ng-model="LastName" type="text" style="width: 300px" />
- <div>
- <button class="btn btn-primary btn-large" ng-click="createCustomer()"/>Create</button>
對于上面的AddCustomer模板，ng-controller指令將會引用JavaScript函數(shù)customerController，這個控制會執(zhí)行所有的數(shù)據(jù)綁定以及針對該視圖的JavaScript函數(shù).
- function customerController($scope)
- {
- $scope.FirstName = "William";
- $scope.LastName = "Gates";
- $scope.createCustomer = function () {
- var customer = $scope.createCustomerObject();
- customerService.createCustomer(customer,
- $scope.createCustomerCompleted,
- $scope.createCustomerError);
- }
- }
開箱即用 - 可擴展性問題
當我為本文開發(fā)這個實力程序時，首當其沖的兩個擴展性問題在應用單頁面應用程序時變得明顯起來。其實一個開箱即用，AngularJS需要應用程序的外殼頁面中所有的JavaScript文件和控制器在啟動中伴隨應用程序的啟動被引入和下載. 對于一個大型的應用程序而言，可能會有上百個JavaScript文件，這樣情況看上去就會不怎么理想。我遇到的另外一個問題就是AngularJS的路由表。我找到的所有示例都有針對所有內(nèi)容的所有路由的硬編碼。而我想要的確不是一個在路由表里包含上百項路由記錄的方案.
英文原文：Developing a Large Scale Application with a Single Page Application (SPA) using AngularJS
譯文鏈接：http://www.oschina.net/translate/developing-a-large-scale-application-with-a-single
