AngularJS Best Practices - Jaco Pretorius Miško Hevery – the father of AngularJS – gave a very interesting presentation on AngularJS best practices in December of last year. This presentation is available on YouTube and the actual slides are on Google Docs. I’m going to cover a few of the points he covered in his presentation and give my take on them. Directory Structure Angular suggests that you use a certain directory structure, which you can create either using the Angular-seed project or the new Yeoman tool. This is called ‘Convention over Configuration’ – a concept you will hear a lot if you delve into Rails – although this doesn’t really apply in Angular as far as I can tell. In any case, it’s still a good idea to stick to the conventions simply to make it easier for a developer to look at your codebase and know where files should live. Everything that gets deployed is in the app directoryEverything outside of the app directory is for development Dependency Injection Hiding Flashes of Unstyled Content {{ interpolation }} More
AngularJS : pourquoi les développeurs en sont fous La popularité du framework JavaScript ne cesse de croitre. Quelles sont ses véritables points forts comparés à ses concurrents ? Qu'apporte AngularJS 2.0 qui vient de sortir ? Télécharger AngularJS (site du projet)1- AngularJS est devenu la référence des infrastructures JavaScript côté client Sur le terrain des infrastructures JavaScript, historiquement très nombreuses, plusieurs solutions commencent à s'imposer. Sur la partie serveur, Node.js a de plus en plus clairement remporté la bataille. Mais qu'en est-il des infrastructures JavaScript côté client ? D'après les premiers indicateurs dont nous disposons autour de la valorisation de l'expertise Angular en termes de salaire, il semble qu'elle commence à être assez élevée en France. A lire aussi : 2- Une infrastructure Modèle-Vue-VueModèle pour gagner en productivité En trois ans, la popularité d'AngularJS a explosé (cf. le graphique Google Trend ci-dessous). 3- Ce qui fait sa force : un projet porté par Google 5- Qu'apporte AngularJS 2 ?
AngularUI for AngularJS 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.
Angular directives for Twitter's Bootstrap The $uibPosition service provides a set of DOM utilities used internally to absolute-position an element in relation to another element (tooltips, popovers, typeaheads etc...). getRawNode(element) Takes a jQuery/jqLite element and converts it to a raw DOM element. parameters element(Type: object) - The element to convert. returns (Type: element) - A raw DOM element. parseStyle(element) Parses a numeric style value to a number. value(Type: string) - The style value to parse. (Type: number) - The numeric value of the style property. offsetParent(element) Gets the closest positioned ancestor. element(Type: element) - The element to get the offset parent for. (Type: element) - The closest positioned ancestor. scrollbarWidth(isBody) Calculates the browser scrollbar width and caches the result for future calls. isBody(Type: boolean, Default: false, optional) - Is the requested scrollbar width for the body/html element. (Type: number) - The width of the browser scrollbar. position(element, includeMargins)
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 : <!
cgross/generator-cg-angular 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. 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.
angular-ui/ui-calendar Animating AngularJS Apps: ngView AngularJS provides a great way to create single page applications. This allows for our site to feel more and more like a native mobile application since we have a single page app. To make it feel even more native, we can add transitions and animations using ngAnimate module. This module allows us to create beautiful looking applications. What We’ll Be Building Let’s say we have a single page application where we want to animate the page change. We’ll use: ngRoute for our page routingngAnimate to create our page animationsCSS Animations will be applied to the pagesEach of our pages will have different animations when leaving or entering the view Extreme Animations: The animations we’ll be using here are a little over the top. How Does It Work? Let’s take a look at how ngAnimate works. ngAnimate will add and remove CSS classes to different Angular directives based on if they are entering or leaving the view. Starting Our Application Here are the files we’ll need. Our Angular Application app.js
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