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

首頁

web前端

js教程

使用 AngularJS 開發一個大規模的單頁應用（SPA） - 技術翻譯

PHP中文网

Dec 05, 2016 pm 01:44 PM

翻譯

介紹

（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(&apos;sampleApp&apos;, []);
//Define Routing for the application
sampleApp.config([&apos;$routeProvider&apos;,
    function($routeProvider) {
        $routeProvider.
            when(&apos;/Customers/AddNewCustomer&apos;, {
                templateUrl: &apos;Customers/AddNewCustomer.html&apos;,
                controller: &apos;AddNewCustomerController&apos;
            }).
            when(&apos;/Customers/CustomerInquiry&apos;, {
                templateUrl: &apos;Customers/CustomerInquiry.html&apos;,
                controller: &apos;CustomerInquiryController&apos;
            }).
            otherwise({
                redirectTo: &apos;/Customers/AddNewCustomer&apos;
            });
}]);

AngularJS 的控制器

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

<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>

對於上面的AddCustomer模板，ng-controller指令將會引用JavaScript函數customerController，這個控制會執行所有的資料綁定以及針對該視圖的JavaScripts.即用- 可擴展性問題

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

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。