• Principal / Comment

Guide du débutant pour créer des applications Web avec AngularJS

Si vous êtes un développeur JavaScript professionnel, vous en avez probablement entendu parler Ember.js (un framework JavaScript open-source) et Backbone.js (une bibliothèque JavaScript avec une interface JSON RESTful). Mais si vous n'êtes pas familier avec AngularJS Pourtant, vous allez manquer certaines de ses fonctionnalités très convaincantes qui peuvent vraiment améliorer votre HTML pour les applications Web.

Ici, nous vous donnerons un avant-goût d'AngularJS, un framework JavaScript MVW super héroïque, y compris ses fonctionnalités exceptionnelles et le processus de démarrage.

Espérons que cela vous aidera non seulement à développer des applications Web riches bien architecturées et maintenables, mais vous donnera également de solides raisons de choisir AngularJS pour vos projets à venir. Commençons!

01. Qu'est-ce que AngularJS?

AngularJS, construit par Google, est un framework d'application Web open source conçu pour faciliter le développement et les tests frontaux pour les développeurs Web. L'objectif principal d'AngularJS est d'allonger les applications Web avec la capacité MVC (Model – view – controller). Il s'agit d'un framework JavaScript MVC / MVVM côté client qui est entièrement extensible, s'exécute sans dépendances de bibliothèque et fonctionne également très bien avec d'autres bibliothèques. Même, vous pouvez également modifier ou remplacer toutes ses fonctionnalités pour répondre à vos besoins spécifiques.

AngularJS a été développé en 2009 par Adam Abrons et Mi & scaron; ko Heverym, qui étaient ingénieurs de Google à l'époque. Comme mentionné sur le site officiel, il s'agit d'un `` cadre structurel pour les applications Web dynamiques '' qui est le mieux adapté pour créer des applications Web d'une page qui ne nécessitent que JavaScript, CSS et HTML côté client.

Il vous permet d'utiliser HTML comme langage de modèle et vous permet d'élargir la syntaxe du HTML afin d'exprimer les composants de votre application Web de manière nette et concise. AngularJS vous aide à mieux structurer votre code JavaScript et le rend facile à tester, en enseignant au navigateur comment utiliser l'injection de dépendances pour toute technologie de serveur.

Comment utiliser AngularJS

Démarrer avec AngularJS est assez simple. Vous pouvez avoir une application Angular simple en seulement cinq minutes en ajoutant quelques attributs à vos scripts HTML. Ceux-ci sont:

1. Incluez la directive 'ng-app' dans la balise. Cela fera fonctionner AngularJS sur la page, en définissant la page comme une application Angular.

2. Placez la balise Angular au bas de votre page, là où la balise se termine.

3. Ajoutez du HTML standard. Les attributs HTML sont utilisés pour accéder aux directives AngularJS, tandis que l'évaluation des expressions se fait avec une notation à double crochets.

Today's tasks

• {{task.name}}

Ici, la directive ng-controller définit un espace de noms, dans lequel vous pouvez placer votre Angular JS pour contrôler les données et évaluer les expressions dans votre HTML. Alors que la directive ng-repeat est un objet répéteur angulaire, qui demande à Angular de créer des éléments de liste tant que vous avez des tâches à afficher.

Alors que la plupart des frameworks d'aujourd'hui ne sont qu'un ensemble d'outils existants, AngularJS est un framework de nouvelle génération, ayant des fonctionnalités très convaincantes qui sont utiles non seulement pour les développeurs, mais également utiles pour les concepteurs. Voici quelques fonctionnalités incroyables d'AngularJS, qui aideront les développeurs à rendre leurs futures applications Web géniales ...

Directives

Les directives sont l'une des fonctionnalités les plus puissantes et les plus convaincantes d'AngularJS. Ils vous permettent d'étendre votre HTML et sont utilisés par AngularJS pour brancher son action dans la page. Ils vous permettent de spécifier des balises HTML personnalisées et réutilisables, qui peuvent être utilisées pour manipuler les attributs DOM et modérer le comportement d'éléments spécifiques. Toutes les directives sont précédées de ng-, conçues pour être des éléments autonomes séparés de votre application MVC et placées dans des attributs HTML.

Certaines des directives AngularJS notables sont:

• ng-app: cette directive indique à Angular où activer. Pour définir une page en tant qu'application Angular, vous devez utiliser un code simple:.
• ng-bind: Cette directive indique à Angular de changer le contenu du texte d'un élément HTML avec la valeur de l'expression donnée, et de mettre à jour le texte à mesure que la valeur de cette expression change.
• ng-model: il est très similaire à ng-bind, mais lie la vue dans le modèle, ce que d'autres directives comme select, textarea ou input exigent.
• ng-class: permet le chargement dynamique des attributs de classe.
• ng-controller: cette directive vous permet de spécifier une classe de contrôleur JavaScript pour évaluer les expressions HTML.
• ng-repeat: il parcourt sans effort un élément, auquel la variable de boucle donnée est définie, dans une collection.
• ng-hide et ng-show: En utilisant la valeur d'une expression booléenne, cette directive décide si l'élément sera affiché ou non.
• ngIf: C'est une directive de base if qui permet de réinsérer un clone de l'élément compilé dans le DOM, si les conditions sont vraies. Si la condition est fausse, cela supprime l'élément du DOM.

