background preloader

More AngularJS Magic to Supercharge your Webapp

More AngularJS Magic to Supercharge your Webapp
Make way for another amazing article which covers more of AngularJS Due to the popularity of the previous article, Use AngularJS to power your web application, I've decided to cover more of AngularJS to make it fun and easy for all developers to play around with it. AngularJS is an incredible tool, but a lot of the more advanced features are hidden in deep within the documentation and others are too tricky to learn direclty. AngularJS is also a fairly new product and as a result there are many features that are yet to be discovered and blogged about. This article will cover more of the hidden gems of AngularJS and introduce new development tricks and methods to supercharge your AngularJS application. Pleaes read onwards if you wish to become an AngularJS web guru :). This page was first published on October 2nd 2012 and was last updated on January 30th 2013. This article is a sequel to the previous article titled Use AngularJS to Power Your Web Application. OK so onto business. Oh! Related:  Angular JS

FrAngular : AngularJS en français Build Apps with AngularJS This guide gets you started building Chrome Apps with the AngularJS MVC framework. To illustrate Angular in action, we'll be referencing an actual app built using the framework, the Google Drive Uploader. The source code is available on GitHub. The Google Drive Uploader allows users to quickly view and interact with files stored in their Google Drive account as well as upload new files using the HTML Drag and Drop APIs. It's a great example of building an app which talks to one of Google's APIs; in this case, the Google Drive API. Note: You can also build apps which talk to 3rd party APIs/services that are OAuth2-enabled. The Uploader uses OAuth2 to access the user's data. Key features this app uses: All Chrome Apps require a manifest.json file which contains the information Chrome needs to launch the app. A stripped down version of the Uploader's manifest looks like this: The most important parts of this manifest are the "oauth2" and "permissions" sections. Template laid out. Woot!

AngularJs Tips and Tricks [UPDATED] ☢ These tips were developed in AngularJs v0.10.5 v1.0.1. I'll keep updating this post, so check back often! I've compared a LOT of different javascript frameworks for my company's rewrite, and finally settled on AngularJS because of how rapidly I'm able to produce prototypes. In my opinion, although it's very alpha and fairly lacking on the graphical side, it's excellent for CRUD applications (meaning forms, tables and reports). I'm still trying to lean towards emphasizing reusable widgets and directives instead of just custom-coding everything for your own app. Most of these tips have been moved to AngularUI - Go check it out! The companion suite to AngularJS, a collection of work by many AngularJS users with a plethora of useful utilities. Table of Contents Serializing the Form No. If every form control on your page does not have an ng-model then you're doing it wrong. Seriously. Useful $scope Methods Don't Escape HTML One of the first things people get stuck on. ngCloak ngBind Routing Tricks

5 surprisingly painful things about client-side JS - The Sourcegraph Blog Updated: The title of this post previously began “Why we left AngularJS: ...”, but that was removed because these points are generally applicable to single-page JS app frameworks. Some folks construed this post as a criticism of AngularJS specifically, but that wasn't my intent. — Quinn When we opened up Sourcegraph to the public a few months ago, it was a rich AngularJS app. The server delivered the initial HTML page and hosted JSON endpoints. AngularJS did everything else. But single-page JavaScript frameworks aren’t a good fit for every site. Next week we’ll talk more about how we made the transition from AngularJS to server-side Go templates. The 5 things about client-side JS frameworks that were surprisingly painful We knew about many of these difficulties in advance, but we didn’t know how difficult they would be. 1. Search engine crawlers and social preview scrapers can’t load JavaScript-only sites, and serving them alternate versions is complex and slow. 2. How do you fix this? 3.

angular-carousel demo Transform your ng-repeat or DOM nodes in a mobile-friendly carousel just by adding a 'rn-carousel' attribute to your HTML; AngularJS directives FTW :) Carousels are data-bound to your ngRepeat collections and can be DOM buffered (good for performance) Swipe these demos with your mouse or finger ngRepeat demo (buffered carousel) A simple buffered ng-repeat with a custom template. slide #1 / 50 carouselIndex: 0 carouselBufferIndex: 0 slide #3 / 50 carouselIndex: 0 carouselBufferIndex: 0 slide #5 / 50 carouselIndex: 0 carouselBufferIndex: 0 slide #7 / 50 carouselIndex: 0 carouselBufferIndex: 0 slide #9 / 50 carouselIndex: 0 carouselBufferIndex: 0 template-based demo Various blocks automagically converted to a carousel. This is a standard template slide #1 Here's sophie : A friend of mine : And to finish : Standard carousel with thumbs navigation This one has an initial index and the thumbs controls the rn-carousel-index binding carousel with builtin prev/next controls

Call a Directive Controller's method from Parent Controller in 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.

Marco da Silva : AngularJS : Change title based on Route AngularJS is used to build single page WebApps. Considering it's nature, you will only have 1 Title for your page, so even if you go to '/product' or '/about', you would see the same Title on the Browser. Not really user friendly... Where is one possible solution around this problem. On your HTML, change the title tag to include a ng-bind: <title ng-bind="'MyApp - ' + $root.title">MyApp - Welcome</title> On your app.js: on your run(), add a $rootScope. $rootScope. Note: The reason I'm using ng-bind instead of the angular template bind '{{ expression }}' is expressed on the documentation : It is preferrable to use ngBind instead of {{ expression }} when a template is momentarily displayed by the browser in its raw state before Angular compiles it.

API: API Reference Loading... Welcome to the AngularJS API docs page. These pages contain the AngularJS reference materials for version 1.5.5 material-conspiration. The documentation is organized into modules which contain various components of an AngularJS application. These components are directives, services, filters, providers, templates, global APIs, and testing mocks. Angular Prefixes $ and $$: To prevent accidental name collisions with your code, Angular prefixes names of public objects with $ and names of private objects with $$. Angular Modules This module is provided by default and contains the core components of AngularJS. Use ngRoute to enable URL routing to your application. Include the angular-route.js file and set ngRoute as a dependency for this to work in your application. Use ngAnimate to enable animation features within your application. Include the angular-animate.js file and set ngAnimate as a dependency for this to work in your application.

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

Building a RESTful web service with AngularJS (and PHP) – More power with $resource This is a two parts post about how to make RESTful requests through an AngularJS web application. The index of this brief series of posts is quite simple. Backend setup is the first post in the series. As the subtitle, its main focus is (at least this time) on the backend domain. $http or $resource? In all the posts about AngularJS that I wrote until now, every time that it was necessary to make an asynchronous request to the server I used the $http service. $resource is a separate, optional module of AngularJS, built over $http. Start using $resource As I said previously $resource is a separate module of AngularJS; it is defined in the angular-resource.js file, often downloaded with angular.js. To use $resource there are three easy things to do: Include the source file, immediately after the source of angular.js, and ideally just before the end of the body. Include ngResource in the declaration of your web application module. var myApp = angular.module('myApp', ['ngResource']); More on: