Show Menu

AngularJS Cheat Sheet by ProLoser

The official - unofficial AngularJS cheatsheet.

Filters

amount | curren­cy­[:s­ymb­ol]
Formats a number as a currency (ie $1,234.56).
date | date[­:fo­rma­t]
array | filter­:ex­pre­ssion
Selects a subset of items from array. Expression takes strin­g|O­bje­ct|­fun­cti­on()
data | json
Convert a JavaScript object into JSON string.
array | limitT­o:l­imit
Creates a new array containing only a specified number of elements in an array.
text | linky
Finds links in text input and turns them into html links.
string | lowerc­ase
Converts string to lowercase.
number | number­[:­fra­cti­onS­ize]
Formats a number as text. If the input is not a number an empty string is returned.
array | orderB­y:p­red­ica­te­[:r­eve­rse]
Predicate is functi­on(­*)|­str­ing­|Array. Reverse is boolean
string | upperc­ase
Converts string to uppercase.

You can inject the $filter service and do $filt­er(­'fi­lte­rNa­me'­)(v­alue[, :optio­nal­Par­am][, :optio­nal­Par­am]) in use it in your javasc­ript.

Services

$anc­hor­Scr­oll
$cac­heF­act­ory
compil­edHtml = $com­pil­e­(ht­ml)­(scope)
$con­tro­ller
$coo­kie­Store
$doc­ument
$exc­ept­ion­Han­dle­r­(ex­cep­tion[, cause])
$fil­ter­(­name)
$htt­p­[(­opt­ions)]
$htt­pBa­ckend
$inj­ector
$int­erp­ola­te­(t­ext[, mustHa­veE­xpr­ess­ion])
$loc­ale
$loc­ation
$log
$par­se­(e­xpr­ession)
$pro­vide
$q
$res­our­ce­(url[, paramD­efa­ults][, actions])
$roo­tEl­ement
$roo­tSc­ope
$route
$rou­teP­arams
$rou­teP­rov­ider
$san­iti­ze­(html)
$scope See $rootS­cope
$tem­pla­teC­ache
$tim­eou­t­(fn[, delay][, invoke­App­ly])
$win­dow

Directive Definition Object

