1. Début
Angular JS est un ensemble de cadres, de modèles, de liaison des données et de composants d'interface utilisateur riches utilisés pour développer des pages Web. Il fournit l'architecture des applications Web sans opérations manuelles DOM. AngularJS est très petit, seulement 60k, compatible avec les navigateurs grand public, et fonctionne bien avec jQuery.
2. Comprendre les principes de base
① Quelques présentations à Angular
1. Connaissances de base
1.Angular a abandonné IE8
2. Les quatre points principaux sont MVC, la modularité, le système d'instructions et la liaison des données bidirectionnelle
2. Quelques principes
1. Ne réutilisez pas le contrôleur. Un contrôleur n'est généralement responsable que d'un petit morceau de vue.
2. Ne faites pas fonctionner DOM dans le contrôleur.
3. Ne formatez pas les données dans Controllerller, NG a de bons contrôles de formulaire.
4. Ne faites pas d'opérations de filtrage de données dans le contrôleur, il y a un service de filtre $.
5. D'une manière générale, les contrôleurs ne s'appelleront pas et l'interaction entre les contrôleurs sera effectuée par le biais d'événements.
6.Angulaire utilise des instructions pour réutiliser la vue.
7. $ Scope est une structure d'arbre parallèle à la balise DOM.
8. L'objet de portée de l'enfant $ héritera des propriétés et des méthodes sur la portée du parent $.
9. Chaque application angulaire n'a qu'un seul objet Rootscope $. (Généralement situé sur NG-App).
10. Vous pouvez utiliser Angular.Element (0 $) .scope () pour déboguer.
11. Utilisez Ngoute pour le routage entre les vues.
3. Les instructions intégrées angulaires les plus couramment utilisées et les plus pratiques pour les pages HTML
①.ng-classe (adapté aux situations où un certain style tel que les goûts et l'attention changera en raison d'une certaine opération)
La directive de classe NG est utilisée pour lier dynamiquement une ou plusieurs classes CSS aux éléments HTML. La valeur de la directive de classe NG peut être une chaîne, un objet ou un tableau.
S'il s'agit d'une chaîne, plusieurs noms de classe sont séparés par des espaces.
S'il s'agit d'un objet, vous devez utiliser une paire de valeurs clés, qui est une valeur booléenne, et la valeur est le nom de classe que vous souhaitez ajouter. La classe ne sera ajoutée que si la clé est vraie.
S'il s'agit d'un tableau, il peut être composé de chaînes ou de combinaisons d'objets, et les éléments du tableau peuvent être des chaînes ou des objets.
Deux façons de l'utiliser recommandées:
1. Dans la forme d'une chaîne, le code est le suivant:
<i ng-class = "{true: 'ion-ios-heart', false: 'ion-ios-heart-outline'} [accountInfo.isfocus]" ng-Click = 'wetherfocus ()'> </i>Cela signifie que la balise I a une icône de classe de base, Ng-Class, qui lie une classe dynamique. La valeur de cette classe est déterminée par la question de savoir si le accounfo.isfocus est vrai ou faux. Si sa valeur est vraie, la balise I ajoutera la classe ion-ios-heart. Si sa valeur est fausse, la balise I ajoutera la ligne ion-ios-heart-out-out. Si sa valeur est fausse, la balise I ajoutera la ligne ion-ios-heart-out-out.
Cette catégorie. La balise I lie également un événement NG-Click. En plus de gérer la logique correspondante, la valeur de AccountInfo.isfocus est également déterminée. De cette façon, lorsqu'une opération de clic se produit, la classe correspondante de la balise I sera naturellement modifiée, puis différents styles seront affichés.
2. Le style de valeur clé, le code est le suivant:
<i ng-class = "{'ion-ios-heart': isios, 'ion-android-heart': isAndroid}"> </i>De toute évidence, à partir du code, nous pouvons voir que ce sens est que lorsque ISIOS est vrai, la classe ion-ios-heart sera prise, et lorsque la valeur isAndroid est vraie, la classe ion-android-heart sera prise.
②.ng-show et ng-hide (adapté pour afficher deux contenus différents pour des situations différentes)
La directive NG-show affiche l'élément HTML spécifié lorsque l'expression est vraie, sinon masque l'élément HTML spécifié.
La directive Ng-Hide masque l'élément HTML spécifié lorsque l'expression est vraie, sinon l'élément HTML spécifié s'affiche.
Haha, ça ressemble à un frère incompatible avec l'eau et le feu. . . .
Les exemples sont les suivants:
<div> <span ng-Click = "toggleMenu ()"> </span> </div> <div> <ul ng-show = "Menustate"> ... </ul> <div ng-hide = "Menustate"> ... </div>
Définissez une variable booléenne de la méstate (dans le développement réel, vous pouvez utiliser des expressions, des équations de trilogie, etc.). Lorsqu'il est vrai, le contenu de NG-show sera affiché et le contenu de Ng-Hide sera caché. Sinon, l'inverse est vrai. . .
③.ng-switch (adapté pour afficher différents contenus dans plusieurs situations)
La directive Ng-Switch affiche ou masque la partie correspondante en fonction de l'expression.
Les éléments enfants correspondants utilisent la directive Ng-Switch-When. Si le match est sélectionné, sélectionnez l'écran et les autres sont supprimés.
En définissant les options par défaut à l'aide de la directive Ng-Switch-Default, les options par défaut seront affichées si aucune ne correspond.
exemple:
<div ng-switch = "EssayType"> <div ng-switch-when = "4"> ..... </v> <div ng-switch-when = "3"> ... </v> <div ng-switch-when = "1"> ... </ div-switch-Decault-when = "2"> </v> <div ng-switch-disfault> ...
④.
La directive du modèle Ng lie les éléments de forme HTML dans la variable de portée.
S'il n'y a pas de variable dans la portée, elle sera créée. Le modèle NG est couramment utilisé dans <fort>, <lector>, <TextArea> et d'autres éléments.
Le code suivant:
<div> <textarea name = "my-massage-detail" ng-model = "contenu" placeholder = "s'il vous plaît entrez un message"> </ textarea> <ang-click = "soumises ()"> soumettre </a> <br> </div>
Par définition, théoriquement parlant, lorsque nous nous soumettons, il est acceptable d'obtenir directement la valeur du modèle NG défini sur la page du contrôleur. Mais en fait, ce n'est pas possible. Des tests personnels ont révélé qu'une sortie non définie était sortie, et si la valeur initiale du modèle NG est définie dans le contrôleur, la valeur initiale est obtenue au lieu de la dernière valeur après avoir changé.
J'ai recherché des informations, ce qui le signifie à peu près. Angular limite certaines de nos définitions. Nous ne pouvons utiliser qu'un objet non primitif pour transmettre des paramètres.
Qu'est-ce que ça veut dire? Un petit changement dans l'exemple ci-dessus, comme suit:
Code html:
<div> <textarea name = "my-massage-detail" ng-model = "modèle.content" placeholder = "Veuillez entrer un message"> </ textarea> <ang-click = "soumises ()"> soumettre </a> </div>
Code du contrôleur:
$ scope.model = {}; $ scope.model.content = ''; $ scope.sumitmes = function () {console.log ($ scope.model.content);}Autrement dit, nous définissons un objet, puis définissons le modèle Ng comme une propriété de cet objet pour le gérer. De cette façon, nous obtenons la dernière valeur du modèle NG.
Un autre moyen simple consiste à simplement passer le modèle NG comme paramètre.
Les exemples sont les suivants:
// Html Code <input type = "text" ng-model = "code"> <bouton ng-click = "setCode (code)"> Login </ Button> <br> // Contrôleur Code $ scope.setcode = function (code) {alert (code);}4. Compétences pratiques pour l'interaction des données
Utilisation de promesse
ES6 définit l'objet Promise. Cet objet est très utile, surtout lors de l'interaction avec l'arrière-plan. Il empêche non seulement les rappels d'être trop profonds, mais peut également être géré uniformément pour certaines situations, et améliore également la lisibilité du code. Un tel service est également encapsulé dans AngularJS, qui est $ q.
$ q existe en tant que service d'AngularJS et n'est qu'une implémentation simplifiée du mode de programmation Asynchrones Promise. L'objet de différence (objet de retard) peut être obtenu via $ q.defer (). Il existe trois méthodes pour cet objet:
Resolve (valeur): Envoyez un message à l'organisme d'exécution asynchrone de l'objet Promise et lui dit que j'ai terminé avec succès la tâche, et la valeur est le message envoyé.
Rejeter (Valeur): Envoyez un message à l'organisme d'exécution asynchrone de l'objet Promise et lui dit qu'il m'est impossible de terminer cette tâche. La valeur est le message envoyé.
Notifier (Valeur): Envoyez un message à l'organisme d'exécution asynchrone de l'objet Promise pour lui dire l'achèvement de la tâche actuel. La valeur est le message envoyé.
Après avoir envoyé ces messages, la fonction de rappel existante sera appelée.
La promesse est l'objet de promesse avec cet objet de report. Promesse objet peut être obtenu par le biais de reproduction, certaines méthodes d'objet de promesse:
Puis (successCallback, errorCallback, notifyCallback): les paramètres sont des fonctions de rappel différentes sous différents messages. Defer envoie différents messages pour exécuter différentes fonctions de rappel. Les messages sont passés sous forme de paramètres de ces fonctions de rappel. La valeur de retour est de retour à un objet de promesse qui existe à l'appui des appels de chaîne. Lorsque le premier objet de déférer envoie un message, l'objet de différence correspondant de la promesse suivante enverra également un message, mais les messages envoyés sont différents. Peu importe si le premier objet de report envoie le rejet ou la résolution, le second et ultérieurement sont envoyés résolus et le message est passable.
Catch (errorCallback): puis (null, errorCallback).
Enfin (rappel): équivalent à l'abréviation de alors (rappel, rappel). La méthode en ne accepte enfin pas les paramètres, mais peut passer avec succès le type de message et de message envoyé par report à la suivante.
Defer (): Utilisé pour générer un objet delage var defer = $ q.defer ();
rejeter (): le paramètre reçoit un message d'erreur, ce qui équivaut à lancer une exception dans la fonction de rappel, puis à appeler la mauvaise fonction de rappel dans le suivant.
all (): le paramètre est reçu en tant que tableau de promesse et un nouvel objet de promesse unique est renvoyé. Lorsque tous les objets de différence correspondants de ces objets de promesse sont résolus, cet seul objet Promise sera résolu. Lorsque l'un de ces objets de promesse est rejeté, cette seule promesse est également rejetée.
Quand (): reçoit le premier paramètre en tant que valeur arbitraire ou objet de promesse, et les 3 autres puis méthodes de la même promesse, et la valeur de retour est un objet de promesse. Si le premier paramètre n'est pas un objet Promise, le rappel de réussite sera exécuté directement et le message est cet objet. S'il s'agit d'une promesse, la promesse retournée est en fait un emballage pour l'argument de ce type de promesse. Le message envoyé par le report correspondant à la promesse entrante sera reçu par l'objet Promise renvoyé par notre fonction.
L'utilisation spécifique est la suivante:
Dans Angular, définissez un service spécifiquement pour l'interaction.
get: function (url, options) {<br> var deferred = $ q.defer (); <br> showtip (); $ http.get (URL, options) .success (fonction (data) {hidetip (); if (data.success) {Deferred.Resolve (data);} else {Deferred.reject (data.sessage);}}). Erreur (données) {HidePip (); deferred.reject. Deferred.Promis;} // L'appel dans le contrôleur get ('url', params) .then (function (data) {// voici SuccessCallback}, fonction (données) {// voici ErrorCallback});De cette façon, nous pouvons définir des invites uniformément lorsque chaque demande est émise, puis masquer ces invites une fois la demande terminée. Dans ce code, la signification générale est que lorsque la demande est réussie, Resolve (données) sera appelée pour définir le statut sur le succès, de sorte que la première fonction dans ensuite sera automatiquement exécutée, à savoir SuccessCallback, et les données de données demandées seront adoptées.
Ce qui précède est les compétences pratiques de développement d'AngularJs que l'éditeur vous a introduits. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!