Ultimate

AngularJS Cheat Sheet

This cheat sheet is yours.

If you want something added, contact me, and Ill add it if it seems like its general enough to
benefit everyone. Im adding new stuff all the time so you already get those updates.

If theres something wrong with it, contact me and Ill fix it!

FREE updates for life!

Modules
Define var mod = angular.module(name, [...]);
Retrieve var mod = angular.module(name);
Config var mod = angular.module(name, [...],
function config(...) {

});

var mod = angular.module(name);

mod.config(function config(...) {

});
Run var mod = angular.module(name);
mod.run(function run(...) {

});
Application Module Usage <... ng-app=name></...>
Resources How to load AngularJS on the HTML tag
How to load AngularJS on the BODY tag
How to load AngularJS on a directive
How to load AngularJS fully encapsulated
Who Else Wants to Load Multiple Angular Apps at
Once

Official Documentation

Controllers
Define mod.controller(CtrlName,
function CtrlName(...) {
 });

mod.controller(CtrlName,
[..., function CtrlName(...) {

}]);

mod.controller(CtrlName,
function CtrlName(...) {
// hang everything off the instance
// of the controller so we are compatible
// with the Controller As syntax
var vm = this;
});
Standard Usage <... ng-controller=CtrlName></...>
Controller As Usage <... ng-controller=CtrlName as vm></...>
Resources Official Documentation

Directives
Define mod.directive(name,
function(...) {
return {
restrict: 'AEC',
scope: {},
template: 'some html',
templateUrl: 'path/to/template',
replace: true OR false,
transclue: true OR false,
require: 'directiveName',
link: linkFn
};
});

function linkFn(scope, elem, attr,

controller, transcludeFn) {

}
Resources Restrict Your Directives Like a Boss
What Every Developer Should Know About Isolate
Scope
What Everybody Needs to Know About Isolate
Scope Binding
 Why You Should Be Using Template Cache Now
Now You Can Have Clean HTML in Angular
Little Known Ways to Include Static Content in
a Directive
What Everybody Ought to Know About Directive
Interaction

Official Documentation

Services
Define mod.service(name,
function name(...) {
// add functions and properties to
// the instance of this service
this.fn = function fn() {
};
});
Resources Official Documentation

Factories
Define mod.factory(name,
function name(...) {
// return an object from the factory
// to provide as the injectable
return {
fn: function fn() {
}
};
});
Resources Official Documentation

Providers
Define mod.provider(name,
function name(...) {
// add configuration functions and
// properties that can be modified in
// the module.config function
this.configFn = function configFn(...) {
};

this.configProp = default value;

 // provide the $get function so that
// the service can be constructed from
// the provider
this.$get = function $get() {
// return some configured object based
// off of your needs and the configured
// functions and properties
return {
};
};
});
Resources Official Documentation

Constants
Define // returns a static object as a constant
// this is good for enum values that you
// want to inject throughout the code base
mod.constant(name, {
});

// returns a function as a constant

// this is good for injecting shared
// functionality throughout the code base
// that isnt really a service or factory
mod.constant(name, function name(...) {
});
Resources Official Documentation

UI Router
Configure var app = angular.module(app, [ui.router]);

app.config(function config(
$stateProvider, $urlRouterProvider) {

$stateProvider
.state(home, {
url: /,
templateUrl: path/to/template
});

$urlRouterProvider.otherwise('/');
}
 Named View .state('name', {
url: 'url',
views: {
'ui-view-name': {
templateUrl: 'path/to/template'
}
}
})
Child State .state('parentName.childName', {
url: 'relative/url/to/parent',
templateUrl: 'path/to/template'
})
Named View Replacement .state('parentName.childName', {
url: 'url',
views: {
'ui-view-name@ancestorName': {
templateUrl: 'path/to/template'
}
}
})
Resources The Secret of UI Router Resolvers
UI Router: What Everybody Should Know About
Child States
UI Router: A Secret About Named Views

UI Router with Mike eBook

Official Documentation