AngularJS Cheat Sheet

by ProLoser via cheatography.com/1600/cs/513/

Filters

Services (cont)

Directive Definition Object (cont)

amount | currency[:symbol]

$httpBackend

scope {true | object}

Formats a number as a currency (ie

$1,234.56).
date | date[:format]
array | filter:expression
Selects a subset of items from array.
Expression takes string|Object|function()
data | json
Convert a JavaScript object into JSON
string.
array | limitTo:limit
Creates a new array containing only a
specified number of elements in an array.

$injector
$interpolate(text[, mustHaveExpression])

Finds links in text input and turns them into

html links.

Converts string to lowercase.

number | number[:fractionSize]

$location

DOM attribute (string), = or =attr - bi-

$log

expression in context of parent. Reference

attr OR assumes model of same name
controller function($scope, $element, $attrs,

$q
$resource(url[, paramDefaults][, actions])
$rootElement

$route

$routeProvider
$sanitize(html)

a number an empty string is returned.

$templateCache

is boolean
string | uppercase
Converts string to uppercase.
You can inject the $filter service and do
$filter('filterName')(value[, :optionalParam][,
:optionalParam]) in use it in your javascript.

$timeout(fn[, delay][, invokeApply])

$window

$cacheFactory
compiledHtml = $compile(html)(scope)

Controller constructor function instantiated

before pre-linking phase and shared with
other directives if requested by name
require {string | array[strings]}
Require another controller (ngMod
el).
Prefixes: ? - Don't raise error. ^ - Look on
parent elements too
restrict {string: 'EACM'}
E - Element: <my-directive />. A - Attribute
(default): <div my-directive="exp" />. C Class: <div class="m
y-directive: exp;" />.
M - Comment: <!-- directive: my-directive
exp -->
template {string}
Replace current element with contents and

name {string}

migrates all attributes / classes

Name of the current scope. Optional

defaults to the name at registration.
priority {integer}
single DOM element (higher = first)

$anchorScroll

$transclude)

Directive Definition Object

Specifies order multiple directives apply on

Services

the parent scope, & or &attr - execute an

$provide

Formats a number as text. If the input is not

Predicate is function(*)|string|Array. Reverse

directional binding between local model and

$parse(expression)

$scope See $rootScope

array | orderBy:predicate[:reverse]

specified attributes/scope variables passed):

@ or @attr - bind local model to value of

$routeParams

string | lowercase

use parent scope. {} - isolate scope (with

$locale

$rootScope

text | linky

True - create child scope. Undefined|false -

terminal {true}
Current priority will be last set of directives
to execute

templateUrl {string}
Same as template but the template is
loaded from the specified URL
replace {boolean}
true: template replaces element instead of
appending
transclude {boolean}
Compiles contents on parent (pre-isolate)
scope. Usually used with ngTransclude &

$controller

templates.

$cookieStore
$document
$exceptionHandler (exception[, cause])
$filter (name)
$http [(options)]
Cheatographer

Dates

Sponsored by ReadabilityScore.com

ProLoser

This cheat sheet was published on 9th August,

Measure your website readability!

cheatography.com/proloser/

2012 and was last updated on 17th April, 2014.

https://readabilityscore.com

www.DeanSofer.com

AngularJS Cheat Sheet

by ProLoser via cheatography.com/1600/cs/513/

Directive Definition Object (cont)

Directives (cont)

Module (cont)

compile function(tElement, tAttrs, fn

ng-

filter(name, filterFactory)

transclude(function(scope, cloneLinkingFn) )

mouse[down|enter|leave|move|over|up]="e

returns link()

xpression"

provider(name, providerType)

For transforming the template (rare, run

once per template instance).
link function(scope, iElement, iAttrs, controller)
Executed after template is cloned (run once
per clone). Contains most logic (DOM
listeners, etc). Controller can be an array.
http://docs.angularjs.org/guide/directive

<select ng-multiple>

Use this method to register work which

ng-non-bindable

needs to be performed when the injector

ng-options="select [as label] [group by

with with the current module is finished

group] for ([key,] value) in object|array"

ng-pluralize|< ng-pluralize count="number"
when="object" offset="number">
ng-readonly="expression"

Directives

ng-repeat="( [key,] value) in object|array"

ng-app="plaintext"

<option ng-selected="boolean">

ng-bind[-html-unsafe]="expression"

run(initializationFn)

ng-src="string"

loading.
service(name, constructor)
value(name, object)
name
Name of the module.
requires
Holds the list of modules which the injector
will load before the current module is loaded.

ng-bind-

ng-style="string|object"

template="string{{expression}}string{{expressi

ng-submit="expression"

on}}"

