Angularjs Cheat Sheet: by Via

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

$1,234.56).
date | date[:format]
array | filter:expression
Selects a subset of items from array.
Expression takes string|Object|function()
$cacheFactory
compiledHtml = $compile(html)(scope)
$controller
$cookieStore
$document
$exceptionHandler (exception[, cause])
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.
$filter (name)
$http [(options)]
Finds links in text input and turns them into

html links.
Converts string to lowercase.

number | number[:fractionSize]
priority {integer}
Specifies order multiple directives apply on
single DOM element (higher = first)
terminal {true}
Current priority will be last set of directives
to execute
scope {true | object}
True - create child scope. Undefi ned|false use parent scope. {} - isolate scope (with
$injector
specified attributes/scope variables passed):
$locale
$location
string | lowercase
defaults to the name at registration.
$httpBackend
$interpolate(text[, mustHaveExpression])
text | linky 1
Name of the current scope. Optional
$log
$parse(expression)
@ or @attr - bind local model to value of

DOM attribute (string), = or =attr - bidirectional binding between local model and
the parent scope, & or &attr - execute an
expression in context of parent. Reference
attr OR assumes model of same name
controller function($scope, $element, $attrs,
Formats a number as text. If the input is not
$provide
a number an empty string is returned.
$q
Controller constructor function instantiated
$resource(url[, paramDefaults][, actions])
before pre-linking phase and shared with
array | orderBy:predicate[:reverse]
Predicate is function(*)|string|Array. Reverse
is boolean
string | uppercase
Converts string to uppercase.
You can inject the $filter service and do
$rootElement
$rootScope
other directives if requested by name

require {string | array[s trings]}
Require another controller (ngModel).
$route
Prefixes: ? - Don't raise error. ^ - Look on
$routeParams
parent elements too
$filter('filterName')(value[, :optionalParam][,
$routeProvider
:optionalParam]) in use it in your javascript.
$sanitize(html)
1 Requires ngSanitize Module
$transclude)
restrict {string: 'EACM'}

E - Element: <my-directive />. A - Attribute
(default): <div my-direct ive="exp" />. C -
$scope See $rootScope
Class: <div class="m

y-direct ive: exp;" />.
$templateCache
M - Comment: 
$window
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

Directive Definition Object (cont)
Directives (cont)
Directives (cont)
template {string}
ng-controller="plaintext"
ng-bind-html="expression"
<html ng-csp> (Content Security Policy)
Bold means the actual directive
ng-disabled="boolean"
Italics mean optional
Replace current element with contents and

migrates all attributes / classes
templateUrl {string}
Same as template but the template is loaded
from the specified URL
replace {boolean}
<form|ng-form name="plaintext"> | ngform="plaintext"

ng-hide|show="boolean"
true: template replaces element instead of
ng-href="plaintext{{string}}"
appending
ng-include="string"|<ng-include src="string"
transclude {boolean}
Compiles contents on parent (pre-isolate)
scope. Usually used with ngTransclude &
templates.
compile function(tElement, tAttrs, fn
transclude(function(scope, cloneLinkingFn) )
ng-init="expression"
<input ng-pattern="/regex/" ng-minlength
ng-maxlength ng-required
<input ng-list="delimiter|regex">
For transforming the template (rare, run once
value="plaintext" ng-false-
per template instance).
value="plaintext">
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
ng-model="expression"
ng-mousedown="expression"
ng-mouseenter="expression"
ng-mouseleave="expression"
ng-mousemove="expression"
ng-mouseover="expression"
Directives
ng-app="plaintext"
ng-bind[-html-unsafe]="expression"
template="string{{expression}}string{{expression}}"
ng-change="expression"
ng-checked="boolean"
ng-class[-even|-odd]="string|object"
ng-[dbl]click="expression"
ng-cloak="boolean"
Superscript means notes or context
<Brackets> mean tag comptibility

Lack of <brackets> means the attribute can
apply to any tag
Module
config(configFn)
Use this method to register work which
needs to be performed on module loading.
constant(name, object)
Because the constant are fixed, they get
applied before other provide methods.
controller(name, constructor)
directive(name, directiveFactory)
factory(name, providerFunction)
filter(name, filterFactory)
provider(name, providerType)
run(initializationFn)
Use this method to register work which
ng-mouseup="expression"
needs to be performed when the injector
<select ng-multiple>
with with the current module is finished
ng-non-bindable
ng-bind-
Plaintext means no string encapsulation
onload="expression" autoscroll="expression">
<input type="checkbox" ng-true-
returns link()
Pipes mean either|or
ng-options="select [as label] [group by

group] for ([key,] value) in object|array"
ng-pluralize|<ng-pluralize count="number"
when="object" offset="number">
ng-readonly="expression"
ng-repeat="( [key,] value) in object|array"
<option ng-selected="boolean">
loading.
service(name, constructor)
value(name, object)
name
Name of the module.
Holds the list of modules which the injector
will load before the current module is
loaded.
http://docs.angularjs.org/api/angular.Module
ng-src="string"
ng-style="string|object"
ng-submit="expression"
ng-switch="expression"|<ng-switch
on="expression">
ng-switch-when="plaintext"
ng-switch-default
ng-transclude templates
ng-view|<ng-view>
By ProLoser
www.DeanSofer.com
Page 2 of 4.

