Angular 1.3 – Superluminal-nudge || The best Angular yet! && Sebastian Fröstl Kolja Lange 

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 (this slide has been added afterwards) 

H u g e p e r f o r m a n c e i m p r o v e m e n t s ! 

Visit source 

Benchmarking tool Benchpress github.com/angular/benchpress 

O n e t i m e b i n d i n g s 

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 1. Evaluates the expression within the digest loop and stores the value 2. If the value is defined, mark as stable and deregister watcher 3. Continue the digest loop 

< d i v n g - i n i t = " n a m e = ' B e r l i n ' " > < p > H e l l o { { : : n a m e } } < / p > < p > H e l l o { { n a m e } } < / p > < i n p u t n g - m o d e l = " n a m e " > < / d i v > 

Used within any Angular expression < u l > < l i n g - r e p e a t = " f r i e n d i n : : f r i e n d s " > { { f r i e n d } } < / l i > < / u l > < p d a t a - t o o l t i p = " { { : : g e t T o o l t i p ( ) } } " > < / p > 

n g M o d e l o p t i o n s 

Facts Tune how your model updates Debounce update Specify custom events like focus, blur or default 

debounce: {'default': 1000} < h 3 > S e a r c h : { { q u e r y } } < / h 3 > < i n p u t n g - m o d e l = " q u e r y " n g - m o d e l - o p t i o n s = " { d e b o u n c e : { ' d e f a u l t ' : 1 0 0 0 } } " > 

updateOn: 'blur' < h 3 > N a m e : { { n a m e } } < / h 3 > < i n p u t n g - m o d e l = " n a m e " n g - m o d e l - o p t i o n s = " { u p d a t e O n : ' b l u r ' } " > 

n g M o d e l $ v a l i d a t o r s 

Facts Write custom, reusable validators Use $asyncValidators for server-side validation Great in combination with ngModel options Async validators wait for other validators 

$asyncValidators . d i r e c t i v e ( ' a v a i l a b l e ' , f u n c t i o n ( $ t i m e o u t ) { r e t u r n { r e q u i r e : ' n g M o d e l ' , l i n k : f u n c t i o n ( $ s c o p e , e l e m e n t , a t t r s , n g M o d e l ) { n g M o d e l . $ a s y n c V a l i d a t o r s . a v a i l a b l e = f u n c t i o n ( u s e r n a m e ) { r e t u r n $ t i m e o u t ( f u n c t i o n ( ) { r e t u r n t r u e ; } , 1 0 0 0 , f a l s e ) ; } ; } } ; } ) ; 

n g - m e s s a g e s 

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 Username < s p a n n g - m e s s a g e s = " f o r m . u s e r n a m e I n p < p n g - m e s s a g e = " m i n l e n g t h " > … < / p > < p n g - m e s s a g e = " m a x l e n g t h " > … < / p > < p n g - 

m e s s a g e = " p a t t e r n " > … < / p > < / s p a n > 

n g - a n i m a t e 

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() e l e m e n t . o n ( ' c l i c k ' , f u n c t i o n ( e ) { $ a n i m a t e . a n i m a t e ( a n g u l a r . e l e m e n t ( i n d i c a t o r ) , { } , { l e f t : e . o f f s e t X + ' p x ' , t o p : e . o f f s e t Y + ' p x ' } , ' i s - a n i m a t i n g ' ) ; $ s c o p e . $ d i g e s t ( ) ; } ) ; 

Performance tipp: $ c o m p i l e P r o v i d e r . d e b u g I n f o E n a b l e d ( f a l s e ) ; 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. 

No content

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 

Q u i c k l o o k a t A n g u l a r 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 

References ng-europe youtube channel At Script Sepc ng-europe Angular 1.3 slides ng-forms ng aria guide Angular 2 blogpost Angular 2 status preview 

FYI AngularJS Styleguides AngularJS Style Guide by John Papa AngularJS Style Guide by Todd Moto Writing a Massive Angular App @ ng-conf