AngularJS Cheat Sheet

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

Filters Services Directive Definition Object

amount | currency[:symbol] $anchorScroll name {string}

Formats a number as a currency (ie $cacheFactory Name of the current scope. Optional
$1,234.56). defaults to the name at registration.
compiledHtml = $compile(html)(scope)
date | date[:format] priority {integer}
$controller
array | filter:expression Specifies order multiple directives apply on
$cookieStore
single DOM element (higher = first)
Selects a subset of items from array.
$document
Expression takes string|Object|function() terminal {true}
$exceptionHandler (exception[, cause])
data | json Current priority will be last set of directives
$filter (name)
to execute
Convert a JavaScript object into JSON
$http [(options)]
string. scope {true | object}
$httpBackend
array | limitTo:limit True - create child scope. Undefi ned|false -
$injector use parent scope. {} - isolate scope (with
Creates a new array containing only a
$interpolate(text[, mustHaveExpression]) specified attributes/scope variables passed):
specified number of elements in an array.
@ or @attr - bind local model to value of
text | linky 1 $locale DOM attribute (string), = or =attr - bi-

Finds links in text input and turns them into $location directional binding between local model and

html links. the parent scope, & or &attr - execute an

$log
expression in context of parent. Reference
string | lowercase $parse(expression) attr OR assumes model of same name
Converts string to lowercase. $provide controller functi on($scope, $element, $attrs,
number | number[:fractionSize] $q $transclude)

Formats a number as text. If the input is not $resource(url[, paramDefaults][, actions]) Controller constructor function instantiated
a number an empty string is returned. before pre-linking phase and shared with
$rootElement
other directives if requested by name
array | orderBy:predicate[:reverse]
$rootScope
require {string | array[strings]}
Predicate is function(*)|string|Array. Reverse
$route
is boolean Require another controller (ngModel).
$routeParams Prefixes: ? - Don't raise error. ^ - Look on
string | uppercase
$routeProvider parent elements too
Converts string to uppercase.
$sanitize(html) restrict {string: 'EACM'}
You can inject the $filter service and do
$scope See $rootScope E - Element: <my-directive />. A - Attribute
$filter('filterName')(value[, :optionalParam][,
(default): <div my-direct ive="exp" />. C -
:optionalParam]) in use it in your javascript. $templateCache
Class: <div class="m
y-directive: exp;" />.
1 Requires ngSanitize Module
$timeout(fn[, delay][, invokeApply])
M - Comment: <!-- directive: my-directive
$window exp -->

By ProLoser Published 9th August, 2012. Sponsored by Readability-Score.com

cheatography.com/proloser/ Last updated 31st July, 2014. Measure your website readability!
www.DeanSofer.com Page 1 of 4. https://readability-score.com
 AngularJS Cheat Sheet
by ProLoser via cheatography.com/1600/cs/513/

Directive Definition Object (cont) Directives (cont) Directives (cont)

template {string} ng-disabled="boolean" ng-bind-html="expression"

Replace current element with contents and <form|ng-form name="plaintext"> | ng- Bold means the actual directive
migrates all attributes / classes form="plaintext" Italics mean optional

templateUrl {string} ng-hide|show="boolean" Pipes mean either|or

Plaintext means no string encapsulation
Same as template but the template is loaded ng-href="plaintext{{string}}" Superscript means notes or context
from the specified URL
ng-include="string"|<ng-include src="string" <Brackets> mean tag comptibility
replace {boolean} onload="expression" autoscroll="expression"> Lack of <brackets> means the attribute can

ng-init="expression" apply to any tag

true: template replaces element instead of
appending
<input ng-pattern="/regex/" ng-minlength
Module
transclude {boolean} ng-maxlength ng-required
config(configFn)
Compiles contents on parent (pre-isolate) <input ng-list="delimiter|regex">
scope. Usually used with ngTransclude & Use this method to register work which
<input type="checkbox" ng-true-
templates. needs to be performed on module loading.
value="plaintext" ng-false-
compile function(tElement, tAttrs, fn value="plaintext"> constant(name, object)

transclude(function(scope, cloneLinkingFn) ) ng-model="expression" Because the constant are fixed, they get
returns link() applied before other provide methods.
ng-mousedown="expression"
For transforming the template (rare, run once controller(name, constructor)
per template instance). ng-mouseenter="expression"
directive(name, directiveFactory)
ng-mouseleave="expression"
link function(scope, iElement, iAttrs, controller)
factory(name, providerFunction)
Executed after template is cloned (run once per ng-mousemove="expression"
filter(name, filterFactory)
clone). Contains most logic (DOM listeners, ng-mouseover="expression"
etc). Controller can be an array. provider(name, providerType)
ng-mouseup="expression"
http://docs.angularjs.org/guide/directive run(initializationFn)
<select ng-multiple>
Use this method to register work which
ng-non-bindable
Directives needs to be performed when the injector
ng-options="select [as label] [group by with with the current module is finished
ng-app="plaintext"
group] for ([key,] value) in object|array" loading.
ng-bind[-html-unsafe]="expression" ng-pluralize|<ng-pluralize count="number" service(name, constructor)
ng-bind- when="object" offset="number">
value(name, object)
template="string{{expression}}string{{expression}}" ng-readonly="expression"
name
ng-change="expression" ng-repeat="( [key,] value) in object|array"
Name of the module.
ng-checked="boolean" <option ng-selected="boolean">
ng-class[-even|-odd]="string|object" Holds the list of modules which the injector
ng-src="string"
will load before the current module is
ng-[dbl]click="expression" ng-style="string|object" loaded.
ng-cloak="boolean" ng-submit="expression"
http://docs.angularjs.org/api/angular.Module
ng-controller="plaintext" ng-switch="expression"|<ng-switch
<html ng-csp> (Content Security Policy) on="expression">

