background preloader

Developer Guide

Developer Guide
Loading... On this page, you will find a list of official AngularJS resources on various topics. Just starting out with AngularJS? Try working through our step by step tutorial or try building on our seed project. Ready to find out more about AngularJS? Core Concepts Templates In AngularJS applications, you move the job of filling page templates with data from the server to the client. Application Structure Other Features Testing Community Resources We have set up a guide to many resources provided by the community, where you can find lots of additional information and material on these topics, a list of complimentary libraries, and much more. External AngularJS resources Getting Help The recipe for getting help on your unique issue is to create an example that could work (even if it doesn't) in a shareable example on Plunker, JSFiddle, or similar site and then post to one of the following: Official Communications Official announcements, news and releases are posted to our blog, G+ and Twitter: Related:  Angular JSAngularJS

angular/protractor 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. $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']); Inject $resource everywhere it will be used. More on:

Understanding Dependency Injection · angular/angular.js Wiki Dependency injection in AngularJS is supremely useful, and the key to making easily testable components. This article explains how Angular's dependency injection system works. The Provider ($provide) The $provide service is responsible for telling Angular how to create new injectable things; these things are called services. myMod.config(function($provide) { $provide.provider('greeting', function() { this. Here we've defined a new provider for a service called greeting; we can inject a variable named greeting into any injectable function (like controllers, more on that later) and Angular will call the provider's $get function in order to return a new instance of the service. myMod.controller('MainController', function($scope, greeting) { $scope.onClick = function() { greeting('Ford Prefect'); }; }); myMod.config(function($provide) { $provide.factory('greeting', function() { return function(name) { alert("Hello, " + name); }; }); }); The one injectable I've skipped so far is constant.

Lessons Learned: A Year with a Large AngularJS Project photo credit: Solo After a year of working with a large AngularJS project, I thought I’d share a few of the lessons that I learned in the process. Firstly, I love AngularJS. It suits my needs exceedingly well, and I expect it will be my goto for the forseeable future when I need a solid framework for “thick client” single page applications. Code Organisation This one is huge. - project -- controllers --- someController.js --- someOtherController.js --- ... --- someController99.js Which lead to a controllers folder that would twist the eyes. Today I’d want to start building my project in a more modular fashion. Cliff Meyers has written a great article on organizing your code in a large Angular app. Directives are awesome and powerful I’m of the opinion now that Directives are the killer feature of AngularJS. One of my favorite aspects of Angular Directives is that they are composable. Know thy framework While I’ve spent some time with it, this is an area I’d like to get more intimate with.

10 Reasons Why You Should Use AngularJS If you haven’t tried Angular yet, you’re missing out on why people say JavaScript is the most flexible language in the world. Angular is the only framework that doesn’t make MVC seem like putting lipstick on a pig. Most frameworks nowadays are simply a bundling of existing tools. They are an integrated tool set, but not very elegant. Angular is the next generation framework where each tool was designed to work with every other tool in an interconnected way. Here are 10 reasons why you should be using Angular today. 1. Most frameworks implement MVC by asking you to split your app into MVC components, then require you to write code to string them up together again. Because Angular acts as the mediator, developers also won’t feel tempted to write shortcuts between components that break abstractions just to make them fit easier. 2. Angular uses HTML to define the app’s user interface. HTML is also used to determine the execution of the app. 3. 4. custom attributes and custom class names 5. 6. 7.

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. 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 ? Une promise (une “promesse” en anglais) est un objet JavaScript correspondant au résultat différé d'une opération asynchrone. Imaginons une fonction qui doit déclencher une opération prenant un certain temps, et qui pourra soit réussir et fournir un résultat, soit échouer et balancer une exception. $q.reject(reason);

E2E Testing Loading... Note: In the past, end-to-end testing could be done with a deprecated tool called AngularJS Scenario Runner. That tool is now in maintenance mode. As applications grow in size and complexity, it becomes unrealistic to rely on manual testing to verify the correctness of new features, catch bugs and notice regressions. Unit tests are the first line of defense for catching bugs, but sometimes issues come up with integration between components which can't be captured in a unit test. End-to-end tests are made to find these problems. We have built Protractor, an end to end test runner which simulates user interactions that will help you verify the health of your AngularJS application. Using Protractor Protractor is a Node.js program, and runs end-to-end tests that are also written in JavaScript and run with node. For more information on Protractor, view getting started or the api docs. Protractor uses Jasmine for its test syntax. Here is an example of a simple test: Example Caveats

AngularJS - Complex nesting of partials and templates ngAnimate Loading... The ngAnimate module provides support for JavaScript, CSS3 transition and CSS3 keyframe animation hooks within existing core and custom directives. To see animations in action, all that is required is to define the appropriate CSS classes or to register a JavaScript animation via the myModule.animation() function. The directives that support animation automatically are: ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView and ngClass. Custom directives can take advantage of animation by using the $animate service. Below is a more detailed breakdown of the supported animation events provided by pre-existing ng directives: You can find out more information about animations upon visiting each directive page. Below is an example of how to apply animations to a directive that supports animation hooks: Keep in mind that, by default, if an animation is running, any child elements cannot be animated until the parent element's animation has completed. No they are not. Installation

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.

angular-styleguide/ at master · johnpapa/angular-styleguide