what's new in

Angular 1.3


Created by Victor Mejia

about me

Software Dev @ LoopNet (CoStar Group)

I ♥ JavaScript

Tweeting @victorczm

Coding @victormejia

Blogging @ victormejia.me

lots to be excited about

400+ bug fixes

~1,000 documentation fixes

performance

improvements

  • reduced memory consumption
  • increased performance of common DOM operations
  • overall improvements

droppping IE8 support

400+ contributors

awesome features

  • Strict DI
  • one-time bindings
  • ngModelOptions
  • new $validators pipeline and ngMessages

awesome features

  • Strict DI
  • one-time bindings
  • ngModelOptions
  • new $validators pipeline and ngMessages

Strict DI

option for finding places in your app that won't minify correctly because of the DI syntax

it's a directive




  
{{message}}

bad strict DI example


angular.module('app', [])
.controller('MyCtrl', function ($scope, $filter) {
  $scope.message = "hello";
});

// that could be minified to this: what is a?
angular.module('app', []).controller('MyCtrl', function (a, b) {a.message = "hello"; });

the correct way


angular.module('app', [])
  .controller('AppCtrl', ['$scope', '$filter',
    function ($scope, $filter) {
      $scope.message = "hello";
    }]);

or like this


function AppCtrl($scope, $http, $filter) {
  // ...
}

AppCtrl.$inject = ["$scope", "$http", "$filter"];

angular.module("myApp", [])
.controller("AppCtrl", AppCtrl)

if you use ng-annotate, don't worry about this

awesome features

  • Strict DI
  • one-time bindings
  • ngModelOptions
  • new $validators pipeline and ngMessages

One-time Bindings

prefix bindings with "::", then only interpolated once and no longer watched

the classic angular "hello world" example




Hello, my name is {{userName}}

watchers

  • registered through directives
  • ng-repeat, ng-click, ng-model, ...
  • {{userName}} is an interpolation directive

two-way data binding

  • when $digest cylce is triggered, Angular process all registered watchers on scope, checking for model mutations
  • when $digest loop is done, browser re-renders the DOM and reflects the changes

it's very easy to have a lot of watchers

demo

one-time bindings

from the docs:

"one-time expressions will stop recalculating once they are stable, which happens after the first digest if the expression result is a non-undefined value"

usage




Hello, my name is {{::userName}}

try the demo, adding the "::"

demo

resources on one-time bindings

awesome features

  • Strict DI
  • one-time bindings
  • ngModelOptions
  • new $validators pipeline and ngMessages

ngModelOptions

allows us to control how ngModel updates are done

some use cases

update model (trigger $digest)...

  • ...after user stopped typing for 500 ms
  • ...only when focus is removed

updating with updateOn

delaying the model update with debounce




Search: {{searchText}}

control debounce delay for specific events

specify an object with either 'default' or 'blur' props




Search: {{searchText}}

model and view can get out of sync: use $rollbackViewValue

  • takes the value in model --> view
  • use it if you update the model and to cancel a debounce action

$rollbackViewValue usage (from the docs)




  

    Name:
    
    

  

  
user.name =

check out the demo

getterSetter

  • boolean value
  • determines whether to treat the functions bound to ngModel as getters/setters
  • useful for models that have an internal representation that's different than what the model exposes

var _age = 27;
$scope.user = {
  age: function (newAge) {
    if (angular.isNumber(newAge) && newAge > 0) {
      return ($scope.age = newAge);
    }
    return $scope.age;
  }
}
          



  

    Age:
    
  

  user.age =

awesome features

  • Strict DI
  • one-time bindings
  • ngModelOptions
  • new $validators pipeline and ngMessages

Forms in Angular 1.3

  • forms have greatly improved over 1.1 and 1.2
  • lots of bugs for native HTML5 validators have been resolved
  • new $validators pipeline, asynchronous validations
  • combine with new ngMessages module for powerful forms

ngModelController

manages the logic of passing values b/n DOM and scope and handles parsing, formatting, validation

wrap models inside a form, and name them

we have access to validation errors


// userForm.email.$error
{
  "email" : true
  "required": false,
}

HTML5 Validations

src: http://www.yearofmoo.com/2014/09/taming-forms-in-angularjs-1-3.html

src: http://www.yearofmoo.com/2014/09/taming-forms-in-angularjs-1-3.html

ngModel validations

  • in 1.3, consistent job of handling parsing first
  • type before attribute
  • example: type "email" before "minlength"

other props on ngModel

  • ngModel.$dirty: control has been interacted with
  • ngModel.$touched: control has been blurred
  • ngModel.$valid: model is valid
  • ngModel.$invalid: model is invalid

displaying errors with ngMessages






  
You did not enter an email.

  
You did not enter a valid email.

$validators


//
// 
//
app.directive('customValidator', function() {
  require : 'ngModel',
  link : function(scope, element, attrs, ngModel) {
    ngModel.$validators.myValidator = function() { 
      // return true or false
    }
  } 
});

$asyncValidators

return a promise


ngModule.directive('usernameAvailableValidator', ['$http', function($http) {
  return {
    require : 'ngModel',
    link : function($scope, element, attrs, ngModel) {
      ngModel.$asyncValidators.usernameAvailable = function(username) {
        return $http.get('/api/username-exists?u='+ username);
      };
    }
  }
}])

$asyncValidators

  • true when promise resolved, false when promise rejected
  • for $http calls, codes between 200-299 will resolve
  • normal validations are run first to minimize backend calls
  • we have access to ngModel.$pending to show loading indicators

submit form only if valid




  


          

$scope.submit = function (valid) {
  if (!valid) return;
  
  $http.post(...)
}

Angular 2.0

lots of announcements at ng-europe 2014

AtScript

Angular 2.0

"the road to ember 2.0"

https://github.com/emberjs/rfcs/pull/15

stuff to read

stuff to watch

HUGE thanks to all these resources

the end :)

© 2014 PEANUTS Worldwide LLC