使用 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的路由表。我找到的所有示例都有针对所有内容的所有路由的硬编码。而我想要的确不是一个在路由表里包含上百项路由记录的方案.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Que dois-je faire si la page Web de traduction fournie avec le navigateur Edge est manquante ?
Mar 14, 2024 pm 08:50 PM
Le navigateur Edge est livré avec une fonction de traduction qui permet aux utilisateurs de traduire à tout moment et n'importe où, ce qui apporte une grande commodité aux utilisateurs. Cependant, de nombreux utilisateurs disent que la page Web de traduction intégrée manque automatiquement. Que dois-je faire si le navigateur Edge est automatiquement installé. la page de traduction que j'ai apportée manque ? Laissez ce site vous expliquer comment restaurer la page Web traduite fournie avec le navigateur Edge si elle est manquante. Comment restaurer la page Web de traduction fournie avec le navigateur Edge manquante 1. Vérifiez si la fonction de traduction est activée : Dans le navigateur Edge, cliquez sur l'icône à trois points dans le coin supérieur droit, puis sélectionnez l'option « Paramètres ». Sur le côté gauche de la page des paramètres, sélectionnez l'option Langue. Assurez-vous que "Traduire&rd"
Ne vous inquiétez pas de regarder des films sans sous-titres ! Xiaomi annonce le lancement des sous-titres en temps réel Xiaoai Translation pour la traduction japonaise et coréenne
Jul 22, 2024 pm 02:11 PM
Selon les informations du 22 juillet, le Weibo officiel de Xiaomi ThePaper OS a annoncé que la traduction Xiaoai a été mise à niveau. Des sous-titres en temps réel ont été ajoutés aux traductions japonaises et coréennes, et des vidéos sans sous-titres et des conférences en direct peuvent être transcrites et traduites. en temps réel. L'interprétation simultanée en face à face prend en charge la traduction dans 12 langues, dont le chinois, l'anglais, le japonais, le coréen, le russe, le portugais, l'espagnol, l'italien, le français, l'allemand, l'indonésien et l'hindi. Les fonctions ci-dessus ne prennent actuellement en charge que les trois nouveaux téléphones suivants : Xiaomi MIX Fold 4 Xiaomi MIX Flip Redmi K70 Extreme Edition Il est rapporté qu'en 2021, les sous-titres AI de Xiao Ai seront ajoutés aux traductions japonaises et coréennes. Les sous-titres AI utilisent la technologie d’interprétation simultanée développée par Xiaomi pour offrir une expérience de lecture des sous-titres plus rapide, plus stable et plus précise. 1. Selon le communiqué officiel, Xiaoai Translator ne peut pas être utilisé uniquement dans des lieux audio et vidéo
Comment traduire le navigateur Sogou
Feb 01, 2024 am 11:09 AM
Comment le navigateur Sogou traduit-il ? Lorsque nous utilisons habituellement le navigateur Sogou pour vérifier les informations, nous rencontrons certains sites Web qui sont tous en anglais. Parce que nous ne comprenons pas l'anglais, il est très difficile de parcourir le site Web. Cela n'a pas d'importance. vous rencontrez cette situation ! Le navigateur Sogou dispose d'un bouton de traduction intégré. En un seul clic, le navigateur Sogou traduira automatiquement l'intégralité de la page Web pour vous. Si vous ne savez pas comment l'utiliser, l'éditeur a compilé les étapes spécifiques pour le traduire sur le navigateur Sogou. Si vous ne savez pas comment, suivez-moi et continuez à lire ! Comment traduire le navigateur Sogou 1. Ouvrez le navigateur Sogou, cliquez sur l'icône de traduction dans le coin supérieur droit 2. Sélectionnez le type de texte à traduire, puis entrez le texte qui doit être traduit 3. Le navigateur Sogou traduira automatiquement le texte. à ce stade, l'opération de navigation Sogou ci-dessus est terminée. Comment traduire tous les contenus.
Comment résoudre le problème d'échec de la traduction intégrée de Google Chrome ?
Mar 13, 2024 pm 08:46 PM
Les navigateurs ont généralement des fonctions de traduction intégrées, vous n’avez donc pas à craindre de ne pas pouvoir comprendre lorsque vous naviguez sur des sites Web en langues étrangères ! Google Chrome ne fait pas exception, mais certains utilisateurs constatent que lorsqu'ils ouvrent la fonction de traduction de Google Chrome, il n'y a ni réponse ni échec. Que doivent-ils faire ? Vous pouvez essayer la dernière solution que j'ai trouvée. Didacticiel d'utilisation : cliquez sur les trois points dans le coin supérieur droit et cliquez sur Paramètres. Cliquez sur Ajouter une langue, ajoutez l'anglais et le chinois et définissez les paramètres suivants. Le paramètre anglais demande si les pages Web doivent être traduites dans cette langue. Le paramètre chinois affiche les pages Web dans cette langue et le chinois doit être déplacé vers le haut. peut être définie comme langue par défaut. Si vous ouvrez la page Web et qu'aucune option de traduction n'apparaît, cliquez avec le bouton droit et sélectionnez Traduire le chinois, OK.
Construire un outil de traduction en temps réel basé sur JavaScript
Aug 09, 2023 pm 07:22 PM
Construire un outil de traduction en temps réel basé sur JavaScript Introduction Avec la demande croissante de mondialisation et la fréquence des échanges et des échanges transfrontaliers, les outils de traduction en temps réel sont devenus une application très importante. Nous pouvons exploiter JavaScript et certaines API existantes pour créer un outil de traduction en temps réel simple mais utile. Cet article présentera comment implémenter cette fonction basée sur JavaScript, avec des exemples de code. Étapes de mise en œuvre Étape 1 : Créer une structure HTML Tout d'abord, nous devons créer un code HTML simple.
Pourquoi Google Chrome ne peut-il pas traduire le chinois ?
Mar 11, 2024 pm 04:04 PM
Pourquoi Google Chrome ne peut-il pas traduire le chinois ? Comme nous le savons tous, Google Chrome est l'un des navigateurs avec traduction intégrée. Lorsque vous parcourez des pages écrites dans d'autres pays dans ce navigateur, le navigateur traduira automatiquement la page en chinois. Récemment, certains utilisateurs ont déclaré qu'ils traduisaient en chinois. ne peut pas être effectué. Pour le moment, nous devons le corriger dans les paramètres. Ensuite, l'éditeur vous apportera la solution au problème que Google Chrome ne peut pas traduire en chinois. Les amis intéressés peuvent venir y jeter un œil. Google Chrome ne peut pas traduire la solution chinoise 1. Modifier le fichier hosts local. Hosts est un fichier système sans extension. Il peut être ouvert avec des outils tels que le Bloc-notes. Sa fonction principale est de définir la relation de mappage entre les adresses IP et les noms d'hôtes. est une adresse IP de mappage
Comment résoudre le problème selon lequel le navigateur Sogou ne peut pas traduire les pages Web
Jan 29, 2024 pm 09:18 PM
Que dois-je faire si le navigateur Sogou ne parvient pas à traduire cette page Web ? Sogou Browser est un navigateur multifonctionnel très facile à utiliser. Sa fonction de traduction de pages Web est très puissante et peut nous aider à résoudre la plupart des problèmes liés aux études et au travail. Cependant, certains amis ont signalé que le navigateur Sogou a un problème qui ne peut pas traduire cette page Web. Cela peut être dû à un mauvais fonctionnement. Il peut être résolu en exécutant correctement la fonction de traduction. Ci-dessous, l'éditeur vous présentera le problème que le navigateur Sogou ne peut pas traduire. traduire. Traduire cette solution de page. Le navigateur Sogou ne peut pas traduire cette page Web Méthode de solution 1 : 1. Téléchargez et installez le navigateur Sogou 2. Ouvrez le navigateur Sogou 3. Ouvrez n'importe quel site Web en anglais 4. Une fois le site Web ouvert, cliquez sur l'icône de traduction dans le coin supérieur droit 5. Sélectionnez Traduire le texte tapez et cliquez sur Traduire la page Web actuelle 6
iOS 17.2 : Comment utiliser le bouton d'action de votre iPhone pour traduire la parole
Dec 15, 2023 pm 11:21 PM
Dans iOS 17.2, surmontez les barrières de communication grâce à de nouvelles options de traduction personnalisée pour les boutons d’action de l’iPhone. Lisez la suite pour savoir comment l'utiliser. Si vous possédez un iPhone avec un bouton d'action, comme l'iPhone 15 Pro, la mise à jour logicielle iOS 17.2 d'Apple apporte de nouvelles options de traduction au bouton, vous permettant de traduire des conversations en direct dans plusieurs langues. Selon Apple, les traductions sont non seulement précises, mais également contextuelles, garantissant ainsi une capture efficace des nuances et du langage parlé. Cette fonctionnalité devrait être une aubaine pour les voyageurs, les étudiants et toute personne apprenant une langue. Avant d'utiliser la fonction de traduction, assurez-vous de sélectionner la langue dans laquelle vous souhaitez traduire. Vous pouvez le faire via l'application de traduction intégrée d'Apple.
