Angularjs Cheat Sheet



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.

Angularjs

Create vs. Get AngularJS application

The module dependency array tells AngularJS to create an app, otherwise to load it:

Create myAppvar app = angular.module('myApp', []);
Get myAppvar 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 Service is 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 Factory follows as the name already tells the factory pattern and so allows us to construct either a complex value we 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).
Angularjs Cheat Sheet

Provider

  • A Provider is the base for factory and service and has the biggest flexibility. Most important it can be injected into the config method and so configured before the first usage (review sample).
  • A Value is 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.

Angularjs

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

Cheat

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:





Comments are closed.