Scribd
Upload
73 views

Angularjs Cheat Sheet: by Via

s a scripting language which helps you create interactive web pages whereas Typescript is a superset of JavaScript. Typescript code needs to be compiled wh

Uploaded by

Saurabh Thakur
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
73 views

Angularjs Cheat Sheet: by Via

s a scripting language which helps you create interactive web pages whereas Typescript is a superset of JavaScript. Typescript code needs to be compiled wh

Uploaded by

Saurabh Thakur
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

AngularJS Cheat Sheet

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

Filters Services Services (cont)

amount | currency[:symbol] $anc​hor​Scr​oll $win​dow


Formats a number as a currency (ie $cac​heF​act​ory
$1,234.56). Directive Definition Object
compil​edHtml = $com​pil​e ​(ht​ml)​(scope)
date | date[:format] name {string}
$con​tro​ller
array | filter:expression Name of the current scope. Optional
$coo​kie​Store
defaults to the name at regist​ration.
Selects a subset of items from array. $doc​ument
Expression takes strin​g|O​bje​ct|​fun​cti​on() prio​rity {inte​ger}
$exc​ept​ion​Han​dle​r​(ex​cep​tion[, cause])
data | json Specifies order multiple directives apply
$fil​ter​(​name)
on single DOM element (higher = first)
Convert a JavaScript object into JSON $htt​p​[(​opt​ions)]
string. term​inal {true}
$htt​pBa​ckend
array | limitTo:limit Current priority will be last set of
$inj​ector
directives to execute
Creates a new array containing only a
$int​erp​ola​te​(t​ext[, mustHa​veE​xpr​ess​ion])
specified number of elements in an scope {true | object}
$loc​ale
array. True - create child scope. Undef​ine​d|f​‐
$loc​ation
text | linky 1 alse - use parent scope. {} - isolate
$log scope (with specified attrib​ute​s/scope
Finds links in text input and turns them
$par​se​(e​xpr​ession) variables passed): @ or @attr - bind
into html links.
local model to value of DOM attribute
$pro​vide
string | lowercase (string), = or =attr - bi-dir​ect​ional binding
$q
Converts string to lowercase. between local model and the parent
$res​our​ce​(url[, paramD​efa​ults][, actions]) scope, & or &attr - execute an
number | number[:fractionSize]
$roo​tEl​ement expression in context of parent.
Formats a number as text. If the input is
$roo​tSc​ope Reference attr OR assumes model of
not a number an empty string is returned.
same name
$route
array | orderBy:predicate[:reverse]
cont​rol​ler funct​ion​($s​cope, $element,
$rou​teP​arams
Predicate is functi​on(​*)|​str​ing​|Array. $attrs, $trans​clude)
Reverse is boolean $rou​teP​rov​ider
Controller constr​uctor function instan​‐
$san​iti​ze​(html)
string | uppercase tiated before pre-li​nking phase and
$scope See $rootS​cope shared with other directives if requested
Converts string to uppercase.
$tem​pla​teC​ache by name
You can inject the $filter service and do
$tim​eou​t ​(fn[, delay][, invoke​App​ly])
$filt​er(​'fi​lte​rNa​me'​)(v​alue[, :optio​nal​Par​am][,
:optio​nal​Par​am]) in use it in your javasc​ript.
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)

requ​ire {string | array[​str​ings]} 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"
rest​rict {string: 'EACM'} ng-change="expression" ng-style="string|object"
E - Element: <m​y-d​ire​ctive />. A - ng-checked="boolean" ng-submit="expression"
Attrib​ute (default): <div my-di​rec​tiv​‐
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​-di​rec​tive: exp;" />. M -
Comment: <!-- directive: my-di​rec​‐ ng-cloak="boolean" ng-s​wit​ch-​whe​n​="pl​ain​tex​t"
tive exp --> ng-controller="plaintext" ng-s​wit​ch-​def​ault

