AngularJS Cheat Sheet

In this article, we will discuss some of the AngularJS features. You can follow this AngularJS cheat sheet to build your application. We’ve tried to cover Angular Filter, Services, Directives, Module, Global Functions and a lot more in this post.

Angular is a JavaScript front-end framework, which is used to develop web and mobile apps. As the name suggests, it is a declarative approach to developing an application. It is, therefore, different from other JavaScript frameworks like React, which is an application of higher-order JavaScript.

Filters

Keyword	Uses
amount | currency[:symbol]	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­|Ob­jec­t|f­unc­tion()
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.
text | linky 1	Finds links in text input and turns them into html links.
string | lowercase	Converts string to lowercase.
number | number[:fractionSize]	Formats a number as text. If the input is not a number an empty string is returned.
array | orderBy:predicate[:reverse]	Predicate is functi­on(­*)|­str­ing­|Array. Reverse is boolean
string | uppercase	Converts string to uppercase.
You can inject the $filter service and do $filte­r(‘­fil­ter­Nam­e’)­(va­lue[, :optio­nal­Par­am][, :optio­nal­Param]) in use it in your javasc­ript. 1 Requires ngSanitize Module

Services

Keyword
$ancho­rScroll
$cache­Factory
compil­edHtml = $compile(html)­(scope)
$contr­oller
$cooki­eStore
$document
$excep­tio­nHa­ndler(exception[, cause])
$filter(name)
$http[(opti­ons)]
$httpB­ackend
$injector
$inter­polate(text[, mustHa­veE­xpr­ession])
$locale
$location
$log
$parse(expre­ssion)
$provide
$q
$resource(url[, paramD­efa­ults][, actions])
$rootE­lement
$rootScope
$route
$route­Params
$route­Pro­vider
$sanitize(html)
$scope See $rootScope
$templ­ate­Cache
$timeout(fn[, delay][, invoke­Apply])
$window

Directive Definition Object

