AngularJS Version 1.3

ANGULARJS
VERSION 1.3 - SUPERLUMINAL-NUDGE

Agenda
• What’s new
• Highlight Features
• Migrating to version 1.3
• Beyond version 1.3

What’s New in Version 1.3.*
• Performance
• 4.3 times faster DOM manipulation with 73% less garbage
• 3.5 times faster digest with 87% less garbage
• Production Mode:
$compileProvider.debugInfoEnabled(false)
• $applyAsync
• Schedule the invokation of $apply to occur at a later time.
• queue up multiple expressions which need to be evaluated in the same
digest.
• One time binding.

• ~1000 Documentation improvements
• >400 Bug fixes
• npm packages
• ~400 contributors
• x4 Faster
• And (Wait for it…)

• IE8 Support discontinued

HIGHLIGHT FEATURES
• Production Mode
• By default AngularJS attaches information about scopes to
DOM nodes, and adds CSS classes to data-bound elements.
• disable this in production for a significant performance
boost with:
myApp.config(['$compileProvider', function ($compileProvider) {
$compileProvider.debugInfoEnabled(false);
}]);
//angular.reloadWithDebugInfo();

HIGHLIGHT FEATURES
• Apply Async
• Schedule the invokation of $apply to occur at a later time.
• Sets a timeout of ~10 milliseconds and then invokes $apply.
• Used by calling: scope.$applyAsync([exp])

HIGHLIGHT FEATURES
• Http Apply Async
• When using the Http service, each request that resolves triggers a
digest Cycle
• Http Service can be configured to combine processing of multiple
http responses by using the $applyAsync. Configured with:
myApp.config(['$httpProvider', function ($httpProvider) {
$httpProvider.useApplyAsync(true);
}]);

HIGHLIGHT FEATURES
• One time binding
• An expression that starts with :: is considered a one-time
expression
• Interpolation:
• Lists:
<p>Hello my name is:{{::name}}</p>
<ul class="list-group">
<li ng-repeat="user in ::users" class="list-group-
item">{{user.name}}</li>
</ul>

HIGHLIGHT FEATURES
• Forms
• ngMessages:
<div ng-messages="regform.fname.$error"
ng-if="regform.fname.$invalid &&(regform.$submitted || regform.fname.$touched)"
class="alert alert-danger" >
<div ng-message="required" >First name is required</div>
<div ng-message="minlength" >First name must be at least 4 characters.<div>
</div>

HIGHLIGHT FEATURES
• Forms
• ngMessages
• Use ngMessagesMultiple to display all messages.
• Use ngMessagesInclude to load messages from a
template file and reuse them across the form
• template messages will be overridden by inline messages.

HIGHLIGHT FEATURES
• Forms
• ngModelController.$validators
• Expected to return boolean value
• can be use instead of $parsers and $formatters.
• ngModelController.$asyncValidators
• Can be used to implement custom async validation
• Expected to return a promise.

HIGHLIGHT FEATURES
• Forms
• ngModelOptions
• Allows tuning how model updates are done.
• Specify a custom list of events that will trigger a model
update
• Set a debouncing delay so that the actual update only
takes place when a timer expires

HIGHLIGHT FEATURES
• ngAria
• ARIA - Accessible Rich Internet Applications
• Enables common ARIA attributes that convey state or
semantic information for assistive technologies.
• Currently supports ngModel, ngShow, ngHide,
ngDisabled, ngClick, ngDblclick and ngMessages
angular.module('samplesApp', [‘ngAria'])

MORE FEATURES…
• strictDI
• Throws errors and debug info when trying invoke functions
which do not use explicit function annotation
• $scope.$watchGroup
• Monitor an array of expressions for change.
<body ng-app="samplesApp" ng-strict-di>
scope.$watchGroup(['element1','element2'],
function(){/* your code here */}
);

MORE FEATURES…
• SVG & MathML Support
• $compile will allow SVG and MathML templates when using
templateNamespace property inside directives.

MIGRATION
https://docs.angularjs.org/guide/
migration
17
1.2 1.3

EXPRESSIONS
• You can no longer invoke .bind, .call, .apply inside angular expressions
• values 'f', '0', 'false', 'no', 'n', '[]' are no longer treated as falsy,
Only JavaScript falsy values are now treated as falsy by the expression
parser.
18
<div>{{user.sendInfo.call({}, true)}}</div>

$COMPILE
19
• The isolated scope of a component directive no longer
leaks into the template that contains the instance of the
directive.
1.2 :
1.3 :
<test-directive directive-scope=“controllerScope"
ng-hide=“directiveScope” ></test-directive>
<test-directive directive-scope=“controllerScope"
ng-hide="controllerScope" ></test-directive>
source: http://plnkr.co/edit/giVsWj1HDjlVN8lEJaHR?p=preview

$COMPILE
20
• Attributes.$observe no longer returns the observer
function, but a deregistration function instead
link: function(scope, elm, attr) {
var observer = attr.$observe('someAttr', function(value)
{
console.log(value);
});
}
link: function(scope, elm, attr) {
var observer = function(value) {
console.log(value);
};
attr.$observe('someAttr', observer);
}
1.2 1.3

FILTERS
21
• Simple value Filters will no longer trigger on every $digest but
only when their assigned value changes.
• This is a breaking change for filters that depends on an external
value.
• To preserve compatibility use:
.filter(‘decorate', ['decoration', function(decoration) {
function decorateFilter(input) {
return decoration.symbol + input + decoration.symbol;
}
decorateFilter.$stateful = true;
return decorateFilter;
}])

FORMS
22
• ngModelController.$cancelUpdate() - is renamed to
$rollbackViewValue()
• Input types date, time, datetime-local, month, week now
always require a Date object as model

BEYOND VERSION
1.3
http://angularjs.blogspot.co.il/20
14/12/planning-angular-14.html
23

VERSION 1.4
• Scheduled For Spring 2015
• 2 main new features:
• New Router
• Convention Based
• nested and multiple routers
• mutliple ng-view (ng-viewport)
• i18n & L10N
24

AngularJS Version 1.3

More Related Content

What's hot (20)

Viewers also liked (11)

Similar to AngularJS Version 1.3 (20)

Recently uploaded (20)

AngularJS Version 1.3