Share
AngularJS est un excellent framework JavaScript doté de fonctionnalités très attrayantes non seulement pour les développeurs, mais également pour les concepteurs! Dans ce tutoriel, nous aborderons ce que je considère comme les fonctionnalités les plus essentielles et comment elles peuvent contribuer à rendre votre prochaine application Web géniale..
Pour avoir une idée de ce que vous pouvez faire avec AngularJS, consultez la gamme d’articles AngularJS sur Envato Market. Vous pouvez trouver un appareil de découpe d'image, une application Web de commerce électronique, un éditeur JSON et bien plus encore..
Articles AngularJS sur le marché Envato AngularJS est une nouvelle technologie puissante, côté client, qui permet d'accomplir des tâches vraiment puissantes d'une manière qui englobe et étend le HTML, le CSS et le JavaScript, tout en corrigeant certaines de ses carences flagrantes. C'est ce que HTML aurait été s'il avait été construit pour un contenu dynamique.
Dans cet article, nous aborderons quelques-uns des concepts les plus importants d’AngularJS afin d’obtenir une «vue d’ensemble». Mon objectif est qu'après avoir vu certaines de ces fonctionnalités, vous serez assez enthousiaste pour construire quelque chose d'amusant avec AngularJS..
Pensez à votre modèle comme source de vérité unique pour votre application. Votre modèle est l'endroit où vous allez lire ou mettre à jour tout ce qui se trouve dans votre application..
La liaison de données est probablement la fonctionnalité la plus cool et la plus utile d’AngularJS. Cela vous évitera d'écrire une quantité considérable de code standard. Une application Web typique peut contenir jusqu'à 80% de sa base de code, dédiée à la navigation, à la manipulation et à l'écoute du DOM. La liaison de données fait disparaître ce code, vous permettant ainsi de vous concentrer sur votre application.
Pensez à votre modèle comme source de vérité unique pour votre application. Votre modèle est l'endroit où vous allez lire ou mettre à jour tout ce qui se trouve dans votre application. Les directives de liaison de données fournissent une projection de votre modèle dans la vue de l'application. Cette projection est transparente et se fait sans aucun effort de votre part.
Généralement, lorsque le modèle change, le développeur est responsable de la manipulation manuelle des éléments et attributs DOM pour refléter ces modifications. C'est une rue à double sens. Dans un sens, les modifications de modèle entraînent des modifications dans les éléments DOM. Dans l’autre, les modifications des éléments DOM nécessitent des modifications dans le modèle. Cela est encore compliqué par l’interaction de l’utilisateur, car le développeur est alors responsable de l’interprétation des interactions, de leur fusion dans un modèle et de la mise à jour de la vue. Il s'agit d'un processus très manuel et fastidieux, qui devient difficile à contrôler, à mesure qu'une application grandit en taille et en complexité..
Il doit y avoir un meilleur moyen! La liaison de données bidirectionnelle d’AngularJS gère la synchronisation entre le DOM et le modèle, et inversement.
Voici un exemple simple, qui montre comment lier une valeur d'entrée à un élément.
Bonjour, yourName!
C’est extrêmement simple à mettre en place et presque magique…
Il est important de réaliser qu’à aucun moment AngularJS ne manipule le modèle en tant que chaîne. C'est tout le navigateur DOM.
Dans AngularJS, un modèle est simplement du vieux HTML. Le vocabulaire HTML est étendu pour contenir des instructions sur la manière dont le modèle doit être projeté dans la vue..
Les modèles HTML sont analysés par le navigateur dans le DOM. Le DOM devient alors l’entrée du compilateur AngularJS. AngularJS traverse le modèle DOM pour les instructions de rendu, appelées directives. Ensemble, les directives sont responsables de la configuration de la liaison de données pour votre vue d'application..
Il est important de réaliser qu’à aucun moment AngularJS ne manipule le modèle en tant que chaîne. AngularJS est l’entrée du navigateur DOM et non d’une chaîne HTML. Les liaisons de données sont des transformations DOM, pas des concaténations de chaînes ou innerHTML changements. Utiliser le DOM comme entrée, plutôt que des chaînes, constitue la plus grande différence que AngularJS distingue de ses frameworks frères. L'utilisation du DOM est ce qui vous permet d'étendre le vocabulaire des directives et de construire vos propres directives, voire de les résumer en composants réutilisables.!
L'un des principaux avantages de cette approche est qu'elle crée un flux de travail étroit entre les concepteurs et les développeurs. Les concepteurs peuvent marquer leur code HTML comme ils le feraient normalement, puis les développeurs prennent le relais et accrochent les fonctionnalités, via des liaisons, avec très peu d'effort..
Voici un exemple où j'utilise le ng-répéter directive de boucler sur la images tableau et peupler ce qui est essentiellement un img modèle.
fonction AlbumCtrl ($ scope) scope.images = ["vignette": "img / image_01.png", "description": "description de l'image 01", "vignette": "img / image_02.png", " description ":" Image 02 description ", " thumbnail ":" img / image_03.png "," description ":" Image 03 description ", " thumbnail ":" img / image_04.png "," description " : "Description de l'image 04", "vignette": "img / image_05.png", "description": "description de l'image 05"]];
Il convient également de noter, en guise de remarque, qu'AngularJS ne vous oblige pas à apprendre une nouvelle syntaxe ni à extraire vos modèles de votre application..
AngularJS intègre les principes de base du modèle de conception de logiciel MVC d'origine dans la manière dont il crée des applications Web côté client..
Le modèle MVC ou modèle-vue-contrôleur signifie beaucoup de choses différentes pour différentes personnes. AngularJS n'implémente pas MVC au sens traditionnel, mais plutôt quelque chose de plus proche de MVVM (Model-View-ViewModel).
le modèle est simplement les données dans l'application. le modèle est tout simplement vieux objets JavaScript. Il n'est pas nécessaire d'hériter des classes d'infrastructure, de l'envelopper dans des objets proxy ou d'utiliser des méthodes spéciales getter / setter pour y accéder. Le fait que nous ayons affaire à du JavaScript en mode vanille est une fonctionnalité vraiment intéressante, qui réduit les performances de l'application..
UNE modèle de vue est un objet qui fournit des données et des méthodes spécifiques pour gérer des vues spécifiques.
le modèle de vue est le $ scope objet qui vit dans l'application AngularJS. $ scope est juste un simple objet JavaScript avec une petite API conçue pour détecter et diffuser les modifications apportées à son état.
le manette est responsable de la configuration de l'état initial et de l'augmentation $ scope avec des méthodes pour contrôler le comportement. Il est à noter que le manette ne stocke pas l'état et n'interagit pas avec les services distants.
le vue est le code HTML qui existe après qu'AngularJS a analysé et compilé le code HTML afin d'inclure le balisage et les liaisons rendus.
Cette division crée une base solide pour l'architecture de votre application. le $ scope a une référence aux données, le manette définit le comportement, et le vue gère la mise en page et la transmission de l'interaction au manette répondre en conséquence.
AngularJS possède un sous-système d'injection de dépendance intégré qui aide le développeur en facilitant le développement, la compréhension et le test de l'application..
L'injection de dépendance (DI) vous permet de demander vos dépendances, plutôt que d'avoir à aller les chercher ou les créer vous-même. Pensez-y comme une façon de dire "Hé, j'ai besoin de X", et le DI est responsable de le créer et de vous le fournir.
Pour avoir accès aux services de base AngularJS, il suffit simplement d’ajouter ce service en tant que paramètre; AngularJS détectera que vous avez besoin de ce service et vous fournira une instance..
function EditCtrl ($ scope, $ location, $ routeParams) // Quelque chose d'intelligent ici…
Vous pouvez également définir vos propres services personnalisés et les rendre disponibles pour l'injection..
Accentsconagua
angulaire. module ('MyServiceModule', []). factory ('notify', ['$ fenêtre', fonction (gagnant) fonction de retour (msg) win.alert (msg);;]); function myController (scope, notifyService) scope.callNotify = fonction (msg) notifyService (msg); ; myController. $ inject = ['$ scope', 'notify']; Les directives sont ma caractéristique préférée d’AngularJS. Avez-vous déjà souhaité que votre navigateur fasse de nouvelles astuces pour vous? Eh bien maintenant ça peut! C'est l'une de mes parties préférées de AngularJS. C’est aussi probablement l’aspect le plus difficile d’AngularJS.
Les directives peuvent être utilisées pour créer des balises HTML personnalisées qui servent de nouveaux widgets personnalisés. Ils peuvent également être utilisés pour "décorer" les éléments avec le comportement et manipuler les attributs DOM de manière intéressante.
Voici un exemple simple de directive qui écoute un événement et met à jour son $ scope, en conséquence.
myModule.directive ('myComponent', fonction (mySharedService) return restreindre: 'E', contrôleur: fonction ($ scope, $ attrs, mySharedService) $ scope. $ on ('handleBroadcast', fonction () $ scope .message = 'Directive:' + mySharedService.message;);, remplacez: true, template: ''; ); Ensuite, vous pouvez utiliser cette directive personnalisée, comme si.
La création de votre application en tant que composition de composants discrets facilite considérablement l'ajout, la mise à jour ou la suppression de fonctionnalités, selon les besoins..
L’équipe AngularJS est convaincue que tout code écrit en JavaScript doit être accompagné d’un ensemble de tests rigoureux. Ils ont conçu AngularJS dans un souci de testabilité, de sorte que le test de vos applications AngularJS soit aussi simple que possible. Donc, il n'y a aucune excuse pour ne pas le faire.
Étant donné que JavaScript est dynamique et interprété plutôt que compilé, il est extrêmement important que les développeurs adoptent un état d'esprit discipliné pour l'écriture de tests..
AngularJS est entièrement écrit pour pouvoir être testé. Il vient même avec une configuration de coureur de test de bout en bout et unitaire. Si vous souhaitez voir cela en action, consultez le projet angular-seed à l'adresse https://github.com/angular/angular-seed..
Une fois que vous avez le projet de démarrage, c’est très facile d’exécuter les tests. Voici à quoi ressemble la sortie:
La documentation de l'API regorge de tests de bout en bout qui illustrent incroyablement le fonctionnement d'une partie du framework. Après un moment, je me suis retrouvé à passer aux tests pour voir comment quelque chose fonctionnait, et ensuite peut-être lire le reste de la documentation pour comprendre quelque chose.
Nous avons présenté six des nombreuses fonctionnalités d’AngularJS que j’aime. Je crois que ces six fonctionnalités sont essentielles pour non seulement utiliser AngularJS, mais également pour assembler votre application de manière à ce qu'elle soit maintenable et extensible..
Le site Web pour AngularJS, http://angularjs.org, contient de nombreux exemples de travail et une excellente documentation. Je recommande également de consulter la fantastique communauté sur la liste de diffusion AngularJS.
Laissez-moi savoir ce que vous pensez!
