Explication détaillée de la syntaxe AngularJS (suite)_AngularJS

Attributs src et href

Dans Angularjs, src doit être écrit sous la forme ng-src et href doit être écrit sous la forme ng-href. Par exemple :

.

Copier le code Le code est le suivant :

Quelques textes

Expression

Vous pouvez effectuer des opérations mathématiques simples, des opérations de comparaison, des opérations booléennes, des opérations au niveau des bits, des tableaux de référence, des notations d'objets, etc. dans les modèles. Bien que nous puissions faire beaucoup de choses avec les expressions, les expressions utilisent un interpréteur personnalisé. d'Angular) au lieu d'utiliser la fonction eval() de Javascript, elle présente donc de plus grandes limitations.
Bien que les expressions ici soient plus strictes que Javascript à bien des égards, elles sont plus tolérantes aux valeurs indéfinies et nulles. Si une erreur est rencontrée, le modèle n'affiche simplement rien au lieu de générer une erreur NullPointerException. Par exemple :

Copier le code Le code est le suivant :

{{computer() /10 }}

//Bien que ce soit légal, cela met la logique métier dans le modèle. Cette approche doit être évitée
.

Séparez les responsabilités de l'interface utilisateur et du contrôleur

Les contrôleurs sont liés à des fragments DOM spécifiques, et ces fragments constituent le contenu qu'ils doivent gérer. Il existe deux manières principales d'associer un contrôleur à un nœud DOM. La première consiste à le déclarer dans le modèle via ng-controller. La seconde consiste à le lier à un fragment de modèle DOM chargé dynamiquement via le routage. Nous pouvons créer des contrôleurs imbriqués.Ils peuvent partager des modèles de données et des fonctions via des structures d'héritage. La véritable imbrication se produit sur l'objet $scope Grâce au mécanisme d'héritage primitif interne, le $scope de l'objet contrôleur parent sera transmis à l'objet $scope interne. scope (toutes les propriétés, y compris les fonctions). Par exemple :

Copier le code Le code est le suivant :

...

Utilisez $scope pour exposer les données du modèle

Vous pouvez créer explicitement des propriétés $scope, par exemple $scope.count = 5. Vous pouvez également créer des modèles de données indirectement via le modèle lui-même.

Par expression. Par exemple

Copier le code Le code est le suivant :

Définir le nombre sur trois

Utilisez ng-model sur les éléments de formulaire

Semblable aux expressions, les paramètres de modèle spécifiés sur ng-model fonctionnent également dans le contrôleur externe. La seule différence est que cela crée une liaison bidirectionnelle entre l'élément de formulaire et le modèle spécifié.

Utilisez Watch pour surveiller les changements dans le modèle de données

La signature de 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 :
function(newValue,oldValue,scope) deepWatch S'il est défini sur true, ce paramètre booléen facultatif demandera à Angular de vérifier si chaque propriété de l'objet surveillé a changé. Vous pouvez utiliser ce paramètre si vous souhaitez surveiller les éléments d'un tableau ou toutes les propriétés d'un objet, plutôt que de surveiller une seule valeur. Notez qu'Angular doit parcourir des tableaux ou des objets si la collection est volumineuse, l'opération sera compliquée et lourde.

La fonction $watch renverra une fonction Lorsque vous n'avez pas besoin de recevoir des notifications de modification, vous pouvez utiliser cette fonction renvoyé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 :

Copier le code Le code est le suivant :

   
   


   

       

            {{item.title}}
           
            {{item.price | devise}}
            {{item.price * item.quantity | devise}}
       

       

Total : {{totalCart()| devise }}

       

Remise : {{bill.discount | devise}}

       

Sous-Total : {{sous-total() | devise}}

   

   

据。

下面是改良后的代码

复制代码 代码如下 :

   
   


   

       

            {{item.title}}
           
            {{item.price | devise}}
            {{item.price * item.quantity | devise}}
       

       

Total : {{bill.totalcart| devise }}

       

Remise : {{bill.discount | devise}}

       

Sous-Total : {{bill.subtotal | devise}}

   

   

对于大型的itms数组来说，如果每次在Angular显示页面时只重新计算bill属性，那么性能会好很多。通过创建一个带有watchFn的$watch函数，我们可以实现这一点。

复制代码 代码如下 :

$scope.$watch(
var totalCart = fonction() {
           var total = 0 ;
pour (var i=0,len=$scope.items.length;i                          total = total $scope.items[i].price * $scope.items[i].quantity;
                }
                      $scope.bill.totalcart = total;
$scope.bill.discount = total > $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'un d'entre eux change, vous disposez de deux options de base :

Surveiller la valeur de la concaténation de ces propriétés

Mettez-les dans un tableau ou un objet et transmettez une valeur au paramètre deepWatch

Instructions respectivement :

Dans le premier cas, s'il y a un objet choses dans votre portée, il a deux propriétés a et b. Lorsque ces deux propriétés changent, la fonction callMe() doit être exécutée. Vous pouvez surveiller ces deux propriétés en même temps. $scope.$watch('things.a Things.b',callMe(...));
Lorsque la liste est très longue, vous devez écrire une fonction pour renvoyer la valeur concaténée.

Dans le deuxième cas, vous devez surveiller toutes les propriétés de l'objet choses. Vous pouvez faire ceci :

Copier le code Le code est le suivant :

$scope.$watch('things',callMe(...),true);

Utiliser des modules pour organiser les dépendances

provider(name,Object OR constructor()) Description : Un service configurable qui crée des comparaisons logiques complexes. Si vous transmettez un objet en paramètre, alors l'objet Objet doit avoir une fonction nommée $get, qui doit renvoyer le nom du service. Sinon, angulairejs pensera que ce que vous transmettez est un constructeur, et l'appel du constructeur renverra l'objet d'instance de service.

factory(name,$get Function()) Description : Service non configurable, la logique de création est relativement compliquée. Vous devez spécifier une fonction qui, lorsqu'elle est appelée, renverra l'instance de service. Il peut être vu comme fournisseur(name,{$get:$getFunction()}).
service(name,constructor()) Un service non configurable, la création d'une logique est relativement simple. Semblable au paramètre constructeur de la fonction fournisseur ci-dessus, Angular peut créer une instance de service en l'appelant.

Exemple d'utilisation de module factory

Copier le code Le code est le suivant :

Boutique !!

   
        {{item.title}}
        {{item.description}}
        {{item.price | devise}}
   

引入第三方模块

在大多数应用中，创建供所有代码使用的单个模块，并把所有依赖的东西放入这个模块中，这样就会工作的很好。但是，如果你打算使用第三方包提供的服务或者指令，他们一般都带有自己的模块，你需要在应用模块中定义依赖关心才能引用他们。

var appMod = angulaire.module('app',['Snazzy','Super']);

关于filtre的例子

复制代码 代码如下 :

{{pageHeading | titleCase}}