temp​late {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
temp​lat​eUrl {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 encaps​ulation
ng-include="string"|<ng-include src="string"
Super​script means notes or context
repl​ace {bool​ean} onload="expression" autoscroll="expression">
<Br​ack​ets> mean tag compti​bility
true: template replaces element ng-init="expression"
Lack of <br​ack​ets> means the attribute
instead of appending <input ng-p​att​ern​=​"​/re​gex​/" ng-m​inl​ength ng-m​‐ can apply to any tag
tran​scl​ude {bool​ean} axl​ength ng-r​equ​ired

Compiles contents on parent (pre-i​‐ <input ng-list="delimiter|regex"> Module


solate) scope. Usually used with <input type="c​hec​kbo​x" ng-t​rue​-va​lue​ =​"​pla​int​‐ config(configFn)
ngTran​sclude & templates. ext​" ng-f​als​e-v​alu​e​="pl​ain​tex​t">
Use this method to register work
comp​ile funct​ion​(tE​lement, tAttrs, fn ng-model="expression" which needs to be performed on
transc​lud​e(f​unc​tio​n(s​cope, cloneL​ink​‐ ng-mousedown="expression" module loading.
ingFn) ) returns link()
ng-mouseenter="expression" constant(name, object)
For transf​orming 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 funct​ion​(scope, iElement, iAttrs, methods.
ng-mouseover="expression"
contro​ller)
ng-mouseup="expression" controller(name, constructor)
Executed after template is cloned
<select ng-m​ult​ipl​e> directive(name, directiveFactory)
(run once per clone). Contains most
ng-non-bindable factory(name, providerFunction)
logic (DOM listeners, etc). Contr​oller
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:/​/do​cs.a​ng​ula​rjs.or​g/g​uid​e/d​ire​ctive
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) $des​tro​y() 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).
$dig​est()
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 applic​ation.
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
$emi​t(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
$eva​l(e​xpr​ess​ion) string as a jQuery element.
http:/​/do​cs.a​ng​ula​rjs.or​g/a​pi/​ang​ula​r.M​odule
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
$eva​lAs​ync​(ex​pre​ssi​on) are equiva​lent.
$root or $roo​tSc​ope
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
$par​ent Extends the destin​ation object dst by
$new​(is​ola​te) 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, listen​er) 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 collec​tion, which can be
$wat​ch(​wat​chExp, listen​er(​newVal,
$destroy (event) either an object or an array.
oldVal, scope), object​Equ​ali​ty)
Broadc​asted 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 Deseri​alizes a JSON string.
$app​ly(​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
$bro​adc​ast​(name, args) scopes: ngInc​lude, ngSwi​tch, ngRep​eat,
Dispatches an event name downwards ngCon​tro​ller, uiIf. Calls to the same ngCon​‐
to all child scopes tro​ller will create multiple instances and do
not share scopes. Remember to traverse
up the tree to affect primi​tives on the
intended scope: ng-cl​ick​="$p​are​nt.s​ho​wPa​‐
ge=​tru​e"

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) NgMode​lCo​ntr​oller

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 'angul​ar-​moc​ks.js'
$setVa​lid​ity​(va​lid​ati​onE​rro​rKey, isValid)
Creates an injector function that can be which contains testing related code.
$setVi​ewV​alu​e(v​alue)
used for retrieving services as well as for
angular.module(name[, requires],
dependency injection. $viewValue mixed
configFn)
angular.isArray(value) $model​‐ mixed
The angula​r.m​odule is a global place for
Value
Determines if a reference is an Array. creating and regist​ering 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) $forma​tters array of functions to convert /
A function that performs no operat​ions.
Determines if a reference is defined. validate the value
angular.toJson(obj[, pretty])
angular.isElement(value) $error object
Serializes input into a JSON-f​orm​atted
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:/​/do​cs.a​ng​ula​rjs.or​g/a​pi/​ng.d​ir​ect​ive​:ng​‐
angular.version
Mod​el.N​gM​ode​lCo​ntr​oller
Determines if a reference is a Number.
An object that contains inform​ation about
angular.isObject(value) the current AngularJS version.
Determines if a reference is an Object.
Unlike typeof in JavaSc​ript, nulls are not FormCo​ntr​oller
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:/​/do​cs.a​ng​ula​rjs.or​g/a​pi/​ng.d​ir​ect​ive​:fo​‐
rm.F​or​mCo​ntr​oller

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.a​ll(​[array of promis​es])
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.r​eje​ct(​re​aso​n)
Creates a promise that is resolved as rejected with the
specified reason

$q.w​hen​( v​alu​e)
Wraps an object that might be a value or a (3rd party) then-
able promise into a $q promise

Defe​rre​d.r​eso​lve​( v​alu​e)
Resolves the derived promise with the value

Defe​rre​d.r​eje​ct(​re​aso​n)
Rejects the derived promise with the reason

Defe​rre​d.p​rom​ise
Promise object associated with this deferred

Prom​ise.th​en(​suc​ces​sCa​llback, errorC​all​back)

http:/​/do​cs.a​ng​ula​rjs.or​g/a​pi/​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

You might also like