[译]用AngularJS构建大型ASP.NET单页应用（一）

浏览数：123 / 时间：2015年06月09日

原文地址：http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single

渣译，各位看官请勿喷

引言：

...

单页面应用程序（SPA），被定义为在一个独立的页面上??提供类似于桌面应用程序级用户体验为目标的网站。在SPA，基本上所有的代码 - 例如 HTML，JavaScript和CSS - 都是在响应用户操作时动态加载的。页面没有在任何时候被重新刷新，也没有跳转到另一个页面，但现代WEB技术（例如HTML5）可以提供类似单独页面一样的导航。单页面应用程序往往需要与后台Web服务器动态交互。

...

本文的目标是开发出能支撑大量用户使用的丰富内容的企业级单页面应用程序，其包括认证，授权，回话等功能。

概述 - AngularJS

本文的示例应用程序包含的创建和更新用户帐户，创建和更新客户和产品功能。另外，该应用程序还允许你查询、创建和更新销售订单。该示例应用程序将使用AngularJS建成。 AngularJS是一个开源Web应用框架，其社区由谷歌维护的。

AngularJS使你创建单页面应用程序只需要包含HTML，CSS和JavaScript等客户端脚本。它的目标是增强Web应用程序的模型 - 视图 - 控制器（MVC）的能力，使开发和测试更容易。

该库读取HTML中自定义标签的属性，通过这些自定义属性，绑定输入、输出功能的JavaScript model变量。这些JavaScript变量可以被手动设置，也可以从JSON中获取。

AngularJS入门-模板页、模块、路由

你需要做的第一件事情就是下载AngularJS框架到项目中。你可以在https://angularjs.org的AngularJS框架。本文的示例应用程序使用Web Express 2013 开发，所以这里通过NuGet安装AngularJS包...

我创建了一个空的Visual Studio Web应用程序项目，并选择了Microsoft Web API 2库。此应用程序将使用Web API 2库提供REST风格的接口服务。

现在，你需要做两件事情要来构建一个AngularJS单页面应用程序：建立模板页面，并设置相关路由。首先，模板页只需要一个引用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>
<!-- 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指令，通过AngularJS $route service加载不同的内容至模板页中。例如，如果用户选择“Add New Customer”链接，AngularJS会令其中ng-view指令存在的div标签内插入添加客户的内容。呈现的内容是部分HTML页面。

同时app.js JavaScript也需要在模板被引用。这个JS文件将会为应用程序创建一个AngularJS模块。此外，对于路由配置也将在本文件中被定义。你可以把AngularJS模块作为一个应用程序的不同部分。AngularJS应用程序没有main方法。模块需要声明指定的应用程序如何配置。本文的示例应用程序将只能有一个AngularJS模块，它包含了客户、产品、订单和用户等应用程序的几个不同部分。

现在，下面的app.js文件的主要目的是建立AngularJS路由。AngularJS $routeProvider服务使用when()方法来匹配URI。当匹配成功时，页面的部分HTML内容被加载到模板页，并关联到对应的controller文件。controller文件很简单，就是处理指定路由请求的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 Controllers

AngularJS控制器是一个的JavaScript函数。控制器用于给你的视图添加业务逻辑。视图是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方法，并进行数据绑定。

function customerController($scope) 
{
    $scope.FirstName = "William";
    $scope.LastName = "Gates"; 

    $scope.createCustomer = function () {          
        var customer = $scope.createCustomerObject();
        customerService.createCustomer(customer, 
                        $scope.createCustomerCompleted, 
                        $scope.createCustomerError);
    }
}

原文地址：http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single

渣译，各位看官请勿喷

可扩展性性

当我开发了本文的示例程序，单页面应用程序的前两个可扩展性问题变得越来越明显了。AngularJS需要在页面上引用并下载所有相关JavaScript文件。一个大型的应用程序可能包含数百个JavaScript文件，这似乎并不理想。另一个问题是当我用AngularJS路由表，每一个路由规则我都要写到路由表中，当路由表中有数百个规则时，这显然不是一个好的办法。

使用RequireJS动态加载javascript文件

对于此示例，我不想在模板页上加载所有的JavaScript文件。大型应用程序通常需要数百个JavaScript文件。一般情况下，JavaScript文件是逐一使用script标签加载的。此外，每个文件有可能依赖于其他文件。RequireJS这个JavaScript库正可以动态加载JavaScript文件。

RequireJS是一个著名的JavaScript模块和文件加载器，它支持在主流浏览器。使用RequireJS时，需要将JavaScript代码分割成各个模块，每个文件负责单一的功能。此外，我们还可以配置相应文件的依赖关系。

RequireJS提供了一个简洁的方式来加载和管理你的Javascript应用程序。

AngularJS路由转换

在AngularJS中，你需要为不同的规则配置不同的路由。我决定来统一网页和相关的JavaScript文件的命名约定，并允许应用程序解析路由的名称，自动绑定将JS方法和页面绑定。

例如，客户维护内容页被命名为CustomerMaintenance.Html，AngularJS控制器对应的JavaScript文件被命名为CustomerMaintenanceController.js。

让我们开始修改示例应用程序。首先，每一个应用程序都需要某种形式的认证和授权机制来控制权限。此应用程序将使用ASP.NET Forms Authentication进行身份验证。一旦通过验证，用户将能够访问应用程序的其余部分。一般网站都会有不同的母版页，一个用于显示的登录页面，另一个母版页通常包含一个主菜单栏、边栏附和头部等菜单选项，内容区域和页脚区域。此示例应用程序通过多个模板页面来实现。登录成功后，用户将被路由到一个新的模板页面。

多模板页

第一个模板页是index.html。此页面将显示登录和用户注册的相关内容。正如你所看到的，这里只引用了一个JavaScript文件。 Main.js将包含RequireJS的配置信息来动态加载模块。我们将index.html的AngularJS控制器命名为indexController.js。如果用户成功注册或登录，该应用程序将跳转到一个新的模板页面applicationMasterPage.html。在模板页上，有一个ng-view指令。如前所述，这个指令会告诉AngularJS内容被将被加载到哪里。

<!-- index.html -->

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> </title>
    <script data-main="main.js" src="Scripts/require.js"> </script>
    <link href="Content/angular-block-ui.css" rel="stylesheet" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Content/Application.css" rel="stylesheet" />
    <link href="Content/SortableGrid.css" rel="stylesheet" />
</head>
<body ng-controller="indexController" ng-init="initializeController()" >
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-collapse collapse" id="MainMenu">
                <ul class="nav navbar-nav" ng-repeat="menuItem in MenuItems">
                    <li> <a href="{{menuItem.Route}}">{{menuItem.Description}} </a> </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- ng-view directive to tell AngularJS where to put the content pages-->
    <div style="margin: 75px 50px 50px 50px" ng-view> </div>      
</body>
</html>