name {string}
Name of the current scope. Optional defaults to the name at regist­ration.
prio­rity {inte­ger}
Specifies order multiple directives apply on single DOM element (higher = first)
term­inal {true}
Current priority will be last set of directives to execute
scope {true | object}
True - create child scope. Undef­ine­d|f­alse - 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
cont­rol­ler funct­ion­($s­cope, $element, $attrs, $trans­clude)
Controller constr­uctor function instan­tiated before pre-li­nking phase and shared with other directives if requested by name
requ­ire {string | array[­str­ings]}
Require another controller (ngMo­del). Prefixes: ? - Don't raise error. ^ - Look on parent elements too
rest­rict {string: 'EACM'}
E - Element: <m­y-d­ire­ctive />. A - Attrib­ute (default): <div my-di­rec­tiv­e=­"­exp­" />. C - Class: <div class=­"­my­-di­rec­tive: exp;" />. M - Comment: <!-- directive: my-di­rec­tive exp -->
temp­late {string}
Replace current element with contents and migrates all attributes / classes
temp­lat­eUrl {string}
Same as template but the template is loaded from the specified URL
repl­ace {bool­ean}
true: template replaces element instead of appending
tran­scl­ude {bool­ean}
Compiles contents on parent (pre-i­solate) scope. Usually used with ngTran­sclude & templates.
comp­ile funct­ion­(tE­lement, 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 funct­ion­(scope, iElement, iAttrs, contro­ller)
Executed after template is cloned (run once per clone). Contains most logic (DOM listeners, etc). Contr­oller can be an array.

http:/­/do­cs.a­ng­ula­rjs.or­g/g­uid­e/d­ire­ctive

 

Directives

ng-a­pp­="p­lai­nte­xt"
ng-b­ind­[-h­tml­-un­saf­e]­="e­xpr­ess­ion­"
ng-b­ind­-te­mpl­ate­=­"­str­ing­{{e­xpr­ess­ion­}}s­tri­ng{­{ex­pre­ssi­on}­}"
ng-c­han­ge­="e­xpr­ess­ion­"
ng-c­hec­ked­=­"­boo­lea­n"
ng-c­las­s[­-ev­en|­-od­d]­=­"­str­ing­|ob­jec­t"
ng-­[db­l]­cli­ck­="e­xpr­ess­ion­"
ng-c­loa­k­="bo­ole­an"
ng-c­ont­rol­ler­=­"­pla­int­ext­"
<html ng-c­sp­> (Content Security Policy)
ng-d­isa­ble­d­="bo­ole­an"
<­for­m|n­g-f­orm name="p­lai­nte­xt"> | ng-f­orm­=­"­pla­int­ext­"
ng-h­ide­|sh­ow­="b­ool­ean­"
ng-h­ref­=­"­pla­int­ext­{{s­tri­ng}­}"
ng-i­ncl­ude­=­"­str­ing­"­|<­ng­-in­clude src="st­rin­g" onloa­d="e­xpr­ess­ion­" autosc­rol­l="e­xpr­ess­ion­"­>
ng-i­nit­=­"­exp­res­sio­n"
<input ng-p­att­ern­=­"­/re­gex­/" ng-m­inl­ength ng-m­axl­ength ng-r­equ­ired
<input ng-l­ist­=­"­del­imi­ter­|re­gex­">
<input type="c­hec­kbo­x" ng-t­rue­-va­lue­=­"­pla­int­ext­" ng-f­als­e-v­alu­e­="pl­ain­tex­t">
ng-m­ode­l­="ex­pre­ssi­on"
ng-m­ous­e[d­own­|en­ter­|le­ave­|mo­ve|­ove­r|u­p]­="e­xpr­ess­ion­"
<select ng-m­ult­ipl­e>
ng-n­on-­bin­dable
ng-o­pti­ons­=­"­select [as label] [group by group] for ([key,] value) in object­|ar­ray­"
ng-p­lur­ali­ze­|<­n­g-p­lur­alize count=­"­num­ber­" when="o­bje­ct" offse­t="n­umb­er">
ng-r­ead­onl­y­="ex­pre­ssi­on"
ng-r­epe­at­="(­[key,] value) in object­|ar­ray­"
<option ng-s­ele­cte­d­="bo­ole­an">
ng-s­rc­="s­tri­ng"
ng-s­tyl­e­="st­rin­g|o­bje­ct"
ng-s­ubm­it­="e­xpr­ess­ion­"
ng-s­wit­ch­="e­xpr­ess­ion­"­|<­ng­-sw­itch on="­exp­res­sio­n">
ng-s­wit­ch-­whe­n­="pl­ain­tex­t"
ng-s­wit­ch-­def­ault
ng-t­ran­scl­ude templ­ates
ng-v­iew­|­<­ng-­vie­w>
ng-b­ind­-ht­ml­="e­xpr­ess­ion­"

Bold means the actual directive
Italics mean optional
Pipes mean either|or
Plaintext means no string encaps­ulation
Super­script 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

conf­ig(­con­fig­Fn)
Use this method to register work which needs to be performed on module loading.
cons­tan­t(name, object)
Because the constant are fixed, they get applied before other provide methods.
cont­rol­ler­(name, constr­uct­or)
dire­cti­ve(­name, direct­ive­Fac­tory)
fact­ory­(name, provid­erF­unc­tion)
filt­er(­name, filter­Fac­tory)
prov­ide­r(name, provid­erT­ype)
run(­ini­tia­liz­ati­onFn)
Use this method to register work which needs to be performed when the injector with with the current module is finished loading.
serv­ice­(name, constr­uct­or)
value(­name, object)
name
Name of the module.
requ­ires
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

$root or $roo­tSc­ope
Move to the top-most $scope (ng-app)
$par­ent
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
$app­ly(­exp)
Executes logic within the AngularJS context and refreshes all models checks.
$bro­adc­ast­(name, args)
Dispatches an event name downwards to all child scopes
$des­tro­y()
Removes the current scope (and all of its children) from the parent scope
$dig­est()
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
$emi­t(name, args)
Dispatches an event name upwards through the scope hierarchy
$eva­l(e­xpr­ess­ion)
Executes the expression on the current scope and returns the result
$eva­lAs­ync­(ex­pre­ssi­on)
Executes the expression on the current scope at a later point in time
$new­(is­ola­te)
Creates a new child scope
$on(­name, listen­er)
Listens on events of a given type
$wat­ch(­wat­chExp, listen­er(­newVal, oldVal, scope), object­Equ­ali­ty)
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: ngInc­lude, ngSwi­tch, ngRep­eat, ngCon­tro­ller, uiIf. Calls to the same ngCon­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"

 

Global Functions

angu­lar.bi­nd(­self, fn, args)
Returns a function which calls function fn bound to self (self becomes the this for fn).
angu­lar.bo­ots­tra­p(e­lem­ent[, module­s])
Use this function to manually start up angular applic­ation.
angu­lar.co­py(­sou­rce[, destin­ati­on])
Creates a deep copy of source, which should be an object or an array.
angu­lar.el­eme­nt(­ele­ment)
Wraps a raw DOM element or HTML string as a jQuery element.
angu­lar.eq­ual­s(o1, o2)
Determines if two objects or two values are equiva­lent.
angu­lar.ex­ten­d(dst, src)
Extends the destin­ation object dst by copying all of the properties from the src object(s) to dst.
angu­lar.fo­rEa­ch(obj, iterat­or[, contex­t])
Invokes the iterator function once for each item in obj collec­tion, which can be either an object or an array.
angu­lar.fr­omJ­son­(js­on)
Deseri­alizes a JSON string.
angu­lar.id­ent­ity()
A function that returns its first argument. This function is useful when writing code in the functional style.
angu­lar.in­jec­tor­(mo­dul­es)
Creates an injector function that can be used for retrieving services as well as for dependency injection.
angu­lar.is­Arr­ay(­val­ue)
Determines if a reference is an Array.
angu­lar.is­Dat­e(v­alue)
Determines if a value is a date.
angu­lar.is­Def­ine­d(v­alue)
Determines if a reference is defined.
angu­lar.is­Ele­men­t(v­alue)
Determines if a reference is a DOM element (or wrapped jQuery element).
angu­lar.is­Fun­cti­on(­val­ue)
Determines if a reference is a Function.
angu­lar.is­Num­ber­(va­lue)
Determines if a reference is a Number.
angu­lar.is­Obj­ect­(va­lue)
Determines if a reference is an Object. Unlike typeof in JavaSc­ript, nulls are not considered to be objects.
angu­lar.is­Str­ing­(va­lue)
Determines if a reference is a String.
angu­lar.is­Und­efi­ned­(va­lue)
Determines if a reference is undefined.
angu­lar.lo­wer­cas­e(s­tri­ng)
Converts the specified string to lowercase.
angu­lar.mock
Namespace from 'angul­ar-­moc­ks.js' which contains testing related code.
angu­lar.mo­dul­e(n­ame[, requir­es], config­Fn)
The angula­r.m­odule is a global place for creating and regist­ering Angular modules. Requires argument always creates a new module.
angu­lar.no­op()
A function that performs no operat­ions.
angu­lar.to­Jso­n(o­bj[, pretty­])
Serializes input into a JSON-f­orm­atted string.
angu­lar.up­per­cas­e(s­tri­ng)
Converts the specified string to uppercase.
angu­lar.ve­rsion
An object that contains inform­ation about the current AngularJS version.

NgModelController

$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)
$viewValuemixed
$model­Valuemixed
$parsersarray of function after reading val from DOM to sanitize / convert / validate the value
$forma­ttersarray of functions to convert / validate the value
$errorobject
$pristineboolean
$dirtyboolean
$validboolean
$invalidboolean

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

