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
var mod = angular.module(name, [...]);
Define
var mod = angular.module(name);
Retrieve
var mod = angular.module(name, [...],
Config
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></...>
How to load AngularJS on the HTML tag
Resources
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(...) {
}]);
Standard Usage
Controller As Usage
Resources
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;
});
<... ng-controller=CtrlName></...>
<... ng-controller=CtrlName as vm></...>
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
Resources
mod.service(name,
function name(...) {
// add functions and properties to
// the instance of this service
this.fn = function fn() {
};
});
Official Documentation
Factories
Define
Resources
mod.factory(name,
function name(...) {
// return an object from the factory
// to provide as the injectable
return {
fn: function fn() {
}
};
});
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 {
};
};
});
Official Documentation
Resources
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(...) {
});
Official Documentation
Resources
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'
}
}
})
.state('parentName.childName', {
Child State
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'
}
}
})
The Secret of UI Router Resolvers
Resources
UI Router: What Everybody Should Know About
Child States
UI Router: A Secret About Named Views
UI Router with Mike eBook
Official Documentation
