使用 AngularJS 開發一個大規模的單頁應用（SPA）

下載源代碼

介紹angularjs

（SPA）這樣一個名字裏面蘊含着什麼呢? 若是你是經典的Seinfeld電視秀的粉絲，那麼你必定知道Donna Chang這個名字。Jerry跟Donna見面，Donna其實不是華人，可是卻因在談論其對中國的固有印象好比在鍼灸上的興趣，以及偶然的一次單詞發音帶上了點兒中文口音，她將本身末尾的名字縮成了Chang Donna 在電話上同George的母親交談，（經過引用孔子）給她提了些建議。當George向本身的父母介紹Donna是，George的母親意識到Donna並非華人，所以並無接受Donna的建議.web

單頁面引用 (SPA), 被定義成一個目的在於提供一種接近桌面應用程序的流暢用戶體驗單web頁面應用程序，或者說網站. 在一個SPA中, 全部必需的代碼 – HTML, JavaScript, 以及 CSS – 都是在單頁面加載的時候獲取，或者相關的資源被動態的加載並按需添加到頁面中, 這經常是在響應用戶動做的時候發生的. 儘管現代的Web技術（好比那些在HTML5中引入的技術）提供了應用程序中各自獨立的邏輯頁面相互感知和導航的能力，頁面卻不會在過程當中從新加載任何端點，或者將控制轉到另一個頁面. 同單頁面應用程序的交互經常設計到同位於後臺的web服務器的動態交互.ajax

那麼拿這項技術同 ASP.NET 的母版頁Master Pages相比呢? 誠然 ASP.NET 的母版頁讓你能夠爲本身應用程序裏的頁面建立一個一直的佈局。一個單獨的母版頁就能夠定義好你想要在整個應用程序中的全部頁面（或者一組頁面）上應用的外觀和標準動做. 而後你就能夠再來建立你想要展現的內容各自獨立頁面. 當用戶發起對內容頁面的請求時，它們會未來自母版頁的佈局和來自內容頁面的內容混合到一塊兒，產生輸出.api

當你深刻研究SPA和ASP.NET母版頁實現這二者之間的不一樣時，你就開始會意識到它們之間相同的地方多於不一樣的地方——那就是SPA能夠看作是一個簡單的裝着內容頁面的外殼頁面，就像是一個母版頁, 只是SPA中的外殼頁面不能像母版頁那樣根據每個新的頁面請求來從新裝載和執行.服務器

也許「單頁面應用」是個不幸運的名字（像唐娜`程同樣），讓你相信這個技術不適合開發須要拓展到企業級，可能包含上百頁面以及數千用戶的Web應用。app

本文的目標是基於單頁面應用程序開發出擁有數百頁的內容，包括認證，受權，會話狀態等功能，能夠支持上千個用戶的企業級應用。框架

AngularJS - 概述

本文的樣例包含的功能有建立/跟新用戶帳號，建立/更新客戶和產品。並且，它還容許用戶針對全部信息執行查詢，建立和跟新銷售訂單。爲了實現這些功能，該樣例將會基於AngularJS來開發。 AngularJS 是一個由Google和AngularJS社區的開發人員維護的開源的Web應用框架。ide

AngularJS僅需HTML，CSS和JavaScript就可在客戶端建立單頁面應用。它的目標是是開發和測試更容易，加強MVC Web應用的性能。函數

這個庫讀取HTML中包含的其餘定製的標籤屬性；而後服從這個定製的屬性的指令，把頁面的I/O結合到有標準JavaScript變量生成的模塊中。這些JavaScript標準變量的值能夠手動設置，或者從靜態或動態的JSON數據源中獲取。

AngularJS使用入門 - 外殼頁面，模塊和路由

你首先要作的一件事情就是講AngularJS框架下載到你的項目中，你能夠從 https://angularjs.org 得到框架. 本文的示例程序是使用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>
<div>
<ul>
<li><a href="#Customers/AddNewCustomer">Add New Customer</a></li>
<li><a href="#Customers/CustomerInquiry">Show Customers</a></li>
</ul>
</div>
<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指令是一個能將選定路由的被渲染內容頁面包含到外殼頁面來補充AngularJS的$route服務的指令. 每次當目前的路由變化時，包含的視圖也會根據$route服務的配置隨之改變. 好比，當用戶選擇了 "Add New Customer" 連接，AngularJS 就會在ng-view所在的div裏面渲染用於添加一個新顧客的內容 . 被渲染的內容是一個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 的控制器

AngularJS 控制器無非就是一個原生的JavaScript函數，只是被綁定到了一個特定的範圍而已。控制器用來將邏輯添加到你的視圖。視圖就是HTML頁面。這些頁面只是作簡單的數據展現工做，咱們會使用雙向數據綁定來將數據綁定到這些HTML頁面上. 將模型（也就是數據）同數據粘合起來基本山就是控制器的職責了.

<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函數customerController，這個控制會執行全部的數據綁定以及針對該視圖的JavaScript函數.

function customerController($scope)
{
$scope.FirstName = "William";
$scope.LastName = "Gates";
$scope.createCustomer = function () {
var customer = $scope.createCustomerObject();
customerService.createCustomer(customer,
$scope.createCustomerCompleted,
$scope.createCustomerError);
}
}

開箱即用 - 可擴展性問題

當我爲本文開發這個實力程序時，首當其衝的兩個擴展性問題在應用單頁面應用程序時變得明顯起來。其實一個開箱即用，AngularJS須要應用程序的外殼頁面中全部的JavaScript文件和控制器在啓動中伴隨應用程序的啓動被引入和下載. 對於一個大型的應用程序而言，可能會有上百個JavaScript文件，這樣狀況看上去就會不怎麼理想。我遇到的另一個問題就是AngularJS的路由表。我找到的全部示例都有針對全部內容的全部路由的硬編碼。而我想要的確不是一個在路由表裏包含上百項路由記錄的方案.

英文原文：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

【編輯推薦】