1
1
mirror of https://github.com/namibia/awesome-cheatsheets.git synced 2024-12-24 19:10:21 +00:00
awesome-cheatsheets/frontend/angularjs.js
2018-06-26 09:06:55 +01:00

435 lines
17 KiB
JavaScript

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