Angular 1.3 – Superluminal-nudge
||
The best Angular yet!
This talk is about {some} new features of Angular 1.3 and a quick look on Angular 2.
Be sure to check out the references for further information
Huge performance improvements!
Benchmarking tool Benchpress
github.com/angular/benchpress
One time bindings
Why?
- Data-binding is powerful, but Angular needs to watch each expression for changes
- Some bindings are just one-time reads
- More watchers slow down the digest loop (where angular resolves changes)
- Existing solutions: bindonce
Facts
- Evaluates the expression within the digest loop and stores the value
- If the value is defined, mark as stable and deregister watcher
- Continue the digest loop
Hello Berlin
Hello Berlin
<div ng-init="name='Berlin'">
<p>Hello {{::name}}</p>
<p>Hello {{name}}</p>
<input ng-model="name">
</div>Used within any Angular expression
<ul><li ng-repeat="friend in ::friends">{{friend}}</li></ul>
<p data-tooltip="{{::getTooltip()}}"></p>ngModel options
Facts
- Tune how your model updates
- Debounce update
- Specify custom events like focus, blur or default
debounce: {'default': 1000}
Search:
<h3>Search: {{query}}</h3>
<input ng-model="query" ng-model-options="{debounce: {'default': 1000}}">updateOn: 'blur'
Name:
<h3>Name: {{name}}</h3>
<input ng-model="name" ng-model-options="{updateOn: 'blur'}">ngModel $validators
Facts
- Write custom, reusable validators
- Use $asyncValidators for server-side validation
- Great in combination with ngModel options
- Async validators wait for other validators
$asyncValidators
.directive('available', function ($timeout) {
return {
require: 'ngModel',
link: function ($scope, element, attrs, ngModel) {
ngModel.$asyncValidators.available =
function (username) {
return $timeout(function () {
return true;
}, 1000, false);
};
}
};
});ng-messages
Why
- Easier form validation
- Avoid complex ng-if or ng-switch statements
Facts
- Show just one error message by default
- Separate module "angular-messages.js"
- Can be included from template with ngMessageInclude
ngMessages
<span ng-messages="form.usernameInput.$error">
<p ng-message="minlength">…</p>
<p ng-message="maxlength">…</p>
<p ng-message="pattern">…</p>
</span>ng-animate
- Tons of bugfixes
- No more need to set display property on ng-hide animations
- Better support for 3rd party animations
- New .animate() method
- Promises in JavaScript animations
$animate.animate()
element.on('click', function (e) {
$animate.animate(angular.element(indicator), {}, {
left: e.offsetX + 'px',
top: e.offsetY + 'px'
}, 'is-animating');
$scope.$digest();
});Performance tipp:
$compileProvider.debugInfoEnabled(false);Disables classes like "ng-binding, ng-scope" (used by protractor, batarang etc.)
What about migrating to 1.3?
We were afraid!
- Hybrid app, not a full SPA, other dependencies like jQuery
- Ancient jquery version 1.7
- Angular app 20000+ LOC
- 132 directives, 90 controllers, 40 services
- No protractor tests
- Custom performance tunings, complexe directives
Problems:
None.
What helped us:
- Not many breaking changes
- Dropped support for IE8 some months ago
- Update to jQuery 2.1 was the tricky part
- Used styleguides + software patterns
- No crazy (stupid) customizations
- Already on latest 1.2.x version
Quick look at Angular 2
Angular 2
- Still in early state!
- Written in AtScript = ES6 + Dynamic types + Annotations
- Focus on mobile devices
- Keeps powerful features like Dependency Injection, testability
- New stuff like persistence layer, new router, components
Should I wait for Angular 2.0?
No.
… But
- Stay tuned for changes
- Write good Angular apps (use styleguides, patterns)
- There will be a migration guide!
Thanks!
Sebastian Fröstl @sfroestl
Kolja Lange @koljalange
