angularjs version 1.3
TRANSCRIPT
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.
What’s New in Version 1.3.*
• ~1000 Documentation improvements
• >400 Bug fixes
• npm packages
• ~400 contributors
• x4 Faster
• And (Wait for it…)
What’s New in Version 1.3.*
• 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
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.
<div>{{user.sendInfo.call({}, true)}}</div>
$COMPILE• 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• 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• 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• 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/2014/12/planning-angular-14.html
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
THANK YOU