Voici un exemple de directive qui écoute un événement et met à jour sa portée $, en conséquence.

myModule.directive('myComponent', function(mySharedService) { return { restrict: 'E', controller: function($scope, $attrs, mySharedService) { $scope.$on('handleBroadcast', function() { $scope.message = 'Directive: ' + mySharedService.message; }); }, replace: true, template: '' }; });

Cette directive personnalisée peut être utilisée comme suit:

Liaison de données bidirectionnelle

La liaison de données est probablement la caractéristique la plus dominante et la plus notable d'AngularJS. Cela évite aux développeurs d'écrire une quantité considérable de code en réduisant une grande partie de la charge sur le serveur principal. Dans une application Web typique, 80% de la base de code est dédiée à la manipulation, à la traversée et à l'écoute du DOM. La liaison de données rend ce code invisible, vous pouvez donc vous concentrer sur d'autres éléments importants de votre application.

Traditionnellement, la plupart des systèmes de modèles ont une liaison de données unidirectionnelle: ils fusionnent les composants du modèle et du modèle dans une vue. Après la fusion, les modifications apportées au modèle ne sont pas automatiquement reflétées dans la vue. Pour refléter ces changements, le développeur doit manipuler manuellement les éléments et attributs DOM. Ce processus devient plus compliqué et encombrant lorsqu'un utilisateur modifie la vue. Parce que le développeur doit ensuite interpréter les interactions, les fusionner dans le modèle et mettre à jour la vue.

En revanche, AngularJS effectue la liaison de données d'une manière meilleure et différente en gérant la synchronisation des données entre le modèle et le DOM, et vice versa.

Voici un exemple simple, expliquant la liaison d'une valeur d'entrée à un

étiqueter.

Name:

---

Hello, {{yourName}}!

Injection de dépendance

AngularJS dispose d'un sous-système d'injecteur intégré qui permet aux développeurs de développer, comprendre et tester facilement des applications. L'injection de dépendances dans AngularJS est responsable de la création des composants, de la manière dont ils mettent la main sur leurs dépendances et de les rendre disponibles à d'autres composants sur demande.

En utilisant l'injection de dépendances, AngularJS apporte des services traditionnels côté serveur aux applications Web côté client, ce qui réduit la charge sur le backend et rend l'application Web beaucoup plus légère.

Si vous souhaitez accéder aux services AngularJS de base, vous devez ajouter un service particulier en tant que paramètre. AngularJS remarquera automatiquement que vous souhaitez utiliser ce service et rendra une instance disponible pour vous.

function EditCtrl($scope, $location, $routeParams) { // Write something here... }

En plus de cela, vous pouvez définir vos propres services personnalisés et les rendre accessibles à l'injection.

angular. module('MyServiceModule', []). factory('notify', ['$window', function (win) { return function (msg) { win.alert(msg); }; }]); function myController(scope, notifyService) { scope.callNotify = function (msg) { notifyService(msg); }; } myController.$inject = ['$scope', 'notify'];

Modèles

Dans AngularJS, un modèle est écrit avec du HTML qui contient des attributs et des éléments spécifiques à Angular. En combinant le modèle avec les informations du contrôleur et du modèle, AngularJS rend la vue dynamique dans les navigateurs.

Voici les éléments et attributs angulaires qui peuvent être utilisés:

• Filtre: le formatage des données à afficher est effectué par cet élément.
• Contrôles de formulaire: il est utilisé pour la validation des entrées utilisateur.
• Balisage: pour lier des expressions à des éléments, en utilisant la notation à double accolade {{}}.
• Directive: élément ou attribut qui rend un composant DOM réutilisable ou allonge un élément DOM existant.

Le code ci-dessous montre un modèle avec des directives et un balisage:

{{buttonText}}

Dans une application typique, le modèle contient des directives CSS, HTML et Angular dans un seul fichier HTML (généralement index.html).

Essai

Comme JavaScript est dynamique et interprété avec une grande puissance d'expression, il ne nécessite presque aucune aide du compilateur. Par conséquent, l'équipe AngularJS comprend bien que tout code JavaScript doit passer par un ensemble de tests sévères. Ils ont donc conçu AngularJS à partir de zéro pour être testable, ce qui rend le test de vos applications Web aussi simple que possible.

AngularJS tire pleinement parti de l'injection de dépendances, est fourni avec des simulacres et encourage la séparation comportement-vue. Pour les tests de bout en bout, AngularJS dispose d'un testeur de bout en bout, appelé Protractor, qui comprend le fonctionnement interne d'AngularJS pour éliminer la fragilité des tests et simule les interactions des utilisateurs avec votre application.

Un autre type de test dans AngularJS est le test unitaire à travers lequel vous pouvez tester des unités de code individuelles. De plus, l'équipe Angular a également construit une extension Chrome, nommée AngularJS Batarang , qui permet aux développeurs de détecter facilement les goulots d'étranglement des performances et de déboguer leurs applications dans le navigateur.

Ajeet Yadav est un développeur web professionnel, associé à wordpressintegration.com , une société de développement Web réputée qui fournit un service de conversion de thèmes / modèles Photoshop vers WordPress de haute qualité. Suivre @Wordpress_INT sur Twitter.