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