Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular 1.3 - What's New?

Angular 1.3 - What's New?

Niall Smart

October 01, 2014
Tweet

Other Decks in Programming

Transcript

  1. Angular at Hightower What is Hightower? Think Trello, but designed

    for commercial real estate teams Web/mobile workflow and collaboration tool Single page app => lots of in-page interactivity Rich data model => lots of data binding. Getting started: ! ! ! Today: 58 controllers / 107 factories (mostly models) / 65 directives 71K LOC (CoffeeScript/JavaScript) including specs 2
  2. Angular 1.3 19 beta milestones since March 2014 Four release

    candidates in the past 4 weeks 17 open issues filed against RC4 Getting closer, but the final release is still TBD Lots of enhancements, it’s worth getting ahead of the curve…here’s our top ten. 3
  3. What’s New? Configurable model binding One time binding Validators pipeline

    Asynchronous validators New view states Error message directives Strict DI API enhancements Filter enhancements Performance Breaking changes 4
  4. 1. Configurable Model Binding In Angular 1.2 ngModel uses a

    fixed set of rules: Changes to the input are written immediately to the model (e.g., in the change event handler) Invalid view values are translated to undefined Supports simple object properties (no getter/setter) Angular 1.3 allows configuration via ngModelOptions 5
  5. updateOn (String) List of events that trigger the model to

    be updated. Useful to defer validation until focus leaves control (“blur”) debounce (Number – ms) Debounce view events. Useful for inputs that filter result sets or on pages with slow digest cycles. timezone (String) Specify timezone to use when reading/writing a Date instance. allowInvalid (Boolean) Write “invalid” data to model. Useful when doing server side validation, saving partial data, or persisted models no longer match new validations. getterSetter (Boolean) Functions bound to ngModel will be used as the model getter/setter. Useful to translate between view and internal representations. 6 1. Configurable Model Binding
  6. 2. One Time Binding Pages with lots of watchers slow

    down Angular digest cycles For example, large tables with lots of {{  cellValues  }} To help mitigate this problem, Angular 1.3 natively supports “one time binding” Once an expression evaluates to a non-undefined value, its watcher is automatically deregistered Prefix the expression with :: <span>Welcome,  {{  ::user.name  }}.</span>   <div  ng-­‐repeat=“user  in  ::users  |  filter:{active:  true}”>   Built into $parse (i.e., no special $watch syntax required in custom directives) 7
  7. In Angular 1.2 custom input validators are implemented as pairs

    of parse/format functions ($parsers and $formatters). Conflates view parsing, model formatting and validation Overly complex for simple validations. Angular 1.3 introduces a simpler API called the validators pipeline. Implement a function that takes a model value and returns true if it’s valid. Add your custom validator as a property of ctrl.$validators 3. Validators Pipeline 8
  8. Custom validators sometimes need to operate asynchronously… e.g., calling an

    API to check if a user ID is valid Async validators return a promise that will be resolved / rejected depending on the model validity. Add your custom validator as a property of ctrl. $asyncValidators Only called when all the other validators “pass” Avoid hitting APIs with data that’s known to be invalid 4. Asynchronous Validators 9
  9. 5. New View States ngModelCtrl.$touched  /  ctrl.$untouched   Tracks whether

    the control has seen a blur event. e.g., defer validation errors until the user tabbed through the control. ngModelCtrl.$pending True if an asynchronous validation is pending. e.g., display a “Checking user name…” type indicator. ngFormCtrl.$submitted   Tracks whether the form has seen a submit event. e.g., defer validation errors until the user attempts to submit the form. 10
  10. 6. Error Messages In Angular 1.2 there’s no standard way

    to present validation error messages:   <li  ng-­‐if=“$error.required”>…   <li  ng-­‐if=“$error.pattern  and  !$error.required”>… Angular 1.3 introduces ngMessages / ngMessage Declaratively specify error messages for a given control By default shows first error (or set ng-­‐messages-­‐multiple) Include global error message strings with ng-­‐messages-­‐include 11
  11. 7. Strict Dependency Injection Angular supports three ways of specifying

    function dependencies: 1. Implicitly via parameter names 2. Explicitly using inline array notation 3. Explicitly using $inject property annotation JavaScript minification breaks implicit dependencies:   Error:  [$injector:unpr]  Unknown  provider:  aProvider  <-­‐  a   Strict DI mode only supports explicit annotations, which means missing annotations are found before code ships to production (yay!) <div  ng-­‐app=“myApp”  ng-­‐strict-­‐di> 12
  12. 8. API Enhancements $rootScope.$applyAsync   Coalesce multiple calls into $apply

    (i.e., perform one $digest) $rootScope.$watchGroup   Convenience function to watch an array of expressions $templateRequest   Helper function to download and cache templates $compileProvider.debugInfoEnabled   Disable element attributes (e.g., ng-­‐scope) and data (e.g., $scope) used for debugging (7% performance bump on large table benchmark) 13
  13. 9. Filter Enhancements ngRepeat supports aliasing filtered results as a

    scope variable   “user  in  users  |  filter:keyword  as  matchingUsers”>   Filter predicate functions are passed the element index   function  evenElementsPred(e,  i)  {  return  i  %  2  ==  0;  }   limitTo supports numbers (limits number of digits displayed)   {{  12345  |  limitTo:2  }}  =>  “12”   date has timezone support (UTC or browser)   {{  0  |  date:'HH':'UTC'  }}  =>  “00” 14
  14. 10. Performance Judicious use of one time binding :) Coalesce

    multiple $apply calls using $applyAsync Turn off debug metadata:
 
 $compileProvider.debugInfoEnabled  =  true Turn on HTTP apply coalescing:
 
 $httpProvider.useApplyAsync  =  true Lots of “under the hood” optimizations 15
  15. 11. Breaking Changes HTTP Interceptors API is completely rewritten Filters

    are assumed to be stateless (opt-out with $stateful) attr.$observe returns a deregistration function (not the observer) <base> is required if $location HTML5 mode is enabled Input type=“password” values are not trimmed by default Dropping support for jQuery < 2.1.1 and IE8 (`—screw-ie8`) But wait, there’s more! See the CHANGELOG for the full list. 16
  16. Want to use Angular 1.3 already? We’re ngHiring! :) Thanks!

    ! Questions? 17 @niallsmart / gethightower.com/jobs