CheatSheet angularJS

CHEAT SHEET Hello World Example
Code:
<!doctype html> <html xmlns:ng="http://angularjs.org"> <script src="http://code.angularjs.org/angular0.9.19.min.js" ng:autobind></script> <body> Your name: <input type="text" name="yourname" value="World"/> <hr/> Hello {{yourname}}! </body></html>
ng:click ng:controller
Executes custom behavior when element is clicked. Creates a controller and links it to the DOM.
date email integer
Result:
{{expression|<filter-name>: <param1>:<param2>:}} currency Formats a number as a currency. date Formats a number as a date. E.g. {{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}} html Prevents the input from getting escaped by angular. json Converts a JavaScript object into JSON string. linky Turns links into html links. lowercase Lowercases a string. number Formats a number as text Usage:{{number_expression| number[:fractionSize] }}
Filters
Json number phone regexp
url
Checks if user input is a valid date. Checks if user input is a valid email. Checks if user input is a valid integer. Checks if user input is a valid JSON. Checks if user input is a valid number. Checks if user input is a valid phone number. Restricts valid input to a specified regular expression pattern. Validates that user input is a well formed URL.
jQuery Mobile Angular Adapter

ngm:sharedcontroller= "var1:Ctrl1,..." Directive to share the same instance of a controller between mobile pages. The shared controller is saved into a variable. E.g. <div ngm:sharedcontroller="rental:RentalCont roller">
Directives for general event handlers. E.g. <a href=# ngm:click=myFn()> <a href=#ngm: pageforeshow=myFn()>
Paging for Lists

Lists can be paged in the sense that only some entries of an array in the controller are shown. <ul data-role="listview"> <li ng:repeat="item in list.$paged()"> {{item}} </li> <li ngm:if="list.$paged().hasMorePages()"> <a href="#" ngm:click="list.$paged().loadNextPage()"> Load more </a> </li> </ul>
ngm:<event>= "action()
Custom Validator
angular.validator(<name>, function(input [, additional params]) { [your validation code]; if ( [validation succeeds] ) { return false; } else { return "my error message"; } }
ngm:if
Conditionally changes DOM structure. Similar to ng:switch, but does not need nested elements. A service to access the jQuery Mobile Wait Dialog. E.g. this.$waitDialog.show('Please wait'); A service to change the current page, optionally using a defined transition. transition="back": The browser will go back in history to the defined page. pageId="back": Goes back one step in history.
Custom Filter Widgets

ng:non-bindable ng:repeat ng:required ng:validate ng:view ng:switch ng:include ng:options Blocks angular from processing an HTML element. Creates a collection of cloned HTML elements Verifies presence of user input. Validates content of user input Works with $route to "include" partial templates. Conditionally changes DOM structure. Includes an external HTML fragment. Dynamically generates a list of <option> elements for a <select> element using an array or an object. angular.filter(<name>, function(input[,additional params]) { return uiValue; } ); ng:format="<formatter-name>" boolean json list number trim Formats user input as Boolean. Formats user input as JSON. Formats user input strings as an array. Formats user input string as number. Trims leading and trailing spaces from user input.
$waitDialog: - show([msg]) - hide() - waitFor( promise[, msg]) $navigate( '[transition:] pageId')
Services
$defer( callback[,delay]) $invalidWidgets $updateView $xhr( method, url[, post], success, error) Defers function execution. Holds references to invalid widgets. Queues view updates. Generates an XHR request.
Formatters
Custom Service
angular.service(<name>, function(dep1) { return someService; }, {$inject: ['dep1']});
Navigation Expressions
$navigate(test, 'outcome1[:transition1]:page1',) Specifies navigation based on outcomes. This will execute the navigation whose outcome equals test. If test is a promise, this will use the result of the promise. outcome="failure" Special outcome for the false value or a failed promise. outcome="success" Special outcome for all cases where "failure" does not match. This can be used directly in HTML pages, e.g. <a href="" ngm:click="$navigate(save(), 'success:homepage', 'failure:errorpage')">
Kirchstrae 6 | 51647 Gummersbach Telefon 02261 6001-0 | Fax -4200 info@opitz-consulting.com www.opitz-consulting.com/go_mobile
Custom Formatter
angular.formatter(<name>, { parse: function(value){ }, format: function(value { } );
Controllers
Directives
ng:submit ng:change ng:class Binds angular expressions to onsubmit events. Runs an expression when an input widgets value changes. Conditionally set CSS class on an element.
Validators
<div ng:controller="SomeController"> function SomeController(dep1) {} SomeController.$inject = ['dep1']; this.$watch( <watchExpr>, function(value) {...} ) Registers listener as a callback to be executed every time a watchExp changes.
ng:validate="<validator-name>[:param1][:param2] [:..]" asynchronous Provides asynchronous validation via a callback function.
www.youtube.com/opitzconsulting www.youtube.com/opitzconsulting www.slideshare.net/opitzconsulting www.slideshare.net/opitzconsulting www.xing.com/group-51062.460375 www.xing.com/net/opitzconsulting www.twitter.com/oc_wire

CheatSheet angularJS

Uploaded by

CheatSheet angularJS

Uploaded by

CHEAT SHEET Hello World Example

date email integer

Json number phone regexp

jQuery Mobile Angular Adapter

Paging for Lists

Custom Filter Widgets

$waitDialog: - show([msg]) - hide() - waitFor( promise[, msg]) $navigate( '[transition:] pageId')

ng:validate="<validator-name>[:param1][:param2] [:..]" asynchronous Provides asynchronous validation via a callback function.

www.youtube.com/opitzconsulting www.youtube.com/opitzconsulting www.slideshare.net/opitzconsulting www.slideshare.net/opitzconsulting www.xing.com/group-51062.460375 www.xing.com/net/opitzconsulting www.twitter.com/oc_wire

You might also like