Maison > Article > interface Web > Comment utiliser Angularjs ? Analyse détaillée des exemples de framework AngularJS (avec exemples complets)

Comment utiliser Angularjs ? Analyse détaillée des exemples de framework AngularJS (avec exemples complets)

寻∝梦original: 2018-09-08 11:48:112064parcourir

Cet article présente un résumé des points de connaissance du framework de angularjs, avec des exemples complets et des explications détaillées des balises complètes. Ensuite, lisons cet article ensemble

1 AngularJSQu'est-ce que c'est ?

Il s'agit d'un framework front-end développé par Google avec une structure MVC. Dans l'application Angular, la couche de vue est DOM et le contrôleur est JavaScript Classe, les données du modèle sont stockées dans les propriétés de l'objet.

2. Liaison de données

mappe une certaine partie de l'interface aux attributs de JavaScript , leur permettant de s'exécuter automatiquement. Synchronisation, cette méthode de programmation est la liaison de données. Il n'est pas nécessaire d'enregistrer un écouteur pour le champ, et les propriétés de l'objet et l'affichage de l'interface peuvent être modifiés de manière synchrone.

3. Injection de dépendances

Il n'est pas nécessaire de recréer l'objet, vous devrez utiliser l'objet $scope ou $loaction est injecté dans le constructeur comme suit. Il s’agit d’une injection de dépendance.

function HelloController($scope, $location) {
$scope.greeting = { text: &#39;Hello&#39; };
// use $location for something good here...
}

4. Directives

La couche centrale du framework dispose d'un puissant moteur de conversion DOM qui vous permet d'étendre Syntaxe HTML . Le ng-controller en HTML est utilisé pour spécifier quel contrôleur servir quelle vue, ng- model lie une zone de saisie à la pièce du modèle. Nous appelons cela des directives d’extension HTML .

5. Expliquez chaque balise selon l'exemple

<!DOCTYPE html>
<html  ng-app>
<head>
<base/>
<title>Your Shopping Cart</title>
<script src="../frm/angular/angular.js"></script>
</head>
<body ng-controller=&#39;CartController&#39;>
<h1>Your Order</h1>
<p ng-repeat=&#39;item in items&#39;>
<span>{{item.title}}</span>
<input ng-model=&#39;item.quantity&#39;/>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)"> Remove </button>
</p>
<script>
function CartController($scope) {
////@formatter:off
$scope.items = [{
title : &#39;Paint pots&#39;,
quantity : 8,
price : 3.95
}, {
title : &#39;Polka dots&#39;,
quantity : 17,
price : 12.95
}, {
Title : &#39;Pebbles&#39;,
quantity : 5,
price : 6.95
}];
////@formatter:on
$scope.remove = function(index) {
$scope.items.splice(index, 1);
};
}
</script>
</body>
</html>

Suivez les ci-dessus le code, expliquez le contenu clé :

ng-app L'attribut indique à Angular quelle partie de la page il doit gérer. Puisque nous l'avons mis sur l'élément html, il indique à Angular de gérer la page entière. Si vous intégrez Angular à une application existante qui utilise d'autres méthodes pour gérer les pages, vous devrez peut-être placer pEn haut.

)

dans Angulaire , la zone de page gérée par la classe JavaScript est appelée un contrôleur. En incluant un contrôleur dans la balise body, le CartController déclaré gérera le bodyTout ce qui se trouve entre les balises. 3

)

ng-repeat représente les éléments copiez chaque élément du tableau une fois dans ce p. DOM. Dans chaque copie de p, un attribut appelé item est défini pour représenter l'élément actuel, nous pouvons donc l'utiliser. Comme vous pouvez le constater, chaque p contient le nom du produit, la quantité, le prix unitaire, le prix total et un bouton de suppression.

4) {{item.title}}

Comme démontré 'Hello World', la liaison de données consiste à insérer la valeur de la variable dans une certaine partie de la page via {{ }} Restez synchronisé. L'expression complète {{item.title}} récupère l'élément actuel dans l'itération, puis définit la valeur de l'attribut titre de l'élément actuel Insérez dans DOM.

5)

ng-model Définition Création d'une liaison de données entre le champ de saisie et item.quantity. span{{ dans la balise }} établit une connexion unidirectionnelle, insérez la valeur ici. Mais l’application doit savoir que lorsque l’utilisateur modifie la quantité, il peut modifier le prix total, ce que nous souhaitons. En utilisant ng-model nous garderons les modifications synchronisées avec notre modèle. ng-model déclare que la valeur de item.quantity sera insérée dans la zone de saisie chaque fois que l'utilisateur entre une nouvelle valeur. , il sera automatiquement mis à jour item.quantity.

6) {{item.price | monnaie}}

Nous souhaitons que le prix unitaire soit formaté en USD. Angular est livré avec une fonctionnalité appelée filtres qui nous permet de convertir du texte, il existe un filtre appelé devise qui fera ce formatage en dollars pour nous.

7)

Cliquez sur ce bouton pour appeler la fonction remove(). En même temps, $index est transmis, qui contient l'ordre d'itération de ng-repeat pour savoir quel élément supprimer.

8)function CartController($scope) {

CartController Gérer la logique de ce panier. Grâce à cela, nous disons à Angular que le contrôleur

a besoin d'un objet appelé $scope . $scope est utilisé pour lier des données aux éléments de l'interface.

9）$scope.remove = function(index) {

$scope.items.splice(index, 1);

};

我们希望 remove()函数能够绑定到界面上，因此我们也把它增加到$scope中。对于这

个内存中的购物车版本，remove()函数只是从数组中删除了它们。因为通过ng-repeat创建

的这些

是数据捆绑的，当某项消失时，列表自动收缩。记住，无论何时用户点击移除

按钮中的一个，都将从界面上调用 remove()函数。（想看更多就到PHP中文网AngularJS开发手册中学习）

6. 调用 Angular

任何应用使用 Angular 必须做两件事：

1）加载 angular.js

2）使用 ng-app告知Angular管理哪一部分的DOM

7. 加载脚本

很简单：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
推荐使用 Google 的CDN。Google的服务器是非常快的，脚本是跨应用缓存的。那就是说，如果你的用户有多个使用Angular的应用，它只下载一次。同样，如果用户访问过使用Google Angular的CDN链接，那么当他访问你的站点时没有必要再次下载。

8. 模块

<html ng-app='myApp'> <body ng-controller='TextController'> <p>{{someText.message}}</p> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> <script> var myAppModule = angular.module('myApp', []); myAppModule.controller('TextController', function($scope) { var someText = {}; someText.message = 'You have started your journey.'; $scope.someText = someText; }); </script> </body> </html>
在这个模板中，我们告知 ng-app 元素我们的模块名，myApp。然后我们调用了Angular对象创建一个名为myApp的模块，传递了控制器函数给模块的控制器函数。

只要记住，远离全局命名空间是一件好事。模块化这是我们通用的机制。

9. 模板和数据绑定

Angular 应用中的模板只是那些我们从服务器加载的 HTML文档或者是定义在<script></script>标签中的一些静态资源。你在模板中定义界面，在界面组件中使用标准的HTML加上Angular标识符。

基本的启动流程就像这样：

1）用户请求应用的第一页面。

2) Le navigateur de l'utilisateur envoie un lien HTTP à votre serveur et charge le index.htmlpage.
3
) Angular se charge sur la page, attendez que la page soit complètement chargée, puis recherchez ng -appDéfinir les limites du modèle.
4
) Angular recherche des identifiants et des bundles via des modèles. Le résultat est que l'écouteur et l'opération DOM sont enregistrés et les données d'initialisation sont interrogées auprès du serveur. Le résultat final de ce travail est que l'application a été bootstrapée (démarrage terminé, terminologie informatique), convertissant le modèle en une vue au même titre que DOM.
5
) Vous vous connectez au serveur et chargez à la demande des données supplémentaires que vous devez afficher à l'utilisateur.

