Attributs SRC et HREF
Dans AngularJS, SRC doit être écrit en NG-SRC, et HREF doit être écrit comme NG-HREF par exemple:
La copie de code est la suivante:
<img ng-src = "/ images / chats / {{favoritecat}}">
<a ng-href = "/ shop / catégorie = {{nombre}}"> du texte </a>
expression
Des opérations mathématiques simples, des opérations de comparaison, des opérations booléennes, des opérations de bits, des références et des symboles d'objets peuvent être effectués dans des modèles. Bien que nous puissions faire beaucoup de choses avec des expressions, l'expression est exécutée à l'aide d'un interprète personnalisé (partie d'Angular), plutôt que d'utiliser la fonction JavaScript EVAL (), il a donc de grandes limites.
Bien que les expressions ici soient plus strictes que JavaScript à bien des égards, elles ont une meilleure tolérance aux défauts non définie et nul. Si une erreur est rencontrée, le modèle ne montre rien et ne lance pas d'erreur NullPointerException. Par exemple:
La copie de code est la suivante:
<div ng-contrôleur = 'SomeController'>
<div> {{Computer () / 10}} </div> // Bien qu'il soit légal, il met la logique commerciale dans le modèle, et cette approche doit être évité
</div>
Distinguer les responsabilités de l'interface utilisateur et du contrôleur
Le contrôleur est lié à un fragment DOM spécifique, ce qu'ils doivent gérer. Il existe deux méthodes principales pour associer le contrôleur au nœud DOM. L'un est déclaré via le contrôleur NG dans le modèle, et le second est de le lier à un fragment de modèle DOM chargé dynamiquement via le routage. Ce modèle est appelé une vue. Nous pouvons créer des contrôleurs imbriqués, ils peuvent partager le modèle de données et les fonctions en héritant de la structure du nombre. La véritable nidification se produit sur l'objet Scope $. Grâce au mécanisme de succession d'origine interne, la portée $ de l'objet de contrôleur parent sera transmise à la portée de $ imbriquée interne (toutes les propriétés, y compris les fonctions). Par exemple:
La copie de code est la suivante:
<div ng-controller = "parentController">
<div ng-contrôleur = "childontroller"> ... </div>
</div>
Exposer les données du modèle à l'aide de $ Scope
Vous pouvez afficher la création de $ Scope Attribut, tel que $ scope.count = 5. Vous pouvez également créer indirectement des modèles de données via le modèle lui-même.
Passer l'expression. Par exemple
La copie de code est la suivante:
<Button ng-Click = 'count = 3'> Définir le nombre sur trois </fontifications>
Utilisation du modèle ng sur les éléments du formulaire
Semblable à l'expression, les paramètres du modèle spécifié sur le modèle NG fonctionnent également dans le contrôleur extérieur. La seule différence est que cela crée une relation de liaison bidirectionnelle entre l'élément de forme et le modèle spécifié.
Surveiller les modifications des modèles de données à l'aide de la montre
La signature de la fonction de $ watch est: $ watch (watchfn, watchaction, deepwatch)
WatchFN est une chaîne avec une expression ou une fonction angulaire qui renvoie la valeur actuelle du modèle de données surveillé. WatchAction est une fonction ou une expression appelée lorsque WatchFN change. Sa signature de fonction est:
Fonction (NewValue, OldValue, Scope) Deepwatch Si défini sur true, ce paramètre booléen facultatif commandera angulaire pour vérifier si chaque propriété de l'objet surveillé a changé. Si vous surveillez une valeur simple pour surveiller les éléments du tableau, ou tous les attributs de l'objet, au lieu de valeurs, vous pouvez utiliser ce paramètre. Notez que Angular doit parcourir les tableaux ou les objets. Si l'ensemble est plus grand, l'opération sera plus compliquée.
La fonction $ watch renvoie une fonction. Lorsque vous n'avez pas besoin de recevoir des notifications de modification, vous pouvez utiliser la fonction retournée pour vous déconnecter du moniteur.
Si nous devons surveiller une propriété, puis nous déconnecter de la surveillance, nous pouvons utiliser le code suivant: var dereg = $ scope. $ Watch ('SomeModel.SomeProperty', callBackOnChange ());
... dereg ();
L'exemple de code est le suivant:
La copie de code est la suivante:
<html ng-app>
<adal>
<Titre> Votre panier </TITAL>
<script type = "text / javascript">
fonction CartController ($ scope) {
$ scope.bill = {};
$ scope.items = [
{Titre: 'Paint Pots', Quantité: 8, Prix: 3,95},
{Titre: 'Polka Dots', Quantité: 17, Prix: 12.95},
{Titre: 'Pebbles', Quantité: 5, Prix: 6,95}
]]
$ scope.totalcart = function () {
var total = 0;
for (var i = 0, len = $ scope.items.length; i <len; i ++) {
Total = Total + $ scope.items [i] .price * $ scope.items [i] .quantity;
}
retour total;
}
$ scope.subtotal = function () {
retour $ scope.totalcart () - $ scope.bill.discount;
}
fonction calculéediscount (newValue, OldValue, Scope) {
$ scope.bill.discount = newValue> 100? 10: 0;
} // La fonction WatchAction ici
$ scope. $ watch ($ scope.totalcart, calculéediscount); // la fonction de montre ici
}
</cript>
</ head>
<body>
<div ng-contrôleur = "CartController">
<div ng-repeat = 'item in items'>
<span> {{item.title}} </span>
<entrée ng-model = 'item.quantity'>
<span> {{item.price | devise}} </span>
<span> {{item.price * item.quantity | devise}} </span>
</div>
<div> Total: {{totalCart () | devise}} </div>
<div> Remise: {{Bill.discount | devise}} </div>
<div> subtotal: {{subtotal () | devise}} </div>
</div>
<script type = "text / javascript" src = "angular.min.js"> </ script>
</docy>
</html>
La montre ci-dessus a des problèmes de performances. La fonction calculée desTotals a été exécutée 6 fois, dont trois parce que la boucle a été brisée. Chaque fois que la boucle était bouclée, les données ont été renvoyées.
Ci-dessous est le code modifié
La copie de code est la suivante:
<html ng-app>
<adal>
<Titre> Votre panier </TITAL>
<script type = "text / javascript">
fonction CartController ($ scope) {
$ scope.bill = {};
$ scope.items = [
{Titre: 'Paint Pots', Quantité: 8, Prix: 3,95},
{Titre: 'Polka Dots', Quantité: 17, Prix: 12.95},
{Titre: 'Pebbles', Quantité: 5, Prix: 6,95}
]]
var totalcart = function () {
var total = 0;
for (var i = 0, len = $ scope.items.length; i <len; i ++) {
Total = Total + $ scope.items [i] .price * $ scope.items [i] .quantity;
}
$ scope.bill.totalcart = total;
$ scope.bill.discount = total> 100? 10: 0;
$ scope.bill.subTotal = Total - $ scope.bill.discount;
}
$ scope. $ watch ('items', totalcart, true); // Utilisez uniquement Watch pour modifier les articles
}
</cript>
</ head>
<body>
<div ng-contrôleur = "CartController">
<div ng-repeat = 'item in items'>
<span> {{item.title}} </span>
<entrée ng-model = 'item.quantity'>
<span> {{item.price | devise}} </span>
<span> {{item.price * item.quantity | devise}} </span>
</div>
<div> Total: {{bill.totalcart | devise}} </div>
<div> Remise: {{Bill.discount | devise}} </div>
<div> subtotal: {{bill.subtotal | devise}} </div>
</div>
<script type = "text / javascript" src = "angular.min.js"> </ script>
</docy>
</html>
Pour les grandes tableaux ITMS, si seul l'attribut Bill est recalculé chaque fois que la page est affichée en angulaire, les performances seront bien meilleures. Nous pouvons y parvenir en créant une fonction de montre $ avec WatchFN.
La copie de code est la suivante:
$ scope. $ watch (
var totalcart = function () {
var total = 0;
for (var i = 0, len = $ scope.items.length; i <len; i ++) {
Total = Total + $ scope.items [i] .price * $ scope.items [i] .quantity;
}
$ scope.bill.totalcart = total;
$ scope.bill.discount = total> 100? 10: 0;
$ scope.bill.subTotal = Total - $ scope.bill.discount;
});
Surveiller plusieurs choses
Si vous souhaitez surveiller plusieurs propriétés ou objets et exécuter une fonction lorsque l'une d'entre elles change, vous avez deux options de base:
Surveillez les valeurs après avoir connecté ces propriétés
Mettez-les dans un tableau ou un objet, puis passez une valeur au paramètre Deepwatch
Expliquez séparément:
Dans le premier cas, s'il y a un objet de choses dans votre portée, il a deux propriétés A et B, et lorsque les deux propriétés changent, vous devez exécuter la fonction callMe (), vous pouvez surveiller ces deux propriétés en même temps.
Lorsque la liste est très longue, vous devez écrire une fonction pour retourner la valeur après la connexion.
Dans le deuxième cas, vous devez surveiller toutes les propriétés de l'objet de choses, vous pouvez le faire:
La copie de code est la suivante:
$ scope. $ watch ('Things', callme (...), true);
Organiser les dépendances à l'aide du module
fournisseur (nom, objet ou constructeur ()) Description: Un service configurable, la création de la logique est relativement complexe. Si vous passez un objet en tant que paramètre, l'objet objet doit avoir une fonction nommée $ get, qui doit renvoyer le nom du service. Sinon, AngularJS pensera que lorsque vous passerez un constructeur, l'appel du constructeur renverra l'objet d'instance de service.
Factory (nom, $ get function ()) Description: Un service non configurable, la logique de création est relativement compliquée. Vous devez spécifier une fonction, et lorsque cette fonction est appelée, l'instance de service sera renvoyée. Il peut être considéré comme la forme de fournisseur (nom, {$ get: $ getFunction ()}).
Service (Name, Constructor ()) est un service non configurable, la création de la logique est relativement simple. Semblable au paramètre constructeur de la fonction du fournisseur ci-dessus, Angular l'appelle pour créer une instance de service.
Exemple d'utilisation de l'usine de modules
La copie de code est la suivante:
<html ng-app = 'shoppingmodule'>
<adal>
<Titre> Votre panier </TITAL>
<script type = "text / javascript" src = "angular.min.js"> </ script>
<script type = "text / javascript">
var shoppingmodule = angular.module ('shoppingmodule', []);
Shoppingmodule.factory ('items', function () {
var items = {};
items.Query = function () {
Retour [
{Titre: 'Paint Pots', Description: 'Pots pleins de peinture', prix: 3,95},
{Titre: 'Paint Pots', Description: 'Pots pleins de peinture', prix: 3,95},
{Titre: «Paint Pots», Description: «Pots pleins de peinture», prix: 3,95}
]]
};
return les éléments;
});
Fonction ShoppingController ($ Scope, articles) {
$ scope.items = items.Query ();
}
</cript>
</ head>
<Body ng-Controller = 'ShoppingController'>
<h1> Shop !! </h1>
<ballage>
<tr ng-repeat = 'item in items'>
<td> {{item.title}} </td>
<td> {{item.description}} </td>
<td> {{item.price | devise}} </td>
</tr>
</ table>
</docy>
</html>
Présentation des modules tiers
Dans la plupart des applications, créez un seul module pour tout le code et placez toutes les dépendances dans ce module, ce qui fonctionnera bien. Cependant, si vous prévoyez d'utiliser des services ou des instructions fournis par des packages tiers, ils sont généralement livrés avec leurs propres modules, et vous devez définir les soins de dépendance dans le module d'application pour les référencer. Par exemple:
var appmod = angular.module ('app', ['snazzy', 'super']);
Exemples de filtre
La copie de code est la suivante:
<html ng-app = 'shoppingmodule'>
<adal>
<Titre> Votre panier </TITAL>
<script type = "text / javascript" src = "angular.min.js"> </ script>
<script type = "text / javascript">
var shoppingmodule = angular.module ('shoppingmodule', []);
Shoppingmodule.filter ('titlecase', function () {
var titleCaseFilter = fonction (entrée) {
var words = input.split ('');
for (var i = 0; i <words.length; i ++) {
mots [i] = mots [0] .Charat (0) .toupperase () + mots [i] .slice (1);
}
retour des mots.join ('');
};
return titleCaseFilter;
});
Fonction ShoppingController ($ Scope) {
$ scope.pageheading = 'Ceci est un cas de test';
}
</cript>
</ head>
<Body ng-Controller = 'ShoppingController'>
<h1> {{Pageheading | titlecase}} </h1>
</docy>
</html>