ng-switch="expression"|<ng-switch

Scope Properties and Methods

ng-change="expression"

on="expression">

$root or $rootScope

ng-checked="boolean"

ng-switch-when="plaintext"

ng-class[-even|-odd] ="string|object"

ng-switch-default

ng-[dbl]click="expression"

ng-transclude templates

ng-cloak="boolean"

ng-view|< ng-view>

ng-controller="plaintext"

ng-bind-html="expression"

<html ng-csp> (Content Security Policy)

Bold means the actual directive

ng-disabled ="boolean"

Italics mean optional

<form|ng-form name="plaintext"> | ngform ="plaintext"

ng-hide|show="boolean"
ng-href="plaintext{{string}}"
ng-include="string"|< ng-include src="string"

Pipes mean either|or

Plaintext means no string encapsulation
Superscript means notes or context

<Brackets> mean tag comptibility

Lack of <brackets> means the attribute can
apply to any tag

<input ng-pattern="/regex/" ng-minlength

ng-maxlength ng-required
<input ng-list="delimiter|regex">
<input type="checkbox" ng-truevalue="plaintext" ng-falsevalue="plaintext">
ng-model="expression"

Move to the top-most $scope (ng-app)

$parent
Move to the immediate parent of the current
$scope
$id
Auto generated Unique ID
$destroy (event)
Broadcasted when a scope and its children
are being destroyed
$apply(exp)
Executes logic within the AngularJS context
and refreshes all models checks.
$broadcast(name, args)
Dispatches an event name downwards to all

onload="expression" autoscroll="expression" >

ng-init="expression"

http://docs.angularjs.org/api/angular.Module

Module
config(configFn)
Use this method to register work which
needs to be performed on module loading.

child scopes
$destroy()
Removes the current scope (and all of its
children) from the parent scope

constant(name, object)
Because the constant are fixed, they get
applied before other provide methods.
controller(name, constructor)
directive(name, directiveFactory)
factory(name, providerFunction)

Cheatographer

Dates

Sponsored by ReadabilityScore.com

ProLoser

This cheat sheet was published on 9th August,

Measure your website readability!

cheatography.com/proloser/

2012 and was last updated on 17th April, 2014.

https://readabilityscore.com

www.DeanSofer.com

AngularJS Cheat Sheet

by ProLoser via cheatography.com/1600/cs/513/

Scope Properties and Methods (cont)

Global Functions

Global Functions (cont)

$digest()

angular.bind(self, fn, args)

angular.isDefined(value)

Process all of the watchers of the current

Returns a function which calls function fn

scope and its children. Since watchers can

bound to self (self becomes the this for fn).

change models, they will continue firing until

all changes stop. BEWARE OF
RECURSIVE CODE
$emit(name, args)
Dispatches an event name upwards through
the scope hierarchy
$eval(expression)
Executes the expression on the current
scope and returns the result
$evalAsync(expression)
Executes the expression on the current
scope at a later point in time
$new(isolate)
Creates a new child scope
$on(name, listener)
Listens on events of a given type
$watch(watchExp, listener(newVal, oldVal,
scope), objectEquality)

angular.bootstrap(element[, modules
])
Use this function to manually start up
angular application.
angular.copy(source[, destina
tion])
Creates a deep copy of source, which
should be an object or an array.
angular.element(element)
Wraps a raw DOM element or HTML string
as a jQuery element.
angular.equals(o1, o2)
Determines if two objects or two values are
equivalent.
angular.extend(dst, src)
Extends the destination object dst by
copying all of the properties from the src
object(s) to dst.
angular.forEach(obj, iterator[, context])
Invokes the iterator function once for each

