background preloader

AngularJS

AngularJS
Un article de Wikipédia, l'encyclopédie libre. AngularJS[1] est un framework JavaScript libre et open-source[2] développé par Google. AngularJS est fondé sur l’extension du langage HTML par de nouvelles balises (tags) et attributs pour aboutir à une définition déclarative des pages web, par opposition à l’utilisation systématique de l’élément div​ et à la définition des éléments de présentation en javascript. Le code HTML étendu représente alors la partie « vue » du patron de conception MVC (Modèle-vue-contrôleur) auquel AngularJS adhère, avec des modèles appelé « scopes » et des contrôleurs permettant de définir des actions en code javascript impératif. AngularJS embarque un sous-ensemble de la bibliothèque open source jQuery appelé jQLite, mais peut aussi utiliser jQuery si elle est chargée[3]. Outre le patron logiciel MVC et le code HTML étendu déclaratif, AngularJS est fondé sur un certain nombre de patrons et principes de conception qu’il convient de relever : Related:  AngularJS

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. 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. Mettre en place un projet AngularJS (l’essentiel) Tout d’abord, nous devons mettre en place le minimum vital d’un projet Angular. Contrôleurs Voici le Résultat : <!

Les fondations d'AngularJS | Blog Xebia France La mode est aux frameworks Javascript côté client et, dans ce monde en pleine effervescence, trois frameworks se battent pour la première place: Backbone, EmberJS et Angular. Angular est celui qui a le plus le vent en poupe en ce moment de par sa simplicité d’apprentissage et la richesse de ses fonctionnalités. Chez Xebia, nous sommes plusieurs développeurs à utiliser ce framework sur différents projets. Nous allons donc partager avec vous notre connaissance concrète et nos bonnes pratiques. Dans ce premier article, mon objectif est de vous faire mieux comprendre les fondations d’AngularJS car, si ses tutoriels et ses démos sont toujours impressionnants, beaucoup de personnes bloquent sur les premiers éléments de complexité qui le font apparaître comme magique. En fait la courbe d’apprentissage d’AngularJS est très bien représentée sur cette illustration trouvée sur Internet. Un Framework Modèle Vue Contrôleur Vue et « Two-Way Data Binding » Contrôleur et Modèle Et au runtime :

Mes premiers pas avec AngularJS | Hugeen Ça fait longtemps que je voulais m’y mettre, j’utilise habituellement Backbone pour les besoins similaires. C’est l’occasion d’introduire une nouvelle série d’articles sur ce blog : Mes premiers pas. En parcourant la documentation je me suis rendu compte assez rapidement qu’AngularJS n’a rien à voir avec Backbone, il est beaucoup plus complet et aborde les choses différemment. Mais surtout, AngularJS est magique, on s’approche un peu de l’état d’esprit de Ruby On Rails qui pré-mâche le travail du développeur et bouscule la manière de développer une application web. Pour moi cela signifie 2 choses : Code plus propre et maintenable : Les bonnes pratiques sont accessibles facilement, il suffit de lire les documentations pour produire du code de qualité.Meilleure testabilité : On se focalise sur les choses qui comptent vraiment, AngularJS s’occupe du bas niveau pour nous. Concrètement, comment ça fonctionne ? Petit résumé de la vidéo : Pour l’exemple de la vidéo : Testez par vous-mêmes !. Have fun!

FrAngular : AngularJS en français 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. 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.

Introduction à AngularJS Vous avez très certainement entendu parler d’AngularJS, le framework de Google pour faire des SPA à l’instar de Ember et backbone. AngularJS est un framework JavaScript qui étend le HTML pour le rendre dynamique, et permet de développer ses propres balises et attributs HTML. C’est un framework qui se veut extensible et qui pousse vers un développement structuré, en couches, le but n’étant pas d’ajouter de simples animations au DOM, mais bien d’apporter un aspect applicatif au front-office. Penser son JavaScript avec AngularJS se fait donc différemment : il ne faut pas concevoir sa vue pour la rendre dynamique, mais partir de son application JS pour la créer penser son application JS en back-office/front-office, même si c’est une SPA architecturer son application JS en différentes couches Ce que je vous propose pour ce billet, c’est de faire un tour des premières notions intéressantes et nécessaires, pour commencer à utiliser AngularJS. Qu’est ce que AngularJS a de spécial ? <! Et la vue : <! <!