En structurant votre application à l'aide de Angular , les modèles de votre application et les données qui les peuplent sont séparés. L’avantage est que ces modèles peuvent désormais être mis en cache. Après le premier chargement, seules les nouvelles données sont chargées dans le navigateur. Uniquement JavaScript, images, CSS et d'autres ressources, la mise en cache de ces modèles peut donner à l'application de meilleures performances.
10.
ng-bind Affichage de l'identifiant et mise à jour du texte
ng-bind
et {{}} et deux autres méthodes sont équivalentes pour l'affichage du texte. La différence est que l'utilisateur ne peut pas voir le contenu tant que les données ne sont pas chargées. 11. src et
href
Suggestions d'attributs Lorsque les données sont liées à une balise ou

, dans src Ou le chemin utilisant {{}} dans href ne peut pas fonctionner normalement. Cependant, vous devez utiliser l'attribut ng-src , de la même manière que la balise

, Vous devez utiliser ng-href12 $route service
La route
peut être pointée pour une navigation donnée. URL

Spécification détailléeAngular peut charger et afficher un modèle et instancier un contrôleur pour fournir un contexte au modèle.
Lorsque
URL est
/Find/activityDetail
, Angular sera le L'adresse pour charger le modèle est : Find/views/activityDetail.html. sinon() indique l'itinéraire pour accéder à cette section s'il n'y a pas de correspondance.

13. 用指令修改DOM
var appModule = angular . module ( 'app' , []); appModule . directive ( 'ngbkFocus' , function () { return { link : function ( scope , element , attrs , controller) { element [ 0 ]. focus (); } }; });
14. 校验用户输入

模板代码：
<h1> Sign Up </h1> <form name='addUserForm' ng-controller= "AddUserController" > <p ng-show='message'>{{message}}</p> <p> First name: <input name= 'firstName' ng-model= 'user.first' required ></p> <p>Last name: <input ng-model='user.last' required ></p> <p>Email: <input type='email' ng-model='user.email' required ></p> <p>Age: <input type= 'number' ng-model= 'user.age' ng-maxlength= '3' ng-min= '1' ></p> <p><button ng-click='addUser()' ng-disabled= '!addUserForm.$valid' > Submit </button> < /ng-form>
控制器：
function AddUserController ( $scope ) { $scope . message = '' ; $scope . addUser = function () { // TODO for the reader: actually save user to database... $scope . message = 'Thanks, ' + $scope . user . first + ', we added you!' ; }; }
说明：

使用了来自 HTML5 的required属性，email类型、number类型的输入

框，在一些字段上做我们的校验。

在控制器内部，可以通过$valid 属性来访问表单的校验状态。当表单中所有的请求都是合法时，Angular 会把它设置成 true。我们可以使用$valid属性来做额外的事，比如当表单还未完成时禁用提交按钮。

通过个体提交按钮添加 ng-disbaled，能够阻止非法状态的提交。

15. ‘use strict’是什么意思

“use strict”是一个指令，指示解释器用更严格的方式检查代码。"use strict"开启严格模式以后，一些js糟糕的特性都会被禁用，比如不能用with，也不能在意外的情况下给全局变量赋值。严格模式下的eval函数的行为和非严格模式的也不相同。

16. factory,service,provider自定义服务，services.js

1) 用 Factory 就是创建一个对象，为它添加属性，然后把这个对象返回出来。你把 service传进controller之后，在controller里这个对象里的属性就可以通过factory使用了。

2) Service 是用"new"关键字实例化的。因此，你应该给"this"添加属性，然后service返回"this"。你把service传进controller之后，在controller里"this"上的属性就可以通过service来使用了。

3) Providers est le seul service.config() 🎜 >. Lorsque vous souhaitez effectuer une configuration à l'échelle du module avant que l'objet service soit activé, vous devez utiliser provider.

D'accord, cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois Manuel d'utilisation d'AngularJS pour en savoir plus). , vous pouvez laisser une question ci-dessous.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment apprendre AngularJS ? Le didacticiel d'apprentissage Angularjs vous évite de vous perdreArticle suivant：Comment apprendre AngularJS ? Le didacticiel d'apprentissage Angularjs vous évite de vous perdre

Articles Liés

Voir plus