Keyword	Uses
name {string}	Name of the current scope. Optional defaults to the name at regist­ration.
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 specified attrib­ute­s/scope variables passed): @ or @attr – bind local model to value of DOM attribute (string), = or =attr – bi-dir­ect­ional 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 functi­on(­$scope, $element, $attrs, $trans­clude)	Controller constr­uctor function instan­tiated before pre-li­nking phase and shared with other directives if requested by name
require {string | array[­str­ings]}	Require another controller (ngModel). Prefixes: ? – Don’t raise error. ^ – Look on parent elements too
restrict {string: ‘EACM’}	E – Element: <my­-di­rective />. A – Attribute (default): <div my-dir­ective=”ex­p” />. C – Class: <div class=­”my-dir­ective: exp;” />. M – Comment: <!– directive: my-dir­ective exp –>
template {string}	Replace current element with contents and migrates all attributes / classes
templa­teUrl {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-i­solate) scope. Usually used with ngTran­sclude & templates.
compile functi­on(­tEl­ement, tAttrs, fn transc­lud­e(f­unc­tio­n(s­cope, cloneL­ink­ingFn) ) returns link()	For transf­orming the template (rare, run once per template instance).
link functi­on(­scope, iElement, iAttrs, contro­ller)	Executed after template is cloned (run once per clone). Contains most logic (DOM listeners, etc). Controller can be an array.
http:/­/do­cs.a­ng­ula­rjs.or­g/g­uid­e/d­ire­ctive

Directives

Keyword
ng-app=”plaintext”
ng-bind[-html-unsafe]=”expression”
ng-bind-template=”string{{expression}}string{{expression}}”
ng-change=”expression”
ng-checked=”boolean”
ng-class[-even|-odd]=”string|object”
ng-[dbl]click=”expression”
ng-cloak=”boolean”
ng-controller=”plaintext”
<html ng-csp> (Content Security Policy)
ng-disabled=”boolean”
<form|ng-form name=”plaintext”> | ng-form=”plaintext”
ng-hide|show=”boolean”
ng-href=”plaintext{{string}}”
ng-include=”string”|<ng-include src=”string” onload=”expression” autoscroll=”expression”>
ng-init=”expression”
<input ng-pattern=”/r­ege­x/” ng-min­length ng-max­length ng-req­uired
<input ng-list=”delimiter|regex”>
<input type=”c­hec­kbo­x” ng-tru­e-value=”pl­ain­tex­t” ng-fal­se-­value=”pl­ain­tex­t”>
ng-model=”expression”
ng-mousedown=”expression”
ng-mouseenter=”expression”
ng-mouseleave=”expression”
ng-mousemove=”expression”
ng-mouseover=”expression”
ng-mouseup=”expression”
<select ng-mul­tiple>
ng-non-bindable
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”>
ng-src=”string”
ng-style=”string|object”
ng-submit=”expression”
ng-switch=”expression”|<ng-switch on=”expression”>
ng-swi­tch­-when=”pl­ain­tex­t”
ng-swi­tch­-de­fault
ng-transcludetemplates
ng-view|<ng-view>
ng-bind-html=”expression”
Bold means the actual directive Italics mean optional Pipes mean either|or Plaintext means no string encaps­ulation Supers­cript means notes or context <Br­ack­ets> mean tag compti­bility Lack of <br­ack­ets> means the attribute can apply to any tag

Module

Keyword	Uses
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 needs to be performed when the injector with with the current module is finished 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:/­/do­cs.a­ng­ula­rjs.or­g/a­pi/­ang­ula­r.M­odule

Scope Properties and Methods

Keyword	Uses
$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)	Broadc­asted when a scope and its children are being destroyed
$apply­(exp)	Executes logic within the AngularJS context and refreshes all models checks.
$broad­cas­t(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(­exp­res­sion)	Executes the expression on the current scope and returns the result
$evalA­syn­c(e­xpr­ession)	Executes the expression on the current scope at a later point in time
$new(i­solate)	Creates a new child scope
$on(name, listener)	Listens on events of a given type
$watch­(wa­tchExp, listen­er(­newVal, oldVal, scope), object­Equ­ality)	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, ngCont­roller, uiIf. Calls to the same ngCont­roller will create multiple instances and do not share scopes. Remember to traverse up the tree to affect primitives on the intended scope: ng-cli­ck=­”­$pa­ren­t.s­how­Pag­e=t­rue­”

Global Functions

Keyword	Uses
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 applic­ation.
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.
angular.equals(o1, o2)	Determines if two objects or two values are equiva­lent.
angular.extend(dst, src)	Extends the destin­ation 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 collec­tion, which can be either an object or an array.
angular.fromJson(json)	Deseri­alizes 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)	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.
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.
angular.isNumber(value)	Determines if a reference is a Number.
angular.isObject(value)	Determines if a reference is an Object. Unlike typeof in JavaSc­ript, 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 ‘angul­ar-­moc­ks.js’ which contains testing related code.
angular.module(name[, requires], configFn)	The angula­r.m­odule is a global place for creating and regist­ering Angular modules. Requires argument always creates a new module.
angular.noop()	A function that performs no operat­ions.
angular.toJson(obj[, pretty])	Serializes input into a JSON-f­orm­atted string.
angular.uppercase(string)	Converts the specified string to uppercase.
angular.version	An object that contains inform­ation about the current AngularJS version.

FormCo­ntr­oller

</tr?

Keyword
$pristine
$dirty
$valid
$invalid
$error
http:/­/do­cs.a­ng­ula­rjs.or­g/a­pi/­ng.d­ir­ect­ive­:fo­rm.F­or­mCo­ntr­oller

NgMode­lCo­ntr­oller

Keyword	Uses
$render()	Called when the view needs to be updated. It is expected that the user of the ng-model directive will implement this method.
$setVa­lid­ity­(va­lid­ati­onE­rro­rKey, isValid)
$setVi­ewV­alu­e(v­alue)
$viewValue	mixed
$model­Value	mixed
$parsers	array of function after reading val from DOM to sanitize / convert / validate the value
$forma­tters	array of functions to convert / validate the value
$error	object
$pristine	boolean
$dirty	boolean
$valid	boolean
$invalid	boolean
http:/­/do­cs.a­ng­ula­rjs.or­g/a­pi/­ng.d­ir­ect­ive­:ng­Mod­el.N­gM­ode­lCo­ntr­oller

Deferred and Promise

Keyword	Uses
$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
Deferr­ed.r­es­olve(value)	Resolves the derived promise with the value
Deferr­ed.r­eject(reason)	Rejects the derived promise with the reason
Deferr­ed.p­romise	Promise object associated with this deferred
Promis­e.t­hen­(su­cce­ssC­all­back, errorC­all­back)
http:/­/do­cs.a­ng­ula­rjs.or­g/a­pi/­ng.$q

AngularJS Cheat Sheet