使用 AngularJS 开发一个大规模的单页应用（SPA） - 技术翻译
介绍
（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使用入门 - 外壳页面，模块和路由
你首先要做的一件事情就是讲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('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页面上. 将模型（也就是数据）同数据粘合起来基本山就是控制器的职责了.
<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的路由表。我找到的所有示例都有针对所有内容的所有路由的硬编码。而我想要的确不是一个在路由表里包含上百项路由记录的方案.
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
edge浏览器自带的翻译网页不见了怎么办？
Mar 14, 2024 pm 08:50 PM
edge浏览器自带了翻译功能让用户们可以随时随地的进行翻译，为用户们带来了极大的便利，可也有不少的用户们表示自带的翻译网页不见了，那edge浏览器自带的翻译网页不见了怎么办？下面就让本站来介绍一下edge浏览器自带的翻译网页不见了怎么恢复方法吧。 edge浏览器自带的翻译网页不见了怎么恢复方法 1、检查是否启用了翻译功能：在Edge浏览器中，点击右上角的三个点图标，然后选择“设置”选项。在设置页面的左侧，选择“语言”选项。确保“翻译&rd
看片不怕没字幕！小米宣布小爱翻译实时字幕上线日韩语翻译
Jul 22, 2024 pm 02:11 PM
7月22日消息，今日，小米澎湃OS官微宣布小爱翻译迎来升级，实时字幕新增日韩语翻译，无字幕视频、直播会议实时转录翻译。面对面同声传译支持12种语言互译，包括中文、英语、日语、韩语、俄语、葡萄牙语、西班牙语、意大利语、法语、德语、印尼语、印地语。以上功能目前仅支持以下三款新机：小米MIXFold4小米MIXFlipRedmiK70至尊版据悉，2021年，小爱同学AI字幕宣布加入日语、韩语翻译。AI字幕采用小米自研同声传译技术，提供更快速、稳定和准确的字幕阅读体验。1.官方称，小爱翻译不仅能在影音场
搜狗浏览器怎么翻译
Feb 01, 2024 am 11:09 AM
搜狗浏览器怎么翻译？我们平时用搜狗浏览器查阅资料的时候，会遇到一些全是英文的网站，因为看不懂英语对网站浏览起来就很困难，这样也十分的不方便，遇到这种情况没有关系！搜狗浏览器有内置翻译按钮，只要点击一下，搜狗浏览器就会自动帮你翻译整个网页？如果你不会操作的话，小编整理搜狗浏览器怎么翻译的具体方法步骤，不会的话跟着我往下看吧！搜狗浏览器怎么翻译1、打开搜狗浏览器，单击右上角的译字图标2、选择翻译文字类型，然后输入需要翻译的文字3、搜狗浏览器就会自动翻译文字，至此操作完成以上搜狗浏览器怎么翻译的全部内
谷歌浏览器自带翻译失效如何解决？
Mar 13, 2024 pm 08:46 PM
浏览器一般都自带翻译功能，这样在浏览外文网站时就不用担心看不懂啦！谷歌浏览器也不例外，但是有用户发现自己打开谷歌浏览器的翻译功能时没有反应，失效了，这该如何处理？可以试试小编找到的最新解决办法。 操作教程： 点击右上角三个点，点击设置。 点击添加语言，添加英语和中文，并为他们做出下面设置，英语设置询问是否翻译此语言网页，中文设置以这种语言显示网页，并且中文要移至顶部，才能设置为默认语言。 如果你打开网页没有弹出是否翻译选项，右键选择翻译中文，ok。
基于JavaScript构建实时翻译工具
Aug 09, 2023 pm 07:22 PM
基于JavaScript构建实时翻译工具引言随着全球化的需求日益增长，跨国交流和交流的频繁发生，实时翻译工具成为了一种非常重要的应用。我们可以利用JavaScript和一些现有的API来构建一个简单但实用的实时翻译工具。本文将会介绍如何基于JavaScript来实现这个功能，并附有代码示例。实施步骤步骤1：创建HTML结构首先，我们需要创建一个简单的HTML
谷歌浏览器翻译不了中文怎么回事
Mar 11, 2024 pm 04:04 PM
谷歌浏览器翻译不了中文怎么回事？众所周知谷歌浏览器是自带翻译的浏览器之一，大家在这款浏览器里浏览其他国家文字的页面时，浏览器会自动将页面翻译成中文，最近有部分用户表示，自己在浏览器网页的时候无法进行中文翻译，这个时候我们需要在设置里进行修复。接下来小编就给大家带来谷歌浏览器翻译不了中文解决办法，感兴趣的朋友快来看看吧。谷歌浏览器翻译不了中文解决办法1、修改本地的hosts文件hosts是一个没有扩展名的系统文件，可以用记事本等工具打开，主要作用是定义IP地址和主机名的映射关系，是一个映射IP地址
如何解决搜狗浏览器无法翻译网页的问题
Jan 29, 2024 pm 09:18 PM
搜狗浏览器无法翻译此网页怎么办？搜狗浏览器是一款非常好用的多功能浏览器，其中的网页翻译功能非常强大，能够帮助我们解决学习工作中的大多数麻烦。不过有些小伙伴却反应搜狗浏览器有着无法翻译此网页的问题，这可能是因为操作不当造成的，只需要正确的操作翻译功能就能解决，下面就由小编为大家带来搜狗浏览器无法翻译此网页解决方法。搜狗浏览器无法翻译此网页解决方法方法一：1、下载并安装搜狗浏览器2、打开搜狗浏览器3、任意打开一个英文网站4、网站打开后，单击右上角的译字图标5、选择翻译文字类型，然后单击翻译当前网页6
iOS 17.2：如何使用 iPhone 的操作按钮翻译语音
Dec 15, 2023 pm 11:21 PM
在iOS17.2中，使用iPhone操作按钮的新自定义翻译选项克服沟通障碍。继续阅读以了解如何使用它。如果您的iPhone带有操作按钮，例如iPhone15Pro，Apple的iOS17.2软件更新为该按钮带来了新的翻译选项，可让您将实时对话翻译成多种语言。根据苹果公司的说法，翻译不仅准确，而且具有上下文感知能力，确保有效地捕捉细微差别和口语。该功能对于旅行者、学生和任何学习语言的人来说都应该是一个福音。在使用翻译功能之前，请务必选择要翻译的语言。您可以通过Apple内置的翻译应用程序执行此操作
