AngularJS 1.3

Saturday, December 20, 2014

What's new in AngularJS 1.3?

Improvements to DOM operations

New Features and increased Productivity

Performance Boost

No more support for IE 8 and jQuery below 2.1.1

No more global functions as controllers


One time bindings, improve performance save resources by turning a two way binding into a one way binding, add two colons after the opening curly braces like this


Update the name of one of the marathons, view change is updated in column on right but not on the left


In the repeater add one time binding in front of collection, additions and removals to the collection will not be updated


One time bindings can be used in the two way bindings on the scope of a directive, add a display of collectional marathons, name the directive marathon display, give it one property the name of the marathon


Create the directive in script, a simple template, with a display binding on name property, add a scope with a two way binding to name property


Make changes to marathon name in directive, changes are reflected in collection above


In directive, change property to one time binding, by putting two colons in front of name of variable


Make changes in directive, updates only inside this directive, changes are not communicated up to original item


Disable scope info


The ng classes on tr and td have been removed and on table


Include the angular-aria script file to the project


Add the ngaria file as a dependency


Some additional properties are added to the input box for accessibility and screen readers


Global functions as controllers has been removed in 1.3, in the HTML the controller is set on the body tag and a single binding


In the script file, the module is declared and a global function main controller


This feature, global function as controllers has been disabled, run this code, view the binding is being processed


Opt into this behavior by adding a config section, bringing in the controller provider, and calling the allowglobals function on the controller provider


Run this code, view the binding is being processed and the main controller global function is being registered as a controller


Create an object of runners, key value pairs to ensure unique emails for example


To iterate over the collection of runners use the angular foreach method, first parameter the collection to iterate over, second parameter a callback function that takes in three parameters, the item, the index and new in angular 1.3, the collection itself, the two objects are the same thing, runners and collection


It's not always the case to be able to close over the original object, for example a helper function outside the controller, this function iterates over the collection, logs out the item and logs out the collection, passing in the collection as a parameter is a useful feature since it cannot close over the runners variable since not inline, this brings angular inline with how typical foreach functions work in JAVASCRIPT


Turn on strict dependency injection mode to verify that the code can be minified


Run the code, get error message that the route provider is not properly annotated and cannot run in strict mode


Annotate code by adding an array around each function and a string for each parameter


Convert JSON string to JAVASCRIPT date objects


New feature full support for input type equals date


View the input type date in the browser


Set model options to control when model is updated, the model will only be updated when the data entry element looses focus


Update the bound model property when the user stops typing, this is called debouncing, one digital signal from a keyboard button press is registered within a specified time period


Set debounce to an object to handle multiple events


Remove ng-model options


Run the application, as soon as enter valid email address the bound model property is updated


Use ng-submit directive on the form if using binding options to ensure all pending updates to the model are processed before submital


To rollback changes use the new rollbackviewvalue function, cancelentry takes in the control and event, when keycode is escape key, the value in the view is rolled back to model value


Set the model options on the form


Add a reset button and in ng-click invoke the rollback function directly on the form


Make some changes to the form


Click reset, the form is reset to the original values


Detect if form was submitted invoking $submitted on the form in ng-if directive


Make a change to the form, click save, view the message data submitted displayed


Default Success Warning Important Info Inverse
B S W I ? O