《使用AngularJS开发一个大规模的单页应用》由会员分享，可在线阅读，更多相关《使用AngularJS开发一个大规模的单页应用（6页珍藏版）》请在金锄头文库上搜索。
1、使用 AngularJS 开发一个大规模的单页应用（SPA）下载源代码介绍（SPA）这样一个名字里面蕴含着什么呢? 如果你是经典的 Seinfeld 电视秀的粉丝，那么你一定知道 Donna Chang 这个名字。Jerry 跟 Donna 见面，Donna 其实不是华人，但是却因在谈论其对中国的固有印象比如在针灸上的兴趣，以及偶然的一次单词发音带上了点儿中文口音，她将自己末尾的名字缩成了 Chang Donna 在电话上同 George 的母亲交谈，（通过引用孔子）给她提了些建议。当 George 向自己的父母介绍 Donna 是，George 的母亲意识到 Donna 并不是华人，因此并没
2、有接受 Donna 的建议.单页面引用 (SPA), 被定义成一个目的在于提供一种接近桌面应用程序的流畅用户体验单web 页面应用程序，或者说网站. 在一个 SPA 中, 所有必需的代码 HTML, JavaScript, 以及 CSS 都是在单页面加载的时候获取，或者相关的资源被动态的加载并按需添加到页面中, 这常常是在响应用户动作的时候发生的. 尽管现代的 Web 技术（比如那些在 HTML5中引入的技术）提供了应用程序中各自独立的逻辑页面相互感知和导航的能力，页面却不会在过程中重新加载任何端点，或者将控制转到另外一个页面. 同单页面应用程序的交互常常设计到同位于后台的 web 服务器的动
3、态交互.那么拿这项技术同 ASP.NET 的母版页 Master Pages 相比呢? 诚然 ASP.NET 的母版页让你可以为自己应用程序里的页面创建一个一直的布局。一个单独的母版页就可以定义好你想要在整个应用程序中的所有页面（或者一组页面）上应用的外观和标准动作. 然后你就可以再来创建你想要展示的内容各自独立页面. 当用户发起对内容页面的请求时，它们会将来自母版页的布局和来自内容页面的内容混合到一起，产生输出.当你深入研究 SPA 和 ASP.NET 母版页实现这两者之间的不同时，你就开始会意识到它们之间相同的地方多于不同的地方那就是 SPA 可以看做是一个简单的装着内容页面的外壳页面，就
4、像是一个母版页, 只是 SPA 中的外壳页面不能像母版页那样根据每一个新的页面请求来重新装载和执行.也许“单页面应用”是个不幸运的名字（像唐娜程一样），让你相信这个技术不适合开发需要拓展到企业级，可能 包含上百页面以及数千用户的 Web 应用。本文的目标是基于单页面应用程序开发出拥有数百页的内容，包括认证，授权，会话状态等功能，可以支持上千个用户的企业级应用。 AngularJS - 概述 本文的样例包含的功能有创建/跟新用户账号，创建/ 更新客户和产品。而且，它还允许用户针对所有信息执行查询，创建和跟新销售订单。为了实现这些功能，该样例将会基于AngularJS 来开发。 AngularJS
5、 是一个由 Google 和 AngularJS 社区的开发人员维护的开源的Web 应用框架。AngularJS 仅需 HTML，CSS 和 JavaScript 就可在客户端创建单页面应用。它的目标是是开发和测试更容易，增强 MVC Web 应用的性能。这个库读取 HTML 中包含的其他定制的标签属性；然后服从这个定制的属性的指令，把页面的 I/O 结合到有标准 JavaScript 变量生成的模块中。这些 JavaScript 标准变量的值可以手动设置，或者从静态或动态的 JSON 数据源中获取。AngularJS 使用入门 - 外壳页面，模块和路由你首先要做的一件事情就是讲 Angula
6、rJS 框架下载到你的项目中，你可以从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 库来实
7、现 RESTful API 的服务器端请求.现在当你要使用 AngularJS 创建一个 SPA 应用程序是，首先要做的两件事情就是设置一个外壳页面，以及用于获取内容页面的路由表. 开始的时候，外壳页面只需要一个队AngularJS JavaScript 库的引用，还有一个 ng-view，来告诉 AngularJS 内容页面需要在外壳页面的那个地方被渲染.AngularJS Shell Page example Add New CustomerShow Customers 在上面的外壳页面示例中，几个链接呗映射到了 AngularJS 的路由。div 标签上的 ng-view指令是一个能将选
8、定路由的被渲染内容页面包含到外壳页面来补充 AngularJS 的$route 服务的指令. 每次当目前的路由变化时，包含的视图也会根据$route 服务的配置随之改变. 比如，当用户选择了 Add New Customer 链接，AngularJS 就会在 ng-view 所在的 div 里面渲染用于添加一个新顾客的内容 . 被渲染的内容是一个 HTML 片段.下来的 app.js 文件同样也被外壳页面引用了。这个文件里的 JavaScript 将会为应用程序创建AngularJS 模块。此外，应用程序所有的路由配置也会在这个文件中定义。你可以把一个AngularJS 模块想象成封装你应用程
9、序不同部分的容器。大多数的应用程序都会有一个主方法，用来初始化应用程序的不同部分，并将它们联系起来。AngularJS 应用程序却没有一个主方法，而是让模块声明性的指定应用程序如何启动和配置. 本文的示例程序将只会有一个 AngularJS 模块，虽然应用程序中存在几个明显不同的部分(顾客，产品，订单和用户).现在，app.js 的主要目的就是如下所示，用来设置 AngularJS 的路由。AngularJS 的$routeProvider 服务会接受 when() 方法，它将为一个 Uri 匹配一个模式 . 当发现一次匹配时，独立页面的 HTML 内容会跟随相关内容的控制器文件一同被加载到外
10、壳页面中. 控制器文件就简单的只是一个 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/AddNewC
11、ustomer', templateUrl: 'Customers/AddNewCustomer.html', controller: 'AddNewCustomerController' ). when('/Customers/CustomerInquiry', templateUrl: 'Customers/CustomerInquiry.html', controller: 'CustomerInquiryController' ). otherwise( redirectTo:
12、 '/Customers/AddNewCustomer' ); ); AngularJS 的控制器AngularJS 控制器无非就是一个原生的 JavaScript 函数，只是被绑定到了一个特定的范围而已。控制器用来将逻辑添加到你的视图。视图就是 HTML 页面。这些页面只是做简单的数据展示工作，我们会使用双向数据绑定来将数据绑定到这些 HTML 页面上. 将模型（也就是数据）同数据粘合起来基本山就是控制器的职责了. Create 对于上面的 AddCustomer 模板，ng-controller 指令将会引用 JavaScript 函数customerControlle
13、r，这个控制会执行所有的数据绑定以及针对该视图的 JavaScript 函数.function customerController($scope) $scope.FirstName = William; $scope.LastName = Gates; $scope.createCustomer = function () var customer = $scope.createCustomerObject(); customerService.createCustomer(customer, $scope.createCustomerCompleted, $scope.createCust
14、omerError); 开箱即用 - 可扩展性问题当我为本文开发这个实力程序时，首当其冲的两个扩展性问题在应用单页面应用程序时变得明显起来。其实一个开箱即用，AngularJS 需要应用程序的外壳页面中所有的JavaScript 文件和控制器在启动中伴随应用程序的启动被引入和下载. 对于一个大型的应用程序而言，可能会有上百个 JavaScript 文件，这样情况看上去就会不怎么理想。我遇到的另外一个问题就是 AngularJS 的路由表。我找到的所有示例都有针对所有内容的所有路由的硬编码。而我想要的确不是一个在路由表里包含上百项路由记录的方案.英文原文： Developing a Large Scale Application with a Single Page Application (SPA) using AngularJS译文链接：http:/ AngularJS 应用 AngularJS 使用模块组织你的代码 AngularJS 实现基于角色访问控制的 GUI 改善用户体验的 3 个 AngularJS 指令 如何利用 AngularJS 服务接入外部 API
