使用 AngularJS 开发一个大规模的单页应用（SPA） - 技术翻译

程序员文章站 2022-04-26 16:46:08

...

介绍

（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社区的开发人员维护的开源的Web应用框架。

AngularJS仅需HTML，CSS和JavaScript就可在客户端创建单页面应用。它的目标是是开发和测试更容易，增强MVC Web应用的性能。

这个库读取HTML中包含的其他定制的标签属性；然后服从这个定制的属性的指令，把页面的I/O结合到有标准JavaScript变量生成的模块中。这些JavaScript标准变量的值可以手动设置，或者从静态或动态的JSON数据源中获取。

使用 AngularJS 开发一个大规模的单页应用（SPA） - 技术翻译

AngularJS使用入门 - 外壳页面，模块和路由

你首先要做的一件事情就是讲AngularJS框架下载到你的项目中，你可以从 http://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 的控制器

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，这个控制会执行所有的数据绑定以及针对该视图的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的路由表。我找到的所有示例都有针对所有内容的所有路由的硬编码。而我想要的确不是一个在路由表里包含上百项路由记录的方案.