La logique d'AngularJS | Tutoriel AngularJS AngularJS repose en grande partie sur le patron de conception (en anglais, Design Pattern) Modèle-Vue-Contrôleur. Ce design pattern — parce que ça sonne quand même mieux en anglais :) — se base, comme son nom l'indique, sur la subdivision conceptuelle de chaque page en un Modèle, une Vue et un Contrôleur. J'ai précisé en partie parce que l'on verra dans les parties suivantes du tutoriel qu'AngularJS ajoute au Contrôleur d'autres outils comme les services et les directives. Mais le plus important de tous est bien le Contrôleur puisque c'est celui qui contient la logique de la page. Si vous avez déjà développé des applications en PHP, avec ou sans framework (tel que Symfony2 ou Zend Framework 2), vous avez sûrement dû rencontré le modèle MVC. Même si le design pattern a le même nom, des différences notables sont à remarquer entre la version PHP, qui est plus classique, et celle proposée par AngularJS, surtout au niveau du modèle ! La Vue C'est ce que voit l'utilisateur final. Le préfixe ng-

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. Et par la même occasion, on initialise la liste des todos avec un tableau vide. 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

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

Comprendre les bases d'angularJS et savoir quand l'utiliser Introduction AngularJS fait partie de la nouvelle vague de frameworks JavaScript, à l’instar de Backbone.js et Ember.js, pour ne citer que les plus connus. Il s’inscrit dans un mouvement d’innovation côté front-end, pour notre plus grand bonheur. Aujourd’hui, les sites où le JavaScript ne sert qu’à faire disparaître une balise <p> ou changer le style d’un <div> se font de plus en plus rares et sont pour la plupart des sites éditoriaux. On voit de plus en plus apparaitre des sites web poussés, et certains ressemblent à des applications bureau (enrichi par le cloud) avec une ergonomie ultra simple et une grande facilité de prise en main. Heureusement, les besoins ont évolué, mais les outils aussi. jQuery qui, je pense, parle à tout le monde, se présente plus sous la forme d’une libraire, alors qu’AngularJS est un vrai framework : il va structurer votre code et vous imposer une architecture. Un peu d’histoire Les concepts L’application Et dans notre JS, on crée notre application. Le contrôleur

AngularJs, par où je commence? - Angular-js.fr Vous venez d’entendre parler d’AngularJs et aimeriez en savoir un peu plus sur ce framework qui gagne en popularité. Et bien en quelques mots, il s’agit d’un framework javascript extrêmement complet, créé par Google, et qui sert à créer des applications web. Je préfère être honnête avec vous tout de suite, la courbe d’apprentissage d’AngularJs est abrupte, en revanche les premiers pas sont plutôt simples, voyez par vous même. Créer votre première page sur AngularJs Index.html app.js Demo Télécharger la source Explication du code ng-app La directive ng-app permet de dire à AngularJs qu’il doit être actif sur cette section de la page. ng-controller Cette section de la page est gérée par le contrôleur MainCtrl (notez la majuscule). Tout ce qui est entre doubles accolades sera interprété. ng-model C’est une des « killer features » d’AngularJs, c’est ce que l’on appelle du two-way data binding. $scope Le scope est ce qui fait le lien entre le contrôleur et la vue. « Ça marche pas » A voir également

Veille Angular présentée par Lovotech AngularJS est un Framework JavaScript, créé en octobre 2010 par des développeurs de chez Google et sous la licence MIT. Il propose une architecture basée sur MVVM (Model-View-ViewModel) pour des SPA (Single Page Application), autrement dit des applications web où la navigation se fait sur une même et unique page. Le mot d'ordre dans le développement des SPA est de ne jamais recharger totalement le contenu de notre seule page web. La principale caractéristique d'AngularJS est qu'un grand nombre d'actions effectuées sur le serveur tel que le rendu du moteur de Template, la récupération des données, leur (pré) validation et la navigation dans une application, sont désormais exécutés côté client. Le serveur se limite donc à traiter, vérifier, valider et envoyer les données aux clients dans un format générique (JSON, XML, etc.) Dès lors, cela permet d'avoir une charge sur les serveurs nettement moins importante et une fluidité de navigation chez le client. Fig1 : Résultat de l'exemple1 app.js

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. Qu’est-ce qu’AngularJS ? 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 La création de directives personnalisées est également possible avec AngularJS. 3. B. 4. 5. Model

Related: