AngularJS Cheat Sheet
by ProLoser via cheatography.com/1600/cs/513/
Filters Services Services (cont)
amount | currency[:symbol] $anchorScroll $window
Formats a number as a currency (ie $cacheFactory
$1,234.56). Directive Definition Object
compiledHtml = $compile (html)(scope)
date | date[:format] name {string}
$controller
array | filter:expression Name of the current scope. Optional
$cookieStore
defaults to the name at registration.
Selects a subset of items from array. $document
Expression takes string|Object|function() priority {integer}
$exceptionHandler(exception[, cause])
data | json Specifies order multiple directives apply
$filter(name)
on single DOM element (higher = first)
Convert a JavaScript object into JSON $http[(options)]
string. terminal {true}
$httpBackend
array | limitTo:limit Current priority will be last set of
$injector
directives to execute
Creates a new array containing only a
$interpolate(text[, mustHaveExpression])
specified number of elements in an scope {true | object}
$locale
array. True - create child scope. Undefined|f‐
$location
text | linky 1 alse - use parent scope. {} - isolate
$log scope (with specified attributes/scope
Finds links in text input and turns them
$parse(expression) variables passed): @ or @attr - bind
into html links.
local model to value of DOM attribute
$provide
string | lowercase (string), = or =attr - bi-directional binding
$q
Converts string to lowercase. between local model and the parent
$resource(url[, paramDefaults][, actions]) scope, & or &attr - execute an
number | number[:fractionSize]
$rootElement expression in context of parent.
Formats a number as text. If the input is
$rootScope Reference attr OR assumes model of
not a number an empty string is returned.
same name
$route
array | orderBy:predicate[:reverse]
controller function($scope, $element,
$routeParams
Predicate is function(*)|string|Array. $attrs, $transclude)
Reverse is boolean $routeProvider
Controller constructor function instan‐
$sanitize(html)
string | uppercase tiated before pre-linking phase and
$scope See $rootScope shared with other directives if requested
Converts string to uppercase.
$templateCache by name
You can inject the $filter service and do
$timeout (fn[, delay][, invokeApply])
$filter('filterName')(value[, :optionalParam][,
:optionalParam]) in use it in your javascript.
1 Requires ngSanitize Module
By ProLoser Published 9th August, 2012. Sponsored by ApolloPad.com
cheatography.com/proloser/ Last updated 29th February, 2020. Everyone has a novel in them. Finish
Page 1 of 5. Yours!
https://apollopad.com
AngularJS Cheat Sheet
by ProLoser via cheatography.com/1600/cs/513/
Directive Definition Object (cont) Directives Directives (cont)
require {string | array[strings]} ng-app="plaintext" ng-readonly="expression"
Require another controller (ngMo‐ ng-bind[-html-unsafe]="expression" ng-repeat="([key,] value) in object|array"
del). Prefixes: ? - Don't raise error. ^ ng-bind- <option ng-selected="boolean">
- Look on parent elements too template="string{{expression}}string{{expression}}" ng-src="string"
restrict {string: 'EACM'} ng-change="expression" ng-style="string|object"
E - Element: <my-directive />. A - ng-checked="boolean" ng-submit="expression"
Attribute (default): <div my-directiv‐
ng-class[-even|-odd]="string|object" ng-switch="expression"|<ng-switch
e="exp" />. C - Class: <div
ng-[dbl]click="expression" on="expression">
class="m
y-directive: exp;" />. M -
Comment: <!-- directive: my-direc‐ ng-cloak="boolean" ng-switch-when="plaintext"
tive exp --> ng-controller="plaintext" ng-switch-default
template {string} <html ng-csp> (Content Security Policy) ng-transclude templates
Replace current element with ng-disabled="boolean" ng-view|<ng-view>
contents and migrates all attributes / <form|ng-form name="plaintext"> | ng- ng-bind-html="expression"
classes form="plaintext"
Bold means the actual directive
templateUrl {string} ng-hide|show="boolean" Italics mean optional
Same as template but the template is ng-href="plaintext{{string}}" Pipes mean either|or
loaded from the specified URL Plaintext means no string encapsulation
ng-include="string"|<ng-include src="string"
Superscript means notes or context
replace {boolean} onload="expression" autoscroll="expression">
<Brackets> mean tag comptibility
true: template replaces element ng-init="expression"
Lack of <brackets> means the attribute
instead of appending <input ng-pattern="/regex/" ng-minlength ng-m‐ can apply to any tag
transclude {boolean} axlength ng-required
Compiles contents on parent (pre-i‐ <input ng-list="delimiter|regex"> Module
solate) scope. Usually used with <input type="checkbox" ng-true-value ="plaint‐ config(configFn)
ngTransclude & templates. ext" ng-false-value="plaintext">
Use this method to register work
compile function(tElement, tAttrs, fn ng-model="expression" which needs to be performed on
transclude(function(scope, cloneLink‐ ng-mousedown="expression" module loading.
ingFn) ) returns link()
ng-mouseenter="expression" constant(name, object)
For transforming the template (rare,
ng-mouseleave="expression" Because the constant are fixed, they
run once per template instance).
ng-mousemove="expression" get applied before other provide
link function(scope, iElement, iAttrs, methods.
ng-mouseover="expression"
controller)
ng-mouseup="expression" controller(name, constructor)
Executed after template is cloned
<select ng-multiple> directive(name, directiveFactory)
(run once per clone). Contains most
ng-non-bindable factory(name, providerFunction)
logic (DOM listeners, etc). Controller
can be an array. ng-options="select [as label] [group by group] for filter(name, filterFactory)
([key,] value) in object|array" provider(name, providerType)
http://docs.angularjs.org/guide/directive
ng-pluralize|<ng-pluralize count="number"
when="object" offset="number">
By ProLoser Published 9th August, 2012. Sponsored by ApolloPad.com
cheatography.com/proloser/ Last updated 29th February, 2020. Everyone has a novel in them. Finish
Page 2 of 5. Yours!
https://apollopad.com
AngularJS Cheat Sheet
by ProLoser via cheatography.com/1600/cs/513/
Module (cont) Scope Properties and Methods (cont) Global Functions
run(initializationFn) $destroy() angular.bind(self, fn, args)
Use this method to register work which Removes the current scope (and all of its Returns a function which calls function fn
needs to be performed when the injector children) from the parent scope bound to self (self becomes the this for
with with the current module is finished fn).
$digest()
loading.
Process all of the watchers of the current angular.bootstrap(element[, modules])
service(name, constructor) scope and its children. Since watchers Use this function to manually start up
value(name, object) can change models, they will continue angular application.
firing until all changes stop. BEWARE
name angular.copy(source[, destination])
OF RECURSIVE CODE
Name of the module. Creates a deep copy of source, which
$emit(name, args) should be an object or an array.
Holds the list of modules which the
Dispatches an event name upwards
injector will load before the current angular.element(element)
through the scope hierarchy
module is loaded. Wraps a raw DOM element or HTML
$eval(expression) string as a jQuery element.
http://docs.angularjs.org/api/angular.Module
Executes the expression on the current
angular.equals(o1, o2)
scope and returns the result
Scope Properties and Methods Determines if two objects or two values
$evalAsync(expression) are equivalent.
$root or $rootScope
Executes the expression on the current
Move to the top-most $scope (ng-app) angular.extend(dst, src)
scope at a later point in time
$parent Extends the destination object dst by
$new(isolate) copying all of the properties from the src
Move to the immediate parent of the
Creates a new child scope object(s) to dst.
current $scope
$on(name, listener) angular.forEach(obj, iterator[, context])
$id
Listens on events of a given type Invokes the iterator function once for
Auto generated Unique ID
each item in obj collection, which can be
$watch(watchExp, listener(newVal,
$destroy (event) either an object or an array.
oldVal, scope), objectEquality)
Broadcasted when a scope and its
Watch a model (exp) for changes and angular.fromJson(json)
children are being destroyed
fires the listener callback. Pass true as a Deserializes a JSON string.
$apply(exp) third argument to watch an object's
Executes logic within the AngularJS properties too.
context and refreshes all models checks.
The following directives create child
$broadcast(name, args) scopes: ngInclude, ngSwitch, ngRepeat,
Dispatches an event name downwards ngController, uiIf. Calls to the same ngCon‐
to all child scopes troller 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.showPa‐
ge=true"
By ProLoser Published 9th August, 2012. Sponsored by ApolloPad.com
cheatography.com/proloser/ Last updated 29th February, 2020. Everyone has a novel in them. Finish
Page 3 of 5. Yours!
https://apollopad.com
AngularJS Cheat Sheet
by ProLoser via cheatography.com/1600/cs/513/
Global Functions (cont) Global Functions (cont) NgModelController
angular.identity() angular.lowercase(string) $render() Called when the view needs
A function that returns its first argument. Converts the specified string to to be updated. It is expected
This function is useful when writing code lowercase. that the user of the ng-model
in the functional style. directive will implement this
angular.mock
method.
angular.injector(modules) Namespace from 'angular-mocks.js'
$setValidity(validationErrorKey, isValid)
Creates an injector function that can be which contains testing related code.
$setViewValue(value)
used for retrieving services as well as for
angular.module(name[, requires],
dependency injection. $viewValue mixed
configFn)
angular.isArray(value) $model‐ mixed
The angular.module is a global place for
Value
Determines if a reference is an Array. creating and registering Angular
modules. Requires argument always $parsers array of function after reading
angular.isDate(value)
creates a new module. val from DOM to sanitize /
Determines if a value is a date. convert / validate the value
angular.noop()
angular.isDefined(value) $formatters array of functions to convert /
A function that performs no operations.
Determines if a reference is defined. validate the value
angular.toJson(obj[, pretty])
angular.isElement(value) $error object
Serializes input into a JSON-formatted
Determines if a reference is a DOM $pristine boolean
string.
element (or wrapped jQuery element). $dirty boolean
angular.uppercase(string)
angular.isFunction(value) $valid boolean
Converts the specified string to
Determines if a reference is a Function. $invalid boolean
uppercase.
angular.isNumber(value) http://docs.angularjs.org/api/ng.directive:ng‐
angular.version
Model.NgModelController
Determines if a reference is a Number.
An object that contains information about
angular.isObject(value) the current AngularJS version.
Determines if a reference is an Object.
Unlike typeof in JavaScript, nulls are not FormController
considered to be objects.
$pristine
angular.isString(value) $dirty
Determines if a reference is a String. $valid
angular.isUndefined(value) $invalid
Determines if a reference is undefined. $error
http://docs.angularjs.org/api/ng.directive:fo‐
rm.FormController
By ProLoser Published 9th August, 2012. Sponsored by ApolloPad.com
cheatography.com/proloser/ Last updated 29th February, 2020. Everyone has a novel in them. Finish
Page 4 of 5. Yours!
https://apollopad.com
AngularJS Cheat Sheet
by ProLoser via cheatography.com/1600/cs/513/
Deferred and Promise
$q.all([array of promises])
Creates a Deferred object which represents a task which will
finish in the future.
$q. defer()
Creates a Deferred object which represents a task which will
finish in the future.
$q.reject(reason)
Creates a promise that is resolved as rejected with the
specified reason
$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
By ProLoser Published 9th August, 2012. Sponsored by ApolloPad.com
cheatography.com/proloser/ Last updated 29th February, 2020. Everyone has a novel in them. Finish
Page 5 of 5. Yours!
https://apollopad.com
