AngularJS
英文原文：
Developing a Large Scale Application with a Single Page Application (SPA) using AngularJS
下载源代码
引见
（SPA）如许一个名字外面包含着甚么呢? 假如你是经典的Seinfeld电视秀的粉丝，那末你必定晓得Donna Chang这个名字。Jerry跟Donna会晤，Donna实在不是华人，可是却因在议论其对中国的固有印象比方在针灸上的兴味，和偶尔的一次单词发音带上了点儿中文口音，她将本人末尾的名字缩成了Chang Donna 在德律风上同George的母亲扳谈，（经过援用孔子）给她提了些建议。当George向本人的怙恃引见Donna是，George的母亲意想到Donna并非华人，因而并没有承受Donna的建议.
单页面援用 (SPA), 被定义成一个目标在于供给一种靠近桌面使用顺序的流利用户体验单web页面使用顺序，或许说网站. 在一个SPA中, 一切必须的代码 – HTML, JavaScript, 和 CSS – 都是在单页面加载的时分获得，或许相干的资本主动态的加载并按需添加到页面中, 这经常是在呼应用户举措的时分发作的. 虽然当代的Web技术（比方那些在HTML5中引入的技术）供给了使用顺序中各自自力的逻辑页面互相感知和导航的才能，页面却不会在过程当中从头加载任何端点，或许将把持转到别的一个页面. 同单页面使用顺序的交互经常设计到同位于后台的webServer的静态交互.
那末拿这项技术同 ASP.NET 的母版页Master Pages比拟呢? 固然 ASP.NET 的母版页让你可认为本人使用顺序里的页面创立一个不断的结构。一个独自的母版页就能够定义好你想要在全部使用顺序中的一切页面（或许一组页面）上使用的外观和规范举措. 然后你就能够再来创立你想要展现的内容各自自力页面. 当用户倡议对内容页面的恳求时，它们会未来自母版页的结构和来自内容页面的内容混杂到一同，发生输出.
当你深化研讨SPA和ASP.NET母版页完成这二者之间的分歧时，你就Start会心识到它们之间类似的地方多于分歧的地方——那就是SPA可以看作是一个容易的装着内容页面的外壳页面，就像是一个母版页, 只是SPA中的外壳页面不克不及像母版页那样依据每个新的页面恳求来从头装载和履行.
或许“单页面使用”是个不侥幸的名字（像唐娜`程一样），让你置信这个技术不合适开发需求拓展到企业级，可能 包括上百页面和数千用户的Web使用。
本文的目的是基于单页面使用顺序开发出具有数百页的内容，包含认证，受权，会话形态等功用，可以支撑上千个用户的企业级使用。
其它翻译版本 (1)
加载中
AngularJS - 概述
本文的样例包括的功用有创立/跟新用户账号，创立/更新客户和产品。并且，它还答应用户针对一切信息履行查询，创立和跟新发卖定单。为了完成这些功用，该样例将会基于AngularJS来开发。 AngularJS 是一个由Google和AngularJS社区的开发职员保护的开源的Web使用框架。
AngularJS仅需HTML，CSS和JavaScript便可在客户端创立单页面使用。它的目的是是开发和测试更轻易，加强MVC Web使用的功能。
其它翻译版本 (1)
加载中
这个库读取HTML中包括的其他定制的标签属性；然后听从这个定制的属性的指令，把页面的I/O联合到有规范JavaScript变量生成的模块中。这些JavaScript规范变量的值可以手动设置，或许从静态或静态的JSON数据源中获得。
其它翻译版本 (1)
加载中
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 的Server端恳求.
如今当你要运用AngularJS创立一个SPA使用顺序是，起首要做的两件工作就是设置一个外壳页面，和用于获得内容页面的路由表. Start的时分，外壳页面只需求一个队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.谷歌apis.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的路由表。我找到的一切示例都有针对一切内容的一切路由的硬编码。而我想要确实不是一个在路由内外包括上百项路由记载的计划.
本文中的一切译文仅用于进修和交换目标，转载请务必注明文章译者、出处、和本文链接。
2KB翻译任务按照
CC 协议，假如我们的任务有进犯到您的权益，请实时联络我们。
2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务
