AngularJS Cheat Sheet by ProLoser ProLoser via 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).
$cacheFactory compiledHtml = $compile (html)(scope) $compile(html)(scope)
date | date[:format] array | filter:expre filter:expression ssion Selects a subset of items from array. Expression takes string|Object|function()
$controller $cookieStore $document (exception[, [, cause] ) $exceptionHandler (exception
data | json Convert a JavaScript JavaScript object into JSON string.
$filter(name) $filter (name) $http[(options)] $http [(options)]
array | limitTo:limit Creates a new array containing only a specified number of elements in an array. text | linky 1 html links. string | l owercase Converts string to lowercase. number | number[:fractionSize]
defaults to the name at registration. priority {integer} Specifies order multiple directives apply on single DOM element (higher = first) terminal {true} Current priority will will be last set of directives to execute scope {true | object} True - create child scope. Undefined|false -
$httpBackend
use parent scope. {} {} - isolate scope (with
$injector
specified attributes/scope variables passed):
$interpolate(text $interpolate (text[, [, mustHaveExpression mustHaveExpression] ] )
Finds links in text input and turns them into
Name of the current scope. Optional
@ or @attr - bind local model to value of DOM attribute (string), = or =attr - bi-
$locale
directional binding between local model and
$location
the parent scope, & or &attr - execute an
$log $parse(expression) $parse (expression)
expression in context of parent. Reference attr OR assumes model of same name controller function($scope 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[, $resource (url[, paramDefaults][, actions])
before pre-linking phase and shared with
array | orderBy:predicate [:reverse] Predicate is function(*)|string|Array. function(*)| string|Array. Reverse is boolean string | uppercase Converts string to uppercase. You can inject can inject the $filter service and do
$rootElement $rootScope
other directives if requested by name require {string | array[strings]} Require another controller (ngModel ( ngModel ). ).
$route
Prefixes: ? - Don't raise error. ^ - Look on
$routeParams
parent elements too
$filter('filterName')(value[, $filter('filterNam e')(value[, :optionalPara :optionalParam][, m][,
$routeProvider
:optiona lParam]) in lParam]) in use it in in your javascript.
$sanitize(html) $sanitize (html)
1 Requires ngSanitize Module
$transclude)
restrict {string: 'EACM'} E - Element: Element:
. A - Attribute (default):
. C -
$scope See $rootScope
class="my-directive : exp;" />. Class:
ng-bind-html="expression" ng-bind-html ="expression"
> (Content Security Policy)
means the actual directive Bold means Bold
ng-disabled="boolean" ng-disabled="boolean"
Italics mean mean optional
Replace current element with contents and migrates all attributes / classes templateUrl {string} Same as template but but the template is loaded from the specified URL
< form|ng-form name="plaintext"> | ngform|ng-form name="plaintext"> form="plaintext" form ="plaintext"
Pipes mean either|or Plaintext means no string encapsulation Superscript means notes or context
ng-hide|show="boolean" ng-hide|show="boolean"
mean tag comptibility
true : template replaces element instead of
ng-href="plaintext{{string}}" ng-href="plaintext{{string}}"
Lack of means the attribute can
appending
ng-include="string"|< ng-include ="string"|
replace {boolean}
transclude {boolean} Compiles contents on parent (pre-isolate (pre-isolate)) scope. Usually used with ngTransclude & templates.
onload="expression" onload="expr ession" autoscroll="expr autoscroll="expression" ession" > ng-init="expression" ng-init="expression"
function(tElement, t, tAttrs, fn compile function(tElemen transclude(function(scope, transclude(fu nction(scope, cloneLinkingFn) )
ng-list="delimiter|regex">
returns link() For transforming the template (rare, run once
value="plaintext" ng-falsevalue="plaintext"
per template instance).
value="plaintext"> value ="plaintext">
function(scope,, iElement, iAttrs, controller) link function(scope Executed after template is cloned (run once per clone). Contains most logic (DOM listeners, etc). Controller can can be an array.
ng-model="expression" ng-model ="expression" ="expression" ng-mousedown="expression" ng-mousedown ="expression" ng-mouseenter="expression" ng-mouseenter ng-mouseleave="expression" ng-mouseleave ="expression"
http://docs.angularjs.org/guide/directive
ng-mousemove="expression" ng-mousemove ="expression" ="expression" ng-mouseover="expression" ng-mouseover
Directives ng-app="plaintext" ng-app ="plaintext" ng-bind[-html-unsafe] ="expression"
template="string{{expr template ="string{{expression}}string ession}}string{{expression} {{expression}}" }" ="expression" ng-change="expression" ng-change ng-checked="boolean" ng-checked ="boolean" ng-class[-even|-odd] ="string|object" ="string|object" ng-[dbl] click="expression" click="expression" ng-cloak="boolean" ng-cloak="boolean"
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, controller(na me, constructo constructor) r) directive(name, directive(na me, directiveFac directiveFactory) tory) factory(name, factory(n ame, providerFunc providerFunction) tion) filter(name, filterFactory filterFactory)) provider(name, provider(nam e, providerTyp providerType) e) run(initializationFn) Use this method to register work which
ng-mouseup="expression" ng-mouseup ="expression"
needs to be performed when the injector
>
with with the current module is finished
ng-non-bindable
ng-bind-
apply to any tag
ng-options="select ng-options ="select [as [as label] [group by group] for group] for ([key,] ([key,] value) in object|array" ng-pluralize| ng-readonly="expression" ng-readonly ="expression" ="([key,] [key,] value) in object|array" ng-repeat="( ng-repeat ng-selected="boolean">
loading. service(name, constructor) value(name,, object) value(name 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/ang http://docs.angula rjs.org/api/angular.Module ular.Module
ng-src="string" ng-src ="string" ng-style="string|object" ng-style ="string|object" ng-submit="expression" ng-submit="expression" ng-switch="expression"|< ng-switch ="expression"| ="plaintext" ng-switch-when="plaintext" ng-switch-when ng-switch-default ng-transclude templates > 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 ProLoser via via cheatography.com/1600/cs/513/
Scope Properties and Methods
Scope Properties and Methods (cont)
Global Functions (cont)
$root or $root or $rootScope
$evalAsync(expression)
angular.equals(o1, 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, $watch(wa tchExp, listener(ne listener(newVal, wVal, oldVal, scope), objectEquality) Watch a model (exp) for changes and fires
angular.extend(dst, angular.exten d(dst, src) Extends the destination object dst by copying all of the properties from the src object(s) to dst. angular.forEach(obj, angular.forEac h(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 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 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 will create multiple instances and
the functional style.
$destroy() Removes the current scope (and all of its children) from the parent scope
do not share not share scopes. Remember to t raverse
Creates an injector function that can be
scope: ng-click="$parent.showPage=true"
used for retrieving services as well as for
$digest() Process all of the watchers of the current scope and its children. Since watchers can change models, they will continue firing until
dependency injection. Global Functions angular.bind(self, angular.bind(s elf, 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
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 3 of 4.
https://readability-score.com
AngularJS Cheat Sheet by ProLoser ProLoser via 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. 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.d http://docs.angula rjs.org/api/ng.directive:form.For irective:form.For
Creates a promise that is resolved as
mController
rejected with the specified reason
angular.isUndefined(value) Determines if a reference is undefined. angular.lowercase(string)
NgModelController $ren $r ende der( r())
Converts the specified string to lowercase.
Call Ca lled ed wh when en th the e view view ne need eds s 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 argument always creates a new module. angular.noop() A function that performs no operations.
$setValidity(validationErrorKe $setValidity(valid ationErrorKey, y, isValid) $setViewValue(value) $vi view ewVa Vallue
mixe mi xed d
$modelValu
mixed
e $par $p arse sers rs
$forma $fo rmatte tters rs
An object that contains information about the current AngularJS version.
(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 t he reason Deferred.promise Promise object associated with this deferred Promise.then(successCallback, errorCallback) http://docs.angularjs.org/api/ng.$q
array arr ay of func functio tions ns to conv conver ertt / validate the value
angular.uppercase(string)
angular.version
Wraps an object that might be a value or a
validate the value
Serializes input into a JSON-formatted
Converts the specified string to uppercase.
$q.when(value )
arra ar ray y of of fu func ncti tion on af afte terr re read adin ing g va vall from DOM to sanitize / convert /
angular.toJson(obj [, pretty] ) string.
$q.reject(reason )
$error
object
$pristine
boolean
$dirty
boolean
$valid
boolean
$invalid
boolean
http://docs.angularjs.org/api/ng.d http://docs.angula rjs.org/api/ng.directive:ngMode irective:ngModel. l. NgModelController
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