ng-switch-when="plaintext"

ng-switch-default

ng-transclude templates

ng-view|<ng-view>

By ProLoser Published 9th August, 2012. Sponsored by Readability-Score.com

cheatography.com/proloser/ Last updated 31st July, 2014. Measure your website readability!
www.DeanSofer.com Page 2 of 4. https://readability-score.com
 AngularJS Cheat Sheet
by ProLoser via cheatography.com/1600/cs/513/
Scope Properties and Methods
$root or $rootScope
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
child scopes
$destroy()
Removes the current scope (and all of its
children) from the parent scope
$digest()
Process all of the watchers of the current
scope and its children. Since watchers can
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
By ProLoser
cheatography.com/proloser/
www.DeanSofer.com
Scope Properties and Methods (cont)
$evalAsync(expression) angular.equals(o1, o2)
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)
Watch a model (exp) for changes and fires
the listener callback. Pass true as a third
argument to watch an object's properties
too.
The following directives create child scopes:
ngInclude, ngSwitch, ngRepeat,
ngController, uiIf. Calls to the same
ngController will create multiple instances and
do not share scopes. Remember to traverse
up the tree to affect primitives on the intended
scope: ng-click="$parent.showPage=t rue" Creates an injector function that can be
Global Functions
angular.bind(self, fn, args)
Returns a function which calls function fn
bound to self (self becomes the this for fn).
angular.bootstrap(element[, modules])
Use this function to manually start up
angular application.
angular.copy(source[, destination])
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.
Published 9th August, 2012.
Last updated 31st July, 2014.
Page 3 of 4.
Global Functions (cont)
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
item in obj collection, which can be either an
object or an array.
angular.fromJson(json)
Deserializes a JSON string.
angular.identity()
A function that returns its first argument.
This function is useful when writing code in
the functional style.
angular.injector(modules)
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.
angular.isDefined(value)
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.
Sponsored by Readability-Score.com
Measure your website readability!
https://readability-score.com
 AngularJS Cheat Sheet
by ProLoser via cheatography.com/1600/cs/513/

Global Functions (cont) FormController Deferred and Promise

angular.isNumber(value) $pristine $q.all([array of promises])

Determines if a reference is a Number. $dirty Creates a Deferred object which represents

$valid a task which will finish in the future.
angular.isObject(value)
$invalid $q. defer()
Determines if a reference is an Object.
Unlike typeof in JavaScript, nulls are not $error Creates a Deferred object which represents
considered to be objects. a task which will finish in the future.
http://docs.angularjs.org/api/ng.directive:form.For
angular.isString(value) mController $q.reject( reason )

Determines if a reference is a String. Creates a promise that is resolved as

NgModelController rejected with the specified reason
angular.isUndefined(value)
$render() Called when the view needs to $q.when( va )
lue
Determines if a reference is undefined.
be updated. It is expected that
Wraps an object that might be a value or a
angular.lowercase(string) the user of the ng-model
(3rd party) then-able promise into a $q
directive will implement this
Converts the specified string to lowercase. promise
method.
angular.mock Deferred.resolve( value)
$setValidity(validationErrorKey, isValid)
Namespace from 'angular-mocks.js' which Resolves the derived promise with the value
$setViewValue(value)
contains testing related code.
$viewValue mixed Deferred.reject(reason )
angular.module(name[, requires], configFn)
$modelValu mixed Rejects the derived promise with the reason
The angular.module is a global place for e
Deferred.promise
creating and registering Angular modules.
$parsers array of function after reading val
Requires argument always creates a new Promise object associated with this deferred
from DOM to sanitize / convert /
module.
validate the value Promise.then(successCallback,
angular.noop() errorCallback)
$formatters array of functions to convert /
A function that performs no operations. validate the value
http://docs.angularjs.org/api/ng.$q
angular.toJson(obj[, pretty]) $error object

$pristine boolean
Serializes input into a JSON-formatted
string. $dirty boolean

angular.uppercase(string) $valid boolean

Converts the specified string to uppercase. $invalid boolean

angular.version http://docs.angularjs.org/api/ng.directive:ngModel.
NgModelController
An object that contains information about
the current AngularJS version.

By ProLoser Published 9th August, 2012. Sponsored by Readability-Score.com

cheatography.com/proloser/ Last updated 31st July, 2014. Measure your website readability!
www.DeanSofer.com Page 4 of 4. https://readability-score.com