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:
Un modèle d’architecture AngularJS Nul besoin de le présenter, AngularJS le frameword développé par Google est au cœur de bien des sujets et ouvre aux développeurs de nouvelles possibilités de s’amuser. Pour vous rafraîchir la mémoire, sur Angular, n’hésitez pas… Au delà d’un tutoriel classique, je vous propose de mettre en place une architecture basée sur le MVVM (Model View ViewModel) à l’instar du MVC (Model View Controler) qui est plus souvent utilisé. Le Model View ViewModel (MVVM) « Le Modèle-Vue-VueModèle (en abrégé MVVM, de l’anglais Model View ViewModel) est une architecture et une méthode de conception utilisée dans le génie logiciel. MVVM est originaire de Microsoft et adapté pour le développement des applications basées sur les technologies Windows Presentation Foundation et Silverlight via l’outil MVVM Light par exemple. Pour vulgariser, la différence entre MVVM et MVC tient du fait que le MVVM, lui, se repose sur le DataBading et l’évènementiel. MVVM sans AngularJs « MVC vs MVVM vs MVP.
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()
AngularJS : Tour d’horizon d’un framework en plein essor Créé par Miko Hevery en 2009, le framework JS de Google ne cesse de monter en popularité. Comment fonctionne ce Framework ? Quels sont ses avantages et inconvénients par rapport à ses concurrents ? C’est à ces questions que nous essayerons de répondre via ce petit tour d’horizon. 1. AngularJS est un Framework JavaScript de Google créé par Miko Hevery en 2009. Ce Framework, basé sur une infrastructure MVC et MVVM (Model View View Model) grâce au data-binding, utilise un système de templating permettant d’étendre le HTML. 2. Le data-binding est l’une des fortes particularités d’AngularJS. On parle de MVVM chez AngularJS, car l’ensemble des actions touchant le contrôleur est séparé des actions effectuées par le modèle et la vue. AngularJS est basé sur le principe MVC (Modèle View Controller). Voici un petit schéma du MVVM afin de vous éclairer : B. 1.1 Le concept de base AngularJS dispose d’un ensemble de directives intégrées, pouvant couvrir la majeure partie de nos besoins. 3. B. 4. 5.
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
Apprendre Angular en un jour, le guide ultime - Tinci Qu’est-ce qu’AngularJS ? Angular est un framework MVC / MVVM côté client, développé en JavaScript, ce qui est obligatoire pour créer une application moderne à page unique (ou même un site internet). C’est un grand bond vers le futur de HTML et vers ce que HTML5 apporte. C’est également un grand bol d’air frais dans le monde des applications web modernes. Cet article est une vue de bout en bout, issue de mon expérience, et contient des conseils et astuces glanés au travers de mon utilisation d’Angular. Terminologie Angular a une courbe d’apprentissage assez courte qui consiste principalement à appréhender la terminologie et la “pensée MVC”. Vous avez probablement déjà entendu parler de MVC. Modèle Structure de données représentant une entité de l’application, généralement transmise en JSON. Vous pouvez accéder à cette information de deux façons. Vue La vue est simple, c’est votre HTML et / ou la sortie générée. Contrôleur Comme son nom l’indique, cette couche contrôle des choses. Contrôleurs
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