AngularJS Cheatsheet - API, Directives, Filters & More

A comprehensive list of built-in AngularJS directives for manipulating the DOM, handling events, and managing forms.

/* *******************************************************************************************
 * NG MODULE > DIRECTIVES
 * ******************************************************************************************* */


// Use this directive to auto-bootstrap an AngularJS application.
// Only one AngularJS application can be auto-bootstrapped per HTML document.
// You can specify an AngularJS module to be used as the root module for the application.
'ng-app'

// The ngBind attribute tells AngularJS to replace the text content of the specified HTML element with
// the value of a given expression, and to update the text content when the value of that expression changes.
'ng-bind'

// Evaluates the expression and inserts the resulting HTML into the element in a secure way.
'ng-bind-html'

// The ngBindTemplate directive specifies that the element text content should be replaced with
// the interpolation of the template in the ngBindTemplate attribute.
'ng-bind-template'

// Specify custom behavior on blur event.
'ng-blur'

// Evaluate the given expression when the user changes the input.
'ng-change'

// Sets the checked attribute on the element, if the expression inside ngChecked is truthy.
'ng-checked'

// The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding
// an expression that represents all classes to be added.
'ng-class'

// The ngClassOdd and ngClassEven directives work exactly as ngClass, except they work in
// conjunction with ngRepeat and take effect only on odd (even) rows.
'ng-class-even'

// The ngClassOdd and ngClassEven directives work exactly as ngClass, except they work in
// conjunction with ngRepeat and take effect only on odd (even) rows.
'ng-class-odd'

// The ngClick directive allows you to specify custom behavior when an element is clicked.
'ng-click'

// The ngCloak directive is used to prevent the AngularJS html template from being briefly displayed
// by the browser in its raw (uncompiled) form while your application is loading.
'ng-cloak'

// The ngController directive attaches a controller class to the view.
'ng-controller'

// Specify custom behavior on copy event.
'ng-copy'

// Specify custom behavior on cut event.
'ng-cut'

// Allows you to specify custom behavior on a dblclick event.
'ng-dblclick'

// This directive sets the disabled attribute on the element (typically a form control, e.g. input, button, select etc.)
// if the expression inside ngDisabled evaluates to truthy.
'ng-disabled'

// Specify custom behavior on focus event.
'ng-focus'

// Nestable alias of form directive. HTML does not allow nesting of form elements.
// It is useful to nest forms, for example if the validity of a sub-group of controls needs to be determined.
'ng-form'

// Shows or hides the given HTML element based on the expression provided to the ngHide attribute.
'ng-hide'

// Executes the expression and replaces with the right href link
'ng-href'

// Removes or recreates a portion of the DOM tree based on an {expression}.
'ng-if'

// Fetches, compiles and includes an external HTML fragment.
'ng-include'

// Allows you to evaluate an expression in the current scope.
'ng-init'

// Force the angular.element library.
// This should be used to force either jqLite by leaving ng-jq blank or setting the name of the jquery variable under window (eg. jQuery).
'ng-jq'

// Specify custom behavior on keydown event.
'ng-keydown'

// Specify custom behavior on keypress event.
'ng-keypress'

// Specify custom behavior on keyup event.
'ng-keyup'

// Text input that converts between a delimited string and an array of strings.
'ng-list'

// Adds the maxlength validator to ngModel.
'ng-maxlength'

// Adds the minlength validator to ngModel.
'ng-minlength'

// The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController,
// which is created and exposed by this directive.
'ng-model'

// Modify the behaviour of ngModel directives within your application.
// You can specify an ngModelOptions directive on any element.
// All ngModel directives will use the options of their nearest ngModelOptions ancestor.
'ng-model-options'

// Allows you to specify custom behavior on mousedown event.
'ng-mousedown'

// Specify custom behavior on mouseenter event.
'ng-mouseenter'

// Specify custom behavior on mouseleave event.
'ng-mouseleave'

// Specify custom behavior on mousemove event.
'ng-mousemove'

// Specify custom behavior on mouseover event.
'ng-mouseover'

// Specify custom behavior on mouseup event.
'ng-mouseup'

// Tells AngularJS not to compile or bind the contents of the current DOM element,
// including directives on the element itself that have a lower priority than ngNonBindable.
'ng-non-bindable'

// Sets the open attribute on the element, if the expression inside ngOpen is truthy.
'ng-open'

// The ngOptions attribute can be used to dynamically generate a list of <option> elements for the <select>
// element using the array or object obtained by evaluating the ngOptions comprehension expression.
'ng-options'

// Specify custom behavior on paste event.
'ng-paste'

// ngPattern adds the pattern validator to ngModel.
// It is most often used for text-based input controls, but can also be applied to custom text-based controls.
'ng-pattern'

// Displays messages according to en-US localization rules.
'ng-pluralize'

// Sets the readonly attribute on the element, if the expression inside ngReadonly is truthy
'ng-readonly'

// Instantiates a template once per item from a collection
// Special properties are exposed on the local scope of each template instance, including:
// $index, $first, $middle, $last, $even, $odd
'ng-repeat'

