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:
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()
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
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
TypeScript: langage de transition vers le futur JavaScript Ce nouveau langage de Microsoft permet de disposer des possibilités de ECMAScript 6 et 7 maintenant, sans attendre leur implémentation dans les navigateurs. C'est le premier langage de programmation dont l'usage se veut temporaire. Du fait d'une syntaxe similaire à celle de JavaScript et parce qu'il est compilé dans ce langage, il sera possible, une fois que les fonctions additionnelles qu'il apporte seront toutes implémentées par les interpréteurs, de remplacer le code TypeScript par un code JavaScript. Généré par le premier ou repris tel quel. TypeScript est utilisé en production avec des retours toujours positifs, car il améliore beaucoup le productivité, et on n'a jamais envie de revenir à JavaScript. Le compilateur est open source sous licence Apache et construit avec Node.js et Jake, une sorte de Make, conçu pour les projets JavaScript, où les makefiles sont remplacés par des jakefiles. Le playground montre comment le code TypeScript devient du JavaScript Les types statiques
AngularJS apprendre à utiliser angular js de Google Angular JS c'est quoi? AngularJS est un framework écrit en javascript par Google libre et open-source qui permet d'améliorer, au même titre que JQUERY, la syntaxe de javascript ainsi que la productivité du développeur. Angular en basé sur la logique MVC. (modèle vue controller). Crée en 2009 par Google ce framewok est devenu incontournable pour les applications web. AngularJS utilise jQuery mais vous n'êtes pas obligé de comprendre jquery pour utiliser AngluarJS. Pourquoi utiliser AngularJS AngularJS n'est pas juste une library qui propose de nouvelles fonctionnalités mais est un framework puissant et facile à prendre en main qui encadre le développeur tout en proposant une manière propre de programmer avec une logique MVC. L'une des principales raisons d'utiliser AngularJS c'est de pouvoir construire un projet en gardant à l'esprit les tests. Installer AngularJS Pour pouvoir utiliser angularjs, il vous suffit d'intégrer ce code entre les balises HEAD de votre page HTML: Vue et template <! <! .
Apprendre les bases d'angularJS