简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

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

寻∝梦
Libérer： 2018-09-08 11:48:11
original
2081 Les gens l'ont consulté

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: 'Hello' };
// use $location for something good here...
}
Copier après la connexion

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>
Copier après la connexion

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

1)

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 p<🎜 dans l'application >En haut.

2

)

dans Angulaire < En 🎜>, 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>
Copier après la connexion

推荐使用 Google 的CDN。Google的服务器是非常快的，脚本是跨应用缓存的。那就是说，如果你的用户有多个使用Angular的应用，它只下载一次。同样，如果用户访问过使用Google Angular的CDN链接，那么当他访问你的站点时没有必要再次下载。

8. 模块

<html ng-app=&#39;myApp&#39;>
<body ng-controller=&#39;TextController&#39;>
<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(&#39;myApp&#39;, []);
myAppModule.controller(&#39;TextController&#39;,
function($scope) {
var someText = {};
someText.message = &#39;You have started your journey.&#39;;
$scope.someText = someText;
});
</script>
</body>
</html>
Copier après la connexion

在这个模板中，我们告知 ng-app 元素我们的模块名，myApp。然后我们调用了Angular对象创建一个名为myApp的模块，传递了控制器函数给模块的控制器函数。

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

9. 模板和数据绑定

Angular 应用中的模板只是那些我们从服务器加载的 HTML文档或者是定义在

Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！