使用 angularjs 开发一个大规模的单页应用

《使用 angularjs 开发一个大规模的单页应用》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、使用AngularJS开发一个大规模的单页应用（SPA）下载源代码介绍（SPA）这样一个名字里面蕴含着什么呢?如果你是经典的Seinfeld电视秀的粉丝，那么你一定知道DonnaChang这个名字。Jerry跟Donna见面，Donna其实不是华人，但是却因在谈论其对中国的固有印象比如在针灸上的兴趣，以及偶然的一次单词发音带上了点儿中文口音，她将自己末尾的名字缩成了ChangDonna在电话上同George的母亲交谈，（通过引用孔子）给她提了些建议。当George向自己的父母介绍Donna是，Geor

2、ge的母亲意识到Donna并不是华人，因此并没有接受Donna的建议.单页面引用(SPA),被定义成一个目的在于提供一种接近桌面应用程序的流畅用户体验单web页面应用程序，或者说网站.在一个SPA中,所有必需的代码–HTML,JavaScript,以及CSS–都是在单页面加载的时候获取，或者相关的资源被动态的加载并按需添加到页面中,这常常是在响应用户动作的时候发生的.尽管现代的Web技术（比如那些在HTML5中引入的技术）提供了应用程序中各自独立的逻辑页面相互感知和导航的能力，页面却不会在过程中重新加

3、载任何端点，或者将控制转到另外一个页面.同单页面应用程序的交互常常设计到同位于后台的web服务器的动态交互.那么拿这项技术同ASP.NET的母版页MasterPages相比呢?诚然ASP.NET的母版页让你可以为自己应用程序里的页面创建一个一直的布局。一个单独的母版页就可以定义好你想要在整个应用程序中的所有页面（或者一组页面）上应用的外观和标准动作.然后你就可以再来创建你想要展示的内容各自独立页面.当用户发起对内容页面的请求时，它们会将来自母版页的布局和来自内容页面的内容混合到一起，产生输出.当你深入

4、研究SPA和ASP.NET母版页实现这两者之间的不同时，你就开始会意识到它们之间相同的地方多于不同的地方——那就是SPA可以看做是一个简单的装着内容页面的外壳页面，就像是一个母版页,只是SPA中的外壳页面不能像母版页那样根据每一个新的页面请求来重新装载和执行.也许“单页面应用”是个不幸运的名字（像唐娜`程一样），让你相信这个技术不适合开发需要拓展到企业级，可能包含上百页面以及数千用户的Web应用。本文的目标是基于单页面应用程序开发出拥有数百页的内容，包括认证，授权，会话状态等功能，可以支持上千个用户的

5、企业级应用。 AngularJS-概述 本文的样例包含的功能有创建/跟新用户账号，创建/更新客户和产品。而且，它还允许用户针对所有信息执行查询，创建和跟新销售订单。为了实现这些功能，该样例将会基于AngularJS来开发。 AngularJS是一个由Google和AngularJS社区的开发人员维护的开源的Web应用框架。AngularJS仅需HTML，CSS和JavaScript就可在客户端创建单页面应用。它的目标是是开发和测试更容易，增强MVCWeb应用的性能。这个库读取HTML中包含的其他定制的

6、标签属性；然后服从这个定制的属性的指令，把页面的I/O结合到有标准JavaScript变量生成的模块中。这些JavaScript标准变量的值可以手动设置，或者从静态或动态的JSON数据源中获取。AngularJS使用入门-外壳页面，模块和路由 你首先要做的一件事情就是讲AngularJS框架下载到你的项目中，你可以从 https://angularjs.org 获得框架.本文的示例程序是使用MSVisualStudioWebExpress2013Edition开发的，因此我是使用如下的命令从一个Nug

7、et包安装AngularJS的:Install-PackageAngularJS-Version1.2.21在Nuget包管理控制台上.为了保持简单和灵活性，我创建了一个空的VisualStudioweb应用程序项目，并将MicrosoftWebAPI2库选进了核心引用.这个应用程序将使用WebAPI2库来实现RESTfulAPI的服务器端请求.现在当你要使用AngularJS创建一个SPA应用程序是，首先要做的两件事情就是设置一个外壳页面，以及用于获取内容页面的路由表.开始的时候，外壳页面只需要一个

8、队AngularJSJavaScript库的引用，还有一个ng-view，来告诉AngularJS内容页面需要在外壳页面的那个地方被渲染.