// ngRequired adds the required validator to ngModel.
// It is most often used for input and select controls, but can also be applied to custom controls.
'ng-required'

// Sets the selected attribute on the element, if the expression inside ngSelected is truthy.
'ng-selected'

// Shows or hides the given HTML element based on the expression provided to the ngShow attribute.
'ng-show'

// Using AngularJS markup like {{hash}} in a src attribute doesn't work right:
// The browser will fetch from the URL with the literal text {{hash}} until AngularJS
// replaces the expression inside {{hash}}. The ngSrc directive solves this problem.
'ng-src'

// Using AngularJS markup like {{hash}} in a srcset attribute doesn't work right:
// The browser will fetch from the URL with the literal text {{hash}} until AngularJS
// replaces the expression inside {{hash}}. The ngSrcset directive solves this problem.
'ng-srcset'

// Allows you to set CSS style on an HTML element conditionally.
'ng-style'

// Enables binding AngularJS expressions to onsubmit events.
'ng-submit'

// Used to conditionally swap DOM structure on your template based on a scope expression.
'ng-switch'

// Marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion.
'ng-transclude'

// Binds the given expression to the value of the element.
// It is mainly used on input[radio] and option elements, so that when the element is selected,
// the ngModel of that element (or its select parent element) is set to the bound value.
'ng-value'

/* *******************************************************************************************
 * NG MODULE > TYPE
 * ******************************************************************************************* */


// A cache object used to store and retrieve data, primarily used by $templateRequest
// and the script directive to cache templates and other data.
$cacheFactory.Cache

// Don't forget the cache

// A shared object between directive compile / linking functions which contains normalized
// DOM element attributes. The values reflect current binding state {{ }}.
$compile.directive.Attributes

// Converts an attribute name (e.g. dash/colon/underscore-delimited string, optionally prefixed with x- or data-)
// to its normalized, camelCase form.
$compile.directive.Attributes.$normalize(name)

// Adds the CSS class value specified by the classVal parameter to the element.
// If animations are enabled then an animation will be triggered for the class addition.
$compile.directive.Attributes.$addClass(classVal)

// Removes the CSS class value specified by the classVal parameter from the element.
// If animations are enabled then an animation will be triggered for the class removal.
$compile.directive.Attributes.$removeClass(classVal)

// Adds and removes the appropriate CSS class values to the element based on the difference
// between the new and old CSS class values (specified as newClasses and oldClasses).
$compile.directive.Attributes.$updateClass(newClasses, oldClasses)

// Observes an interpolated attribute.
$compile.directive.Attributes.$observe(key, fn)

// Set DOM element attribute value.
$compile.directive.Attributes.$set(name, value)

// A map of DOM element attribute names to the normalized name.
// This is needed to do reverse lookup from normalized name back to actual name.
$compile.directive.Attributes.$attr

// A root scope can be retrieved using the $rootScope key from the $injector.
$rootScope.Scope([providers], [instanceCache])


/* *******************************************************************************************
 * NG MODULE > FILTERS
 * ******************************************************************************************* */


// Formats a number as a currency (ie $1,234.56).
// When no currency symbol is provided, default symbol for current locale is used.
{{ currency_expression | currency : symbol : fractionSize}}
$filter('currency')(amount, symbol, fractionSize)

// Formats date to a string based on the requested format.
{{ date_expression | date : format : timezone}}
$filter('date')(date, format, timezone)

// Selects a subset of items from array and returns it as a new array.
{{ filter_expression | filter : expression : comparator : anyPropertyKey}}
$filter('filter')(array, expression, comparator, anyPropertyKey)

// Allows you to convert a JavaScript object into JSON string.
// This filter is mostly useful for debugging.
// When using the double curly notation the binding is automatically converted to JSON.
{{ json_expression | json : spacing}}
$filter('json')(object, spacing)

// Creates a new array or string containing only a specified number of elements.
// The elements are taken from either the beginning or the end of the source array,
// string or number, as specified by the value and sign (positive or negative) of limit.
// Other array-like objects are also supported (e.g. array subclasses, NodeLists, jqLite/jQuery collections etc).
// If a number is used as input, it is converted to a string.
{{ limitTo_expression | limitTo : limit : begin}}
$filter('limitTo')(input, limit, begin)

// Converts string to lowercase.
{{ lowercase_expression | lowercase}}
$filter('lowercase')()

// Formats a number as text.
// If the input is null or undefined, it will just be returned.
// If the input is infinite (Infinity or -Infinity), the Infinity symbol '∞' or '-∞' is returned, respectively.
// If the input is not a number an empty string is returned.
{{ number_expression | number : fractionSize}}
$filter('number')(number, fractionSize)

// Returns an array containing the items from the specified collection,
// ordered by a comparator function based on the values computed using the expression predicate.
{{ orderBy_expression | orderBy : expression : reverse : comparator}}
$filter('orderBy')(collection, expression, reverse, comparator)

// Converts string to uppercase.
{{ uppercase_expression | uppercase}}
$filter('uppercase')()