Watch a model (exp) for changes and fires

item in obj collection, which can be either an

the listener callback. Pass true as a third

object or an array.

argument to watch an object's properties

angular.fromJson(json)

too.

Deserializes a JSON string.

The following directives create child scopes:

angular.identity()

ngInclude, ngSwitch, ngRepeat,

A function that returns its first argument.

ngController, uiIf. Calls to the same

This function is useful when writing code in

ngController will create multiple instances and

the functional style.

do not share scopes. Remember to traverse

up the tree to affect primitives on the intended
scope: ng-click="$parent.showPage=true"

angular.injector(modules)
Creates an injector function that can be
used for retrieving services as well as for
dependency injection.
angular.isArray(value)
Determines if a reference is an Array.
angular.isDate(value)
Determines if a value is a date.

Determines if a reference is defined.

angular.isElement(value)
Determines if a reference is a DOM element
(or wrapped jQuery element).
angular.isFunction(value)
Determines if a reference is a Function.
angular.isNumber(value)
Determines if a reference is a Number.
angular.isObject(value)
Determines if a reference is an Object.
Unlike typeof in JavaScript, nulls are not
considered to be objects.
angular.isString(value)
Determines if a reference is a String.
angular.isUndefined(value)
Determines if a reference is undefined.
angular.lowercase(string)
Converts the specified string to lowercase.
angular.mock
Namespace from 'angular-mocks.js' which
contains testing related code.
angular.module(name[, requires],
configFn)
The angular.module is a global place for
creating and registering Angular modules.
Requires argument always creates a new
module.
angular.noop()
A function that performs no operations.
angular.toJson(obj[, pretty])
Serializes input into a JSON-formatted
string.
angular.uppercase(string)
Converts the specified string to uppercase.
angular.version
An object that contains information about
the current AngularJS version.

Cheatographer

Dates

Sponsored by ReadabilityScore.com

ProLoser

This cheat sheet was published on 9th August,

Measure your website readability!

cheatography.com/proloser/

2012 and was last updated on 17th April, 2014.

https://readabilityscore.com

www.DeanSofer.com

AngularJS Cheat Sheet

by ProLoser via cheatography.com/1600/cs/513/

FormController

Deferred and Promise

$pristine

$q.all([array of promises])
Creates a Deferred object which represents

$dirty

a task which will finish in the future.

$valid

$q. defer()

$invalid

Creates a Deferred object which represents

$error

a task which will finish in the future.

http://docs.angularjs.org/api/ng.directive:form.For

$q.reject( reason )
Creates a promise that is resolved as

mController

rejected with the specified reason

NgModelController
$render()

Called when the view needs to

be updated. It is expected that
the user of the ng-model
directive will implement this
method.

$setValidity(validationErrorKey, isValid)
$setViewValue(value)
$viewValue

mixed

$modelValu

mixed

e
$parsers

array of function after reading val

from DOM to sanitize / convert /

$q.when( value)
Wraps an object that might be a value or a
(3rd party) then-able promise into a $q
promise
Deferred.resolve( value)
Resolves the derived promise with the value
Deferred.reject(reason )
Rejects the derived promise with the reason
Deferred.promise
Promise object associated with this deferred
Promise.then(successCallback,
errorCallback)
http://docs.angularjs.org/api/ng.$q

validate the value

$formatters

array of functions to convert /

validate the value

$error

object

$pristine

boolean

$dirty

boolean

$valid

boolean

$invalid

boolean

http://docs.angularjs.org/api/ng.directive:ngModel.
NgModelController
Cheatographer

Dates

Sponsored by ReadabilityScore.com

ProLoser

This cheat sheet was published on 9th August,

Measure your website readability!

cheatography.com/proloser/

2012 and was last updated on 17th April, 2014.

https://readabilityscore.com

www.DeanSofer.com