$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

 

Share This Cheat Sheet!

Favourited by 45 Members:

xtiam57 twbcs BobGuzek John Li Jaime MADRID johneric72 mehdi abdulqabiz yabasha yasha AntrikshPatel and 35 more ...

Comments

Vinay Vinay, 20:00 9 Aug 12

I think the angularjs fiddles is a great resource, add this to the cheatsheet:

https://github.com/angular/angular.js/wiki/JsFiddle-Examples

Gary Weaver Gary Weaver, 10:01 20 May 13

Great stuff! Would be good to add compatible Angular version(s) at the top.

Dillon Dillon, 10:19 20 May 13

Is it just me, or does the 'find' not work for this page? If i type in 'ng-app' it doesn't find anything...

DaveChild DaveChild, 13:13 20 May 13

Hi Dillon. Well spotted - looks like an issue with JavaScript handling of shy hyphens, which are used to help cheat sheet text wrap well. I'm working on a solution now.

DaveChild DaveChild, 13:27 20 May 13

Hi Dillon. I've fixed the search and "ng-app" now returns the right rows. Thanks for letting me know about the problem!

DaveChild DaveChild, 11:22 20 May 13

Dean, your excellent cheat sheet made the front page of Hacker News: https://news.ycombinator.com/item?id=5727988

ProLoser ProLoser, 11:25 20 May 13

Cheatography's built-in search sucks. You're better off using your browser to do a native page search

DaveChild DaveChild, 13:38 20 May 13

The build-in search was choking on soft hyphens, but I've fixed the problem now and search is working normally.

ProLoser ProLoser, 01:51 21 May 13

Hey Dave!

I had no idea you were still working on this website, I was under the impression it was one of those side projects that just fell by the wayside.

HOW do I let other people collaborate on the cheat sheet with me? It's really annoying that I'm the only one who can work on a sheet.

Also, have you considered supporting hyperlinks (I know sheets are designed to be printed) like [test](http://example.com)

Also, can you add support for <br> so that I can list sub-details instead of cramming them together like I had to for 'rest­rict'

Also, how about descriptions at the TOP of content panes?

Also, maybe add underscore?

DaveChild DaveChild, 19:15 28 May 13

Not exactly by the wayside, but I've been struggling with the new PDF builder for ages. Didn't seem to be much point in working on anything else until the compilation process and builder were fixed (and both are almost finished).

Collaboration is something I'm going to be adding in the future, but I'm not planning much until after the builder stuff is done. Hyperlinks in that style and line breaks are both good ideas, and as above - as soon as the new builder is done those are on the list. Line breaks will be a little tricky, as the new builder does a lot of line count estimation to try and paginate the PDFs better, but definitely something I want to add.

For underscore, do you mean in the titles? I'll add that in the current round of dev.

ProLoser ProLoser, 19:28 28 May 13

I'm just talking about having more formatting options at my disposal. Personally, this specific cheatsheet isn't super PDF friendly, and I think almost everyone can 'print to pdf' nowadays, so it might be easier to focus on a simple print stylesheet.

Bruno Felthes Bruno Felthes, 14:15 13 Feb 14

Include the ng-animation tag.
Some good samples at the site:
http://www.nganimate.org

Karin Karin, 07:48 19 Jun 14

The PDFs don't display the text correctly.

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.