Scribd
Upload
260 views

Ultimate AngularJS Cheat Sheet

This document provides a summary of AngularJS concepts and features including modules, controllers, directives, services, factories, providers, constants, and UI Router. It is intended to serve as an AngularJS cheat sheet for developers and includes definitions, examples, and resources for further reading. Updates will be made over time to include additional concepts.

Uploaded by

Anirudh Prabhu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
260 views

Ultimate AngularJS Cheat Sheet

This document provides a summary of AngularJS concepts and features including modules, controllers, directives, services, factories, providers, constants, and UI Router. It is intended to serve as an AngularJS cheat sheet for developers and includes definitions, examples, and resources for further reading. Updates will be made over time to include additional concepts.

Uploaded by

Anirudh Prabhu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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

You might also like