CHEAT ng:click Executes custom behavior date Checks if user input is a
Paging for Lists
when element is clicked. valid date. jQuery Mobile Angular Adapter SHEET ng:controller Creates a controller and links email Checks if user input is a Lists can be paged in the sense that only some it to the DOM. valid email. ngm:shared- Directive to share the same controller= instance of a controller entries of an array in the controller are shown. integer Checks if user input is a Hello World Example Filters valid integer. "var1:Ctrl1,..." between mobile pages. The <ul data-role="listview"> shared controller is saved Json Checks if user input is a <li ng:repeat="item in list.$paged()"> {{expression|<filter-name>: into a variable. Code: valid JSON. {{item}} <param1>:<param2>:…}} E.g. <div ngm:shared- number Checks if user input is a </li> currency Formats a number as a controller="rental:RentalCont <!doctype html> valid number. <li ngm:if="list.$paged().hasMorePages()"> currency. roller"> <html xmlns:ng="http://angularjs.org"> phone Checks if user input is a <a href="#" date Formats a number as a date. ngm:<event>= Directives for general event <script src="http://code.angularjs.org/angular- valid phone number. ngm:click="list.$paged().loadNextPage()"> E.g. {{1288323623006 | "action()“ handlers. E.g. 0.9.19.min.js" ng:autobind></script> regexp Restricts valid input to a Load more <body> date:'yyyy-MM-dd HH:mm:ss <a href=“#“ specified regular </a> Your name: <input type="text" name="yourname" Z'}} ngm:click=“myFn()“> expression pattern. </li> value="World"/> html Prevents the input from getting <a href=“#“ngm: url Validates that user input is </ul> <hr/> escaped by angular. pageforeshow=“myFn()“> a well formed URL. Hello {{yourname}}! json Converts a JavaScript object </body></html> into JSON string. linky Turns links into html links. Custom Validator ngm:if Conditionally changes DOM structure. Result: lowercase Lowercases a string. Similar to ng:switch, but angular.validator(<name>, function(input number Formats a number as text [, additional params]) { does not need nested Usage:{{number_expression| [your validation code]; elements. number[:fractionSize] }} if ( [validation succeeds] ) { return false; $waitDialog: A service to access the } else { Custom Filter return "my error message"; - show([msg]) jQuery Mobile Wait Dialog. - hide() E.g. angular.filter(<name>, } - waitFor( this.$waitDialog.show('Please function(input[,additional params]) { } promise[, msg]) wait'); Widgets return uiValue; ng:non-bindable Blocks angular from } Services $navigate( A service to change the processing an HTML element. ); '[transition:] current page, optionally $defer( Defers function pageId') using a defined transition. ng:repeat Creates a collection of cloned HTML elements Formatters callback[,delay]) execution. transition="back": ng:format="<formatter-name>" $invalidWidgets Holds references to ng:required Verifies presence of user invalid widgets. The browser will go back in input. boolean Formats user input as $updateView Queues view updates. history to the defined page. ng:validate Validates content of user Boolean. $xhr( Generates an XHR pageId="back": input json Formats user input as JSON. method, url[, post], request. Goes back one step in ng:view Works with $route to list Formats user input strings as history. success, error) Kirchstraße 6 | 51647 Gummersbach "include" partial templates. an array. Navigation Expressions Telefon 02261 6001-0 | Fax -4200 ng:switch Conditionally changes DOM number Formats user input string as Custom Service $navigate(test, structure. number. trim Trims leading and trailing angular.service(<name>, 'outcome1[:transition1]:page1',…) info@opitz-consulting.com ng:include Includes an external HTML fragment. spaces from user input. function(dep1) { www.opitz-consulting.com/go_mobile Specifies navigation based on outcomes. This will ng:options Dynamically generates a list return someService; execute the navigation whose outcome equals test. of <option> elements for a Custom Formatter }, {$inject: ['dep1']}); If test is a promise, this will use the result of the <select> element using an promise. array or an object. angular.formatter(<name>, { Controllers outcome="failure" parse: function(value){ … }, <div ng:controller="SomeController"> Special outcome for the false value or a failed format: function(value { … } Directives ); function SomeController(dep1) {…} promise. ng:submit Binds angular expressions to SomeController.$inject = ['dep1']; outcome="success" www.youtube.com/opitzconsulting www.youtube.com/opitzconsulting onsubmit events. Validators Special outcome for all cases where "failure" ng:change Runs an expression when an ng:validate="<validator-name>[:param1][:param2] this.$watch( Registers listener as a does not match. www.slideshare.net/opitzconsulting input widget’s value changes. [:..]" This can be used directly in HTML pages, e.g. www.slideshare.net/opitzconsulting <watchExpr>, callback to be executed ng:class Conditionally set CSS class <a href="" ngm:click="$navigate(save(), www.xing.com/group-51062.460375 asynchronous Provides asynchronous function(value) {...} every time a watchExp on an element. validation via a callback ) changes. 'success:homepage', 'failure:errorpage')"> www.xing.com/net/opitzconsulting function. www.twitter.com/oc_wire
Modern Web Applications with Next.JS: Learn Advanced Techniques to Build and Deploy Modern, Scalable and Production Ready React Applications with Next.JS