This cheat sheet co-authored by Ravi Kiran and Suprotim Agarwal, aims at providing a quick reference to the most commonly used features in AngularJS. It will also make you quickly productive with Angular. This article is from the Free DNC Magazine for.Net and JavaScript developers. AngularJS Cheat Sheet pdf (windows.net) 140 points by paulw0 on Apr 11. So comparing the 14pages of angular sheet is way too much of a disgrace for vim or emacs.
Create vs. Get AngularJS application
The module dependency array tells AngularJS to create an app, otherwise to load it:
| Create myApp | var app = angular.module('myApp', []); |
| Get myApp | var app = angular.module('myApp'); |
Binding
@Text binding, expressions are supported using{{ }}=Two-way binding&Method binding<One-way binding (usually for components)?for an optional binding e.g.@?for an optional string binding
Service, Factory, Provider, Value & Controller
- A
Serviceis a singleton instance of a custom object. In can be used to share state or usually to wrap the remote REST API in a reuseable faction. It is injected using the name (review sample).
Basically simple AngularJs beans we want to inject later.
- The
Factoryfollows as the name already tells the factory pattern and so allows us to construct either a complexvaluewe want to inject into our controllers or even already existing JS objects which require any dependencies upfront. Basically wrap beans which need a constructor injection (review sample).
Provider
- A
Provideris the base forfactoryandserviceand has the biggest flexibility. Most important it can be injected into the config method and so configured before the first usage (review sample).
- A
Valueis a simple object, int or string we want to make available for injection
HTML elements in AngularJS
Access HTML element Directive
The easiest way is just to use the link method:
Access HTML element in Component
In a component we can just inject the $element.
Access raw HTML element
As you can see in the last example we can access the raw DOM element using [0] on the wrapped element.
Restrict in Angular Directive
The restrict option is typically set to:
'A'– only matches attribute name'E'– only matches element name'C'– only matches class name'M'– only matches comment
These restrictions can all be combined as needed:
Modules
'AEC'– matches either attribute or element or class name
URL Routing to AngularJS components
ocLazyLoad angular components during routing
As the lifecycle of components is a bit different we have to eager load them using ocLazyLoad:
Access URL parameters
Angularjs Xss Cheat Sheet
The easiest way to access the URL params is just to inject $stateParams into the component get read it. A bit cleaner is using the resolve of the state to inject the parameters into the component. As so we have to keep in mind that happens async, which means we have to implement the $onInit method to get hold of the injected values into our component. More to components.
Dynamic ncyBreadcrumb label for AngularJS Components
Angularjs Cheat Sheet For Beginners
Angular Material Cheat Sheet
Accessing just the $scope doesn’t always work well during the reload of the page furthermore, it doesn’t work for components anyhow. The easiest way is just to inject the $breadcrumb service and be done with it: