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

<div ng-app="myApp" ng-strict-di="">
  <div ng-controller="AppCtrl">{{message}}</div>
</div>
        

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

<!-- view is updated immediately -->
<input type="text" ng-model="userName">
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:

usage

<!-- view will updated only after the first keystroke -->
<input type="text" ng-model="userName">
Hello, my name is {{::userName}}
          

try the demo, adding the "::"

demo

resources on one-time bindings

• Angular Docs
• http://blog.thoughtram.io

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

<!-- will only be updated when user removes focus -->
<input type="text" ng-model="searchText" ng-model-options="{ updateOn : 'blur' }">

<!-- default update behavior and on blur -->
<input type="text" ng-model="searchText" ng-model-options="{ updateOn : 'default blur' }">
          

delaying the model update with debounce

<!-- model update delay of 300ms -->
<input type="text" ng-model="searchText" ng-model-options="{ debounce : 300 }">
Search: {{searchText}}
          

control debounce delay for specific events

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

<!-- model update delay of 300ms on user input, and immediately on blur -->
<input type="text" ng-model="searchText" ng-model-options="{ debounce: { 'default': 300, 'blur': 0 } }">
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)

<div ng-controller="ExampleController">
  <form name="userForm">
    Name:
    <input type="text" name="userName" ng-model="user.name" ng-model-options="{ debounce: 1000 }">
    <button ng-click="userForm.userName.$rollbackViewValue(); user.name=''">Clear</button><br>
  </form>
  <pre>user.name = <span ng-bind="user.name"></span></pre>
</div>
          

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;
  }
}

<div ng-controller="ExampleController">
  <form name="userForm">
    Age:
    <input type="text" name="userAge" ng-model="user.age" ng-model-options="{ getterSetter: true }">
  </form>
  user.age = <span ng-bind="user.age()"></span>
</div>

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

<input type="email" ng-model="data.email" required="">
          

wrap models inside a form, and name them

<form name="userForm">
  <input type="email" name="email" minlength="8" ng-model="data.email" required="">
</form>

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

<form name="userForm"><input type="email" ng-model="data.email" required=""></form>
<div ng-if="userForm.$submitted || userForm.email.$touched" ng-messages="userForm.email.$error" class="errors">
  <div ng-message="required">You did not enter an email.</div>
  <div ng-message="required">You did not enter a valid email.</div>
</div>
          

$validators

//
// <input type="text" custom-validator="" ng-model="myModel">
//
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

<form name="userForm" ng-submit="submit(userForm.$valid)">
  <input type="email" name="email" minlength="8" ng-model="data.email" required="">
</form>
          

$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"

stuff to read

• "Screw You, Angular", by Jeff Whelpley
• All About Angular 2.0, by Rob Eisenberg (creator of Durandal, now core team member)
• 10 Things To Consider While Keeping a Level Head About AngularJS 2.0, by Lukas Ruebbelke

stuff to watch

• ng-europe 2014 Keynote on AtScript - Misko Hevery
• Angular 2.0 Core @ ng-europe 2014
• Q&A on 2.0, AtScript @ ng-europe 2014

HUGE thanks to all these resources

• http://www.yearofmoo.com/2014/09/taming-forms-in-angularjs-1-3.html
• Exploring ngModelOptions
• Exploring one-time bindings

the end :)

© 2014 PEANUTS Worldwide LLC