awesome-cheatsheets/frontend/angularjs.js

/* *******************************************************************************************
 * ANGULARJS CHEATSHEET
 * API DOCUMENTATION: https://docs.angularjs.org/api
 * DEVELOPER GUIDE: https://docs.angularjs.org/guide
 * ERROR REFERENCE: https://docs.angularjs.org/error
 * ******************************************************************************************* */


/* *******************************************************************************************
 * TIPS & TRICKS
 * ******************************************************************************************* */


// You can retrieve a scope for any DOM element by using:
angular.element(aDomElement).scope()

// An object that contains information about the current AngularJS version.
// This object has the following properties: full, major, minor, dot, codeName
angular.version


/* *******************************************************************************************
 * CSS CLASS USED BY ANGULAR
 * ******************************************************************************************* */


// AngularJS applies this class to any element for which a new scope is defined.
ng-scope

// AngularJS applies this class to any element for which a new isolate scope is defined.
ng-isolate-scope

// AngularJS applies this class to any element that is attached to a data binding, via ng-bind or {{}} curly braces, for example.
ng-binding

// AngularJS applies this class to a form control widget element if that element's input does not pass validation.
ng-invalid, ng-valid

// AngularJS ngModel directive applies ng-pristine class to a new form control widget which did not have user interaction.
// Once the user interacts with the form control, the class is changed to ng-dirty.
ng-pristine, ng-dirty

// AngularJS ngModel directive applies ng-untouched class to a new form control widget which has not been blurred.
// Once the user blurs the form control, the class is changed to ng-touched.
ng-touched, ng-untouched


/* *******************************************************************************************
 * NG MODULE > FUNCTIONS
 * ******************************************************************************************* */


// Returns a function which calls function fn bound to self (self becomes the this for fn).
// You can supply optional args that are prebound to the function.
// This feature is also known as partial application, as distinguished from function currying.
angular.bind(self, fn, args)

// Use this function to manually start up AngularJS application.
angular.bootstrap(element, [modules], [config])

// Creates a deep copy of source, which should be an object or an array.
angular.copy(source, [destination])

// Wraps a raw DOM element or HTML string as a jQuery element.
angular.element(element)

// Determines if two objects or two values are equivalent.
// Supports value types, regular expressions, arrays and objects.
angular.equals(o1, o2)

// Configure several aspects of error handling in AngularJS if used as a setter or return the current configuration if used as a getter.
angular.errorHandlingConfig([config])

// Extends the destination object dst by copying own enumerable properties from the src object(s) to dst.
// You can specify multiple src objects.
angular.extend(dst, src)

// Invokes the iterator function once for each item in obj collection, which can be either an object or an array.
angular.forEach(obj, iterator, [context])

// Deserializes a JSON string.
angular.fromJson(json)

// A function that returns its first argument.
// This function is useful when writing code in the functional style.
angular.identity(value)

// Creates an injector object that can be used for retrieving services as well as for dependency injection.
angular.injector(modules, [strictDi])

// Determines if a reference is an Array.
angular.isArray(value)

// Determines if a value is a date.
angular.isDate(value)

// Determines if a reference is defined.
angular.isDefined(value)

// Determines if a reference is a DOM element (or wrapped jQuery element).
angular.isElement(value)

// Determines if a reference is a Function.
angular.isFunction(value)

// Determines if a reference is a Number.
angular.isNumber(value)

// Determines if a reference is an Object. Unlike typeof in JavaScript, nulls are not considered to be objects.
angular.isObject(value)

// Determines if a reference is a String.
angular.isString(value)

// Determines if a reference is undefined.
angular.isUndefined(value)

// The angular.module is a global place for creating, registering and retrieving AngularJS modules.
// All modules (AngularJS core or 3rd party) that should be available to an application must be registered using this mechanism.
// Passing one argument retrieves an existing angular.Module, whereas passing more than one argument creates a new angular.Module
angular.module(name, [requires], [configFn])

// A function that performs no operations.
// This function can be useful when writing code in the functional style.
angular.noop()

// Use this function to reload the current application with debug information turned on.
// This takes precedence over a call to $compileProvider.debugInfoEnabled(false).
angular.reloadWithDebugInfo()

// Serializes input into a JSON-formatted string.
// Properties with leading $$ characters will be stripped since AngularJS uses this notation internally.
angular.toJson(obj, pretty)


/* *******************************************************************************************
 * 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')()