Quantcast
Channel: Hacker News 50
Viewing all articles
Browse latest Browse all 9433

AngularJS Cheat Sheet by ProLoser - Cheatography.com

$
0
0

Comments:"AngularJS Cheat Sheet by ProLoser - Cheatography.com"

URL:http://www.cheatography.com/proloser/cheat-sheets/angularjs/


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)
$scopeSee $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­lerfunct­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­ilefunct­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).

linkfunct­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­"
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­engthng-m­axl­engthng-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


Viewing all articles
Browse latest Browse all 9433

Trending Articles