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.
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()
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.
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
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
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);