Angular 1: les directives | Nouvelles Chroniques d'Amethyste Après les services, le binding et les routes, les directives sont le dernier grand pilier de l’architecture Angular. Partons à leur découverte ce qui clôturera ma série de tutoriel Angular 1 avant d’attaquer Angular 2. Pour des raisons que j’ignore, la majorité des exemples que je trouve sur le net sont, me semble t’il, très compliqués. Je préfère nettement faire 10 démos très simples, plutôt qu’une seule qui démontre 10 concepts en même temps. Alors c’est quoi? Les sites modernes ne se contentent plus d’utiliser HTML comme un langage statique de description de pages. En attendant l’arrivée future des Web Component, les directives Angular fournissent une alternative qui a le mérite de fonctionner pour tous les navigateurs ou presque. De façon très simple, les directives sont un outil pour étendre les fonctionnalités d’HTML. Dans Angular, tout commence par une fonction et une directive est une fonction introduite avec la méthode directive(). Le code HTML est le suivant: Et il s’affiche: Donc:
FrAngular : AngularJS en français Votre premier module AngularJS | Tutoriel AngularJS Spécifier le contrôleur Avant tout, on déclare notre contrôleur, comme on l'a vu au chapitre précédent, avec son nom et ses dépendances. Ici, il ne dépend que du service $scope. todoList.controller('todoCtrl', ['$scope', function ($scope) { var todos = $scope.todos = []; }]); J'ai profité de cette initialisation pour faire correspondre la variable todos à la variable $scope.todos. Vous remarquerez à ce propos, qu'on se contente d'appeler le service $scope pour manipuler LE scope de notre contrôleur et uniquement celui-là. Attention à ne pas confondre le service $scope et UN scope comme par exemple celui du contrôleur ou encore celui de ng-repeat. Ajouter un todo Ensuite, on implémente la fonction qui permet d'ajouter un todo : Quelques remarques sur cette fonction : Déclaration dela fonction À la ligne 30, on déclare bien la fonction comme une propriété du scope du contrôleur. Ajout du todo Two-Way DataBinding Et oui, encore lui :) . Les todos enregistrés markAll(completed) clearCompletedTodos()
Scope isolé dans les directives AngularJS Second sujet que j'ai traité au Meetup chez Google, il s'agit des scopes isolés dans les directives. Les slides se trouvent ici, et une vidéo a été mise en ligne là ; mon intervention commence par un sujet sur l'usage des services, et celui-ci est à la suite. Le scope isolé est un outil bien pratique mis à notre disposition par AngularJS pour faciliter la création de widgets. Mais il ne faut pas l'utiliser n'importe quand, ni en faire n'importe quoi. L'arbre des scopes Les scopes d'AngularJS sont des objets qui servent de contexte d'évaluation des expressions contenues dans les templates. Ils forment un arbre, dont la racine est le seul scope de l'application qui est aussi publié comme un service, sous le nom $rootScope. La structure arborescente des scopes est calquée sur celle des éléments de la page HTML. Quand une directive crée un scope sur un élément HTML, ce scope aura pour parent le premier scope rencontré en remontant les éléments HTML. Scope d'un élément @ : attribut texte et attrs.
Le routage | Tutoriel AngularJS Organisation Avant de créer tout plein de templates et de contrôleurs, voyons comment organiser nos fichiers. Le but est de pouvoir facilement s'y retrouver tout en évitant la duplication de code. Je vous propose donc cette arborescence très simple mais bien adaptée pour les petits projets comme le nôtre (je vous rappelle qu'ici on fait une application qui n'a que 2 vues) : routeApp/ ├── index.html ├── js/ │ ├── script.js │ └── vendor/ │ ├── angular.js │ └── angular-route.js ├── partials/ │ ├── home.html │ └── contact.html └── web/ ├── css/ │ ├── style.css │ └── style.min.css └── img/ ├── logo.png ├── favicon.ico └── ... Je ne pense pas qu'il y ait besoin de beaucoup d'explications. La directive ngView Comme on l'a vu, on va donc faire un layout qui sera le même pour toutes nos (2) pages, le fichier index.html. <! On peut donc profiter du fait que le layout sera repris par toutes les pages pour y mettre un (tout) petit menu par exemple : <! Configurer le routeur Le path La route Écrire nos pages
Introduction à AngularJS | Tutoriel AngularJS Pour comprendre comment fonctionne AngularJS, il est essentiel d'avoir les idées claires à propos de quelques points propres au développement web. Cette section en fait un rapide tour d'horizon. Front-end & back-end Front-end C'est la partie visible d'un site web. Autrement dit, tout ce que le visiteur télécharge depuis le serveur lorsqu'il charge une page. Back-end C'est la logique de l'application, autrement dit la partie du code qui est exécutée sur le serveur lorsqu'une requête est reçue. Qu'est-ce qu'un framework ? Un framework est un ensemble cohérent de composants logiciels, autrement dit, un ensemble de fonctions, méthodes, objets, etc... mais aussi avec une logique propre permettant de développer rapidement une application. Bien entendu, si vous avez déjà travaillé avec un framework, vous ne serez pas déboussolé par AngularJS. Vous n'écrirez plus votre code de façon désordonnée, mais vous aurez une véritable structure propre et lisible.
Les services AngularJS - Angular-js.fr Les services AngularJS permettent de partager du code dans toute votre application, grâce à ce que l’on appelle l’injection de dépendances. AngularJS propose un grand nombre de services (et providers) prêts à l’emploi. Ceux-ci sont précédés du symbole $. En voici quelques exemples : $timeout$http$compile Si vous débutez sur AngularJS, et avant d’utiliser une méthode fournie par jQuery (au hasard), demandez vous toujours si le framework ne propose pas une solution. Les services AngularJS sont : Lazily instantiated, c’est-à-dire instanciés que quand on en a besoinDes singletons, c’est-à-dire qu’ils ne sont instanciés qu’une seule fois (et non une fois par importation) Voici quelques exemples d’utilisation : Récupérer des données via requêtes Ajax (au lieu de le faire un peu partout dans les contrôleurs)Regrouper des fonctions « utilities » qui peuvent être utiles un peu partout dans votre applicationDéfinir les paramètres de votre application (ex: mode développement/production …) index.html
L'API Promise d'AngularJS Les services standards d'AngularJS $timeout et surtout $http renvoient tous deux des promises, qui sont très pratiques pour gérer des opérations asynchrones. Cette notion de promise existe dans d'autres frameworks, comme jQuery, et AngularJS intègre une implémentation de cette API. Elle peut être utilisée par les développeurs dans l'écriture des leurs propres services pour simplifier la gestion des actions asynchrones. C'est très important de bien comprendre comment fonctionne cette API, qui est probablement la partie la plus ardue d'AngularJS, pour tirer profit de toute la puissance du service $http, et pour gérer facilement les enchaînements d'opérations asynchrones dans une application. Décrire en français le fonctionnement de l'API de promises ne va pas être simple, car il est difficile de traduire de façon élégante les notions qu'elle recouvre sans s'éloigner des termes anglais utilisés comme noms de méthodes. Qu'est-ce qu'une promise ? Enchaînement de promises $q.reject(reason);
$q A service that helps you run functions asynchronously, and use their return values (or exceptions) when they are done processing. This is a Promises/A+-compliant implementation of promises/deferred objects inspired by Kris Kowal's Q. $q can be used in two fashions --- one which is more similar to Kris Kowal's Q or jQuery's Deferred implementations, and the other which resembles ES6 (ES2015) promises to some degree. The streamlined ES6 style promise is essentially just using $q as a constructor which takes a resolver function as the first argument. While the constructor-style use is supported, not all of the supporting methods from ES6 promises are available yet. It can be used like so: Note: progress/notify callbacks are not currently supported via the ES6-style interface. Note: unlike ES6 behavior, an exception thrown in the constructor function will NOT implicitly reject the promise. However, the more traditional CommonJS-style usage is still available, and documented below. Methods
AngularJS 2.0 changements notables La version 2.0 d’Angular a maintenant été annoncée depuis un moment comme une refonte complète, et en voyant les importants changements entre les 2 versions, on peut dire que nous avons un gros travail de mise à niveau à fournir. Alors autant prendre un peu d’avance ! Cette version 2.0 étant en développement actif, elle change donc beaucoup, mais les développeurs ont fait quelques choix d’orientations que nous pouvons commencer à étudier. Pour ce faire, nous pouvons consulter le site dédié à Angular 2.0, sur lequel on trouve la documentation et quelques exemples et articles. Angular 2.0 et TypeScript Première chose à noter, Google et Microsoft collaborent pour écrire cette version Angular 2.0 avec le langage TypeScript. TypeScript est un langage typé créé par Microsoft qui est un sur-ensemble de ES6. Parmis ces quelques exemples qui nous sont proposés, voici celui du “Hello World”: Ce code défini une classe JavaScript, avec un constructeur qui attend un attribut de type string. index.html:
Devoxx 2016 : Retour sur « D’Angular 1 à Angular 2 : Préparez vous dès maintenant à la migration » | Le blog Sodifrance Netapsys J’ai eu la chance de participer cette année à la 5ème édition du Devoxx France. Je vous propose dans cet article de revenir sur une des conférences que j’ai particulièrement appréciée dont le thème était "D'Angular 1 à Angular 2 : Préparez vous dès maintenant à la migration" présentée par Benoit Lemoine. L’annonce de la sortie d’Angular 2 a été faite en septembre 2014 et cette version 2 n’a pas grand chose à voir avec Angular 1. Cependant, aucun chemin de migration n’a été prévu et cela va provoqué ce qui a été appelé le Angular Bashing ou un rejet d'Angular en 2015. À partir de ce constat, un chemin de migration va être mis en place. Les grandes différences entre Angular 1 et Angular 2 sont les suivantes : Javascript -> TypescriptOrienté Modèle-Vue-* -> Orienté composantDouble databinding -> Databinding presque unidirectionnel Les étapes de migration que présente Benoit Lemoine nécessaires pour gérer ces différences sont les suivantes : Etape n°1 : Suivre les bonnes pratiques