AngularJS Cheat Sheet

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

AngularJS Doc

    • 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 an reuse able faction. In 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).

    • A Provider is the base for factory and service and has the biggest flexibility. Most important it can be inject 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.

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:

  • '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

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, 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

Accessing just the $scope doesn’t always work well during the reload of the page, further more it doesn’t work for components anyhow. The easiest way is just to inject the $breadcrumb service and be done with it:

Paul Sterl has written 17 articles

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">