Scope Properties and Methods
Scope Properties and Methods (cont)
Global Functions (cont)
$root or $rootScope
$evalAsync(expression)
angular.equals(o1, o2)
Move to the top-most $scope (ng-app)

$parent
Move to the immediate parent of the current
$scope
Executes the expression on the current
Determines if two objects or two values are
scope at a later point in time
equivalent.
$new(isolate)
Creates a new child scope
$id
$on(name, listener)
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)
Listens on events of a given type

$watch(watchExp, listener(newVal, oldVal,
scope), objectEquality)
Watch a model (exp) for changes and fires
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
the listener callback. Pass true as a third
object or an array.
argument to watch an object's properties
angular.fromJson(json)
too.
The following directives create child scopes:
Deserializes a JSON string.

angular.identity()
Dispatches an event name downwards to all
ngInclude, ngSwitch, ngRepeat,
A function that returns its first argument.
child scopes
ngController, uiIf. Calls to the same
This function is useful when writing code in
ngController will create multiple instances and
the functional style.
$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
do not share scopes. Remember to traverse
Creates an injector function that can be
scope: ng-click="$parent.showPage=true"
used for retrieving services as well as for

dependency injection.
Global Functions
angular.bind(self, fn, args)
all changes stop. BEWARE OF
Returns a function which calls function fn
RECURSIVE CODE
bound to self (self becomes the this for fn).
$emit(name, args)
angular.bootstrap(element[, modules])
Dispatches an event name upwards through
Use this function to manually start up
the scope hierarchy
angular application.
$eval(expression)
angular.injector(modules)
up the tree to affect primitives on the intended
angular.copy(source[, destination])
Executes the expression on the current
Creates a deep copy of source, which
scope and returns the result
should be an object or an array.

angular.element(element)
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.
Wraps a raw DOM element or HTML string

as a jQuery element.
By ProLoser
www.DeanSofer.com
Page 3 of 4.

Global Functions (cont)
FormController
Deferred and Promise
angular.isNumber(value)
$pristine
$q.all([array of promises])
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.
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
rejected with the specified reason
angular.isUndefined(value)
Determines if a reference is undefined.
angular.lowercase(string)
NgModelController
$render()
Converts the specified string to lowercase.
Called when the view needs to

be updated. It is expected that
the user of the ng-model
angular.mock
Namespace from 'angular-mocks.js' which
directive will implement this
contains testing related code.
method.
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.
$setValidity(validationErrorKey, isValid)
$setViewValue(value)
$viewValue
mixed
$modelValu
mixed
e
$parsers
$formatters
Converts the specified string to uppercase.

angular.version
An object that contains information about
the current AngularJS version.
$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
Serializes input into a JSON-formatted

angular.uppercase(string)
array of function after reading val

from DOM to sanitize / convert /
angular.toJson(obj[, pretty])
string.
$q.reject( reason )
Creates a promise that is resolved as
mController
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
By ProLoser
www.DeanSofer.com
Page 4 of 4.

Angularjs Cheat Sheet: by Via

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Angularjs Cheat Sheet: by Via

Uploaded by

Copyright:

Available Formats

AngularJS Cheat Sheet

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

Directive Definition Object

Formats a number as a currency (ie

Finds links in text input and turns them into

Converts string to lowercase.

specified attributes/scope variables passed):

defaults to the name at registration.

Name of the current scope. Optional

@ or @attr - bind local model to value of

Formats a number as text. If the input is not

a number an empty string is returned.

Controller constructor function instantiated

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

before pre-linking phase and shared with

other directives if requested by name

Prefixes: ? - Don't raise error. ^ - Look on

parent elements too

:optionalParam]) in use it in your javascript.

1 Requires ngSanitize Module

restrict {string: 'EACM'}

$scope See $rootScope

Class: <div class="m

M - Comment: <!-- directive: my-directive

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

Published 9th August, 2012.

Last updated 31st July, 2014.

Measure your website readability!