Angular.jS 1.2

What is new?

by Wesley Cho

$Animate

  • Uses CSS3 transitions, animations, or JavaScript animations
  • Angular provides default classes with $animate behavior for:
    • ngView, ngInclude
    • ngRepeat
    • ngShow, ngHide, ngIf, ngSwitch
    • ngClass

$ANIMATE

How to use $animate

Template functions

<div select-template="item.id as item.name for item in items"></div>
->
angular.module('demo', [])
.directive('selectTemplate', function () {
replace: true,
scope: {
template: '@selectTemplate'
},
template: '<select ng-options="template" ng-model="foo"></select>'
});
http://plnkr.co/edit/l5O1ujwSxhtFGb4nKPOO

Template Functions

But this does not work!
Error: [ngOptions:iexp] Expected expression in form of '_select_ (as _label_)? for (_key_,)?_value_ in _collection_' but got 'options'. Element: <select class="form-control ng-pristine ng-valid" ng-model="model" ng-options="options"> http://errors.angularjs.org/1.2.0-rc.2/ngOptions/iexp?p0=options&p1=%3Cselectlass%3D%form-control%20ng-pristine%20ng-valid%22%20ng-model%3D%22model%22%20ng-options%3D%options%22%3E

This is because Angular already expects the string in the correct format, and not a variable in scope that evaluates to the string

Template Functions


Template functions


$route

  • Params matching in routes

$q

  • Offers `finally` callback chaining
    • Observe fulfillment of promise w/o changing final value
    • Note:  Must use promise['finally'](callback) due to IE8
    • 'finally' is a reserved word in JavaScript
  • Offers `catch` callback chaining for error handling
    • Adds $q.notify for updates on promise's status

    $Q

    $http

    • Interceptors - $http.interceptors
      • Allows intercepting requests

    $resource

    • Accessing the $http promise directly
    • Ex. $resource(...).get(...).$promise.success(function (data) { ... })
    • $resource(...).get(...).$promise is the $http promise

    New Event Directives

    • ng-keydown/ng-keyup/ng-keypress
    • ng-focus/ng-blur
    • All these directives (+ ng-submit) allow you to access `$event`

    ng-if

    • ng-if works similarly to ng-show
    • Does not render content in DOM if condition is false
      • Importance:
        • CSS
        • Avoid creation of $watch from directives like ng-repeat
    • Creates new $scope

    ng-REPEAT

    • Support for multielement repeaters
    • `track by` syntax
      • For keeping order of elements when array changes

    $provide.decorator

    • Note: This actually was in 1.0.0 (and maybe beforehand)
    • Still relatively obscure & awesome feature!

      $provide.decorator

      $provide.decorator

      $Provide.decorator

      • Useful for forcing any factory, service, directive, etc. to have a provider
      • Allows you to reuse components that may not function exactly how you want
      • http://stackoverflow.com/a/16084888/1771358
        • Use cases include
          • Caching an expensive request
          • Debugging/Testing
          • Throttling calls via debounce function (like _.debounce)
          • Overriding template locations

      $sce

      • New service for explicitly whitelisting trusted content for bindings

      NG-controller

      • You can do `ng-controller="MainCtrl as Product"
      • function MainCtrl () {
      this.list = [1, 2, 3];
      }
      • <div ng-repeat="item in Product.list">

      NG-Controller

      NG-Controller

      Advantages
      • Allows you to be more semantic
      • Allows you to namespace multiple instances of the same controller for organization in the DOM
      • Allows you to avoid polluting $scope with methods that are specific to the controller
        • These methods do not get inherited by child controllers!

      Upgrade pitfalls

      • $route has been split off into 'ngRoute' module in 'angular-route.js' script

      Upgrade PITFALLS

      • `ng-bind-html-unsafe` is removed
        • Use `ng-bind-html`
        • Use $sce.trustAsHtml function to whitelist

      Upgrade Pitfalls

      • ng-repeat
        • Arrays will often need `track by $index` if you have items of equal value

      Hiring

      Learning Objects is hiring!

      Looking for a few good Angular & Java developers






      You can download the slides at

      Angular 1.2 - What is New?

      By Wesley Cho

      Angular 1.2 - What is New?

      A brief overview of what Angular 1.2 has to offer developers

      • 2,691