AngularJS CheatSheet

AngularJS Cheat Sheet
by ProLoser via cheatography.com/1600/cs/513/

Filters Directives Global Functions

amount | currency[:s ymbol] ng-app="plaintext" angular.bind(self, fn, args)
Formats a number as a currency (ie $1,234.56). Returns a function which calls function fn bound to
ng-bind[-html-unsafe]="expression"
self (self becomes the this for fn).
date | date[ :format] ng-bind-template="string"
angular.bootstrap(element[, module s])
array | filter:expression ng-change="expression"
Selects a subset of items from array. Expression Use this function to manually start up angular
ng-checked="boolean" application.
takes string|Object|functi on()
ng-class[ -ev en| -od d]="string|object" angular.copy(source[, destinati on])
data | json
ng-[dbl]click="expression" Creates a deep copy of source, which should be an
Convert a JavaScript object into JSON string.
object or an array.
array | limitTo:limit ng-cloak="boolean"
Creates a new array containing only a specified angular.element(element)
ng-controller="plaintext"
number of elements in an array. Wraps a raw DOM element or HTML string as a
<html ng-csp> (Content Security Policy) jQuery element.
text | linky
ng-disabled="boolean" angular.equals(o1, o2)
Finds links in text input and turns them into html
<form|ng-form name="plaintext"> | ng-form="plaintext Determines if two objects or two values are equiva
links.
" lent.
string | lowercase
ng-hide|show="boolean" angular.extend(dst, src)
Converts string to lowercase.
Extends the destination object dst by copying all of
number | number[:fracti onSize] ng-href="plaintext{{string}}"
the properties from the src object(s) to dst.
Formats a number as text. If the input is not a ng-include="string"|<ng-include src="string" onload="e
angular.forEach(obj, iterator[, contex t])
number an empty string is returned. xpr ession" autoscrol l="expr ession" >
Invokes the iterator function once for each item in
array | orderBy:predicate[:r eve rse] ng-init="expression"
obj collection, which can be either an object or an
Predicate is function(*)|string|Array. Reverse is
<input ng-pattern="/regex/" ng-minlength ng-maxl array.
boolean
ength ng-required
angular.fromJson(json)
string | uppercase
<input ng-list="delimiter|regex"> Deserializes a JSON string.
Converts string to uppercase.
<input type="checkbox" ng-true-value="plaintext" ng-f angular.identity()
You can inject the $filter service and do $filt er( 'fi lterNa alse-value="plaintext"> A function that returns its first argument. This
me' )(v alue[, :optional Par am][, :optional Par am]) in use function is useful when writing code in the
ng-model="expression"
it in your javascript. functional style.
ng-mouse[down|enter|leave|move|over|up]="express
ion" angular.injector(modules)
Services
Creates an injector function that can be used for
<select ng-multiple>
$anchorScroll retrieving services as well as for dependency
ng-non-bindable injection.
$cacheFactory
ng-options="select [as label] [group by group] for angular.isArray(value)
compiledHtml = $compile(html)(scope)
([key,] value) in object|array" Determines if a reference is an Array.
$controller
ng-pluralize|<ng-pluralize count="number" when="o angular.isDate(value)
$cookieStore bject" offset="numb er" > Determines if a value is a date.
$document ng-readonly="expression" angular.isDefined(value)
$exceptionHandler(exception[, cause] ) ng-repeat="([key,] value) in object|array" Determines if a reference is defined.

$filter(name) <option ng-selected="boolean"> angular.isElement(value)

$http[( opt ions)] Determines if a reference is a DOM element (or
ng-src="string"
wrapped jQuery element).
$httpBackend ng-style="string|object"
angular.isFunction(value)
$injector ng-submit="expression" Determines if a reference is a Function.
$interpolate(text[, mustHaveE xpr ession] ) ng-switch="expression"|<ng-switch on="expression"> angular.isNumber(value)
$locale ng-switch-when="plaintext" Determines if a reference is a Number.
$location ng-switch-default angular.isObject(value)
$log templates Determines if a reference is an Object. Unlike
ng-transclude
typeof in JavaScript, nulls are not considered to be
$parse(expression) ng-view|<ng-view> objects.
$provide ng-bind-html="expression" angular.isString(value)
$q Determines if a reference is a String.
Bold means the actual directive
$resource(url[, paramDefaults][, actions]) Italics mean optional angular.isUndefined(value)
$rootElement Pipes mean either|or Determines if a reference is undefined.
Plaintext means no string encapsulation
$rootScope angular.lowercase(string)
Superscript
means notes or context
Converts the specified string to lowercase.
$route <Brackets> mean tag comptibility
Lack of <brackets> means the attribute can apply to angular.mock
$routeParams
any tag Namespace from 'angular-mocks.js' which contains
$routeProvider testing related code.
$sanitize(html)
Module angular.module(name[, requir es], configFn)

$scope See $rootScope The angular.module is a global place for creating
config(configFn)
$templateCache and registering Angular modules. Requires
Use this method to register work which needs to be
argument always creates a new module.
$timeout(fn[, delay][, invokeApp ly] ) performed on module loading.
angular.noop()
$window constant(name, object)
A function that performs no operations.
Because the constant are fixed, they get applied
angular.toJson(obj[, pretty ])
Directive Definition Object before other provide methods.
Serializes input into a JSON-formatted string.
controller(name, constructor)
name {string}
angular.uppercase(string)
Name of the current scope. Optional defaults to the directive(name, directiveFactory)
Converts the specified string to uppercase.
name at registration. factory(name, providerFunction)
angular.version
priority {integer} filter(name, filterFactory) An object that contains information about the
Specifies order multiple directives apply on single
provider(name, providerType) current AngularJS version.
DOM element (higher = first)
run(initializationFn)
terminal {true} FormController
Use this method to register work which needs to be
Current priority will be last set of directives to
performed when the injector with with the current $pristine
execute
module is finished loading.
scope {true | object} $dirty
service(name, constructor)
True - create child scope. Undef ined|f alse - use $valid
value(name, object)
parent scope. {} - isolate scope (with specified attrib $invalid
utes/scope variables passed): @ or @attr - bind name
Name of the module. $error
local model to value of DOM attribute (string), = or
=attr - bi-directional binding between local model requires http://docs.angularjs.org/api/ng.directive:form.FormCo
and the parent scope, & or &attr - execute an Holds the list of modules which the injector will load ntroller
expression in context of parent. Reference attr OR before the current module is loaded.
assumes model of same name NgModelController
http://docs.angularjs.org/api/angular.Module
controller funct ion($scope, $element, $attrs, $trans
$render() Called when the view needs to be
clude)
Scope Properties and Methods updated. It is expected that the user of
Controller constructor function instantiated before
the ng-model directive will implement
pre-linking phase and shared with other directives if $root or $rootScope
this method.
requested by name Move to the top-most $scope (ng-app)
$setValidity(validationErrorKey, isValid)
require {string | array[ str ings]} $parent
Require another controller (ngModel ). Prefixes: ? - Move to the immediate parent of the current $scope $setViewValue(value)

Don't raise error. ^ - Look on parent elements too $id $viewValue mixed

restrict {string: 'EACM'} Auto generated Unique ID $model mixed
E - Element: <my-d irective />. A - Attribute $destroy (event) Value
(default): <div my-di rectiv e="exp" />. C - Class: Broadcasted when a scope and its children are $parsers array of function after reading val from
<div class="my -di rective: exp;" />. M - Comment: being destroyed DOM to sanitize / convert / validate the

$apply(exp) value
template {string} Executes logic within the AngularJS context and $formatters array of functions to convert / validate
Replace current element with contents and refreshes all models checks. the value
migrates all attributes / classes
$broadcast(name, args) $error object
templateUrl {string} Dispatches an event name downwards to all child
$pristine boolean
Same as template but the template is loaded from scopes
the specified URL $dirty boolean
$destroy()
replace {bool ean} $valid boolean
Removes the current scope (and all of its children)
true: template replaces element instead of from the parent scope $invalid boolean
appending
$digest() http://docs.angularjs.org/api/ng.directive:ngModel.N
transclude {bool ean} Process all of the watchers of the current scope gModelController
Compiles contents on parent (pre-isolate) scope. and its children. Since watchers can change
Usually used with ngTransclude & templates. models, they will continue firing until all changes Deferred and Promise
compile funct ion(tE lement, tAttrs, fn transclud e(f unc stop. BEWARE OF RECURSIVE CODE
tion(scope, cloneLink ingFn) ) returns link() $q.all([array of promis es])
$emit(name, args)
Creates a Deferred object which represents a task
For transforming the template (rare, run once per Dispatches an event name upwards through the
which will finish in the future.
template instance). scope hierarchy
link funct ion(scope, iElement, iAttrs, controller) $q. defer()
$eval(expression)
Executed after template is cloned (run once per Creates a Deferred object which represents a task
Executes the expression on the current scope and
clone). Contains most logic (DOM listeners, etc). which will finish in the future.
returns the result
Contr oller can be an array. $q.reject(re ason)
$evalAsync(expression)
Creates a promise that is resolved as rejected with
http://docs.angularjs.org/guide/directive Executes the expression on the current scope at a
the specified reason
later point in time
$q.when(v alue )
$new(isolate)
Wraps an object that might be a value or a (3rd
Creates a new child scope
party) then-able promise into a $q promise
$on(name, listener)
Deferred.resolve(v alue )
Listens on events of a given type
Resolves the derived promise with the value
$watch(watchExp, listener(newVal, oldVal, scope),
Deferred.reject(re ason)
objectEquality)

objectEquality)
Rejects the derived promise with the reason
Watch a model (exp) for changes and fires the
listener callback. Pass true as a third argument to Deferred.promise

watch an object's properties too. Promise object associated with this deferred

Promise.then(successCallback, errorCallback)
The following directives create child scopes: ngInc
lude, ngSwi tch, ngRep eat , ngController , uiIf . Calls to http://docs.angularjs.org/api/ng.$q
the same ngController 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 arent.showPage=tru e"

Cheatographer Cheat Sheet Sponsor

ProLoser This cheat sheet was published on 9th August, 2012 FeedbackFair, increase your conversion rate today!
cheatography.com/proloser/ and was last updated on 13th February, 2013. Try it free!
www.DeanSofer.com http://www.FeedbackFair.com

AngularJS CheatSheet

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a AngularJS CheatSheet

Semelhante a AngularJS CheatSheet (20)

Mais de Abdul Basit

Mais de Abdul Basit (20)

AngularJS CheatSheet