Leveling Up

in Angular

Alicia Liu

@aliciatweet

Sr Software Engineer, Lift

Enjoyment of Angular

Module Organization

Module By Feature

Supports asynchronous loading of modules in the future

Services

Service vs Factory

var Mario = function() {
  this.size = 'small';
};
Mario.prototype.eatMushroom = function() {
  this.size = 'large';
};
myModule.service('marioService', Mario); // calls new Mario()

myModule.factory('marioService', function() {
  var mario = {
    size: 'small'
  };
  return {
    eatMushroom: function() {
      mario.size = 'large';
    }
  };
});

Provider

myModule.provider('marioService', function() {
  var config = {
    size: 'small'
  };
  return {
    setSize: function(size) {
      config.size = size;
    },
    $get: function(utilities) {
      return {
        eatMushroom: function() { ... },
        // other methods
      }
    }
  };
});

Asynchronous Events

// in some service
$rootScope.$broadcast(MARIO_LOADED, { mario: data}); // when data loads

// in some controller
$scope.$on(MARIO_LOADED, doStuffWithMario);

What happens if the data doesn't load?

Promises   $q

// in some service
var deferred = $q.defer();
svc.getMario = function() {
  return deferred.promise;
};
...
deferred.resolve(data); // when some data loads
...
deferred.reject(error); // if data doesn't load

// in some controller
svc.getMario().then( doStuffWithMario, displayError );

Using Promises

• Chaining
• $q.all
• $q.when
• Interceptors

Resolve

myModule.config(function($routeProvider) {

    $routeProvider.when('/character/:id', {
      templateUrl: 'profile.html',
      controller: 'CharacterCtrl',
      resolve: {
        character: function($route, CharacterService) {
          // returns a promise
          return CharacterService.get($route.current.params.id);
        }
      }
    });
});

myModule.controller('CharacterCtrl', function($scope, character) {
  $scope.character = character;
});

Directives

Why Write Custom Directives?

• Reusable Components
• Manipulate the DOM

Directive Example

<enemy enemy-type="{{enemyType}}" lives="lives" on-destroy="destroy()"></enemy>
      

angular.module('demo.characters').directive('enemy', function() {
    return {
        template: "<div ng-class="{goomba: type == \"small\", bowser: type == \"big\"}"></div>",
        replace: true,
        restrict: "E",
        scope: {
            type: "@enemyType",
            currentLives: "=lives",
            onDestroy: "&"
        },
        link: function(scope, iElement, iAttrs) { ... }
    };
});

Restrict

• "E": Element, <my-directive>
• "A": Attribute, <div my-directive>
• "C": Class, <div class="my-directive">
• Combination e.g. "EA"

Scope

• false: use existing scope (default)
• true: new scope
• object: isolated scope, e.g.

  scope: {
      type: "@enemyType",
      currentLives: "=lives",
      onDestroy: "&"
  }

  • "@": pass as string, can be interpolated
  • "=": data bind this property
  • "&": pass a function

Link: Using $watch

link: function(scope, iElement, iAttrs) {
      var $enemy = $(iElement[0]);
      scope.$watch("currentLives", function(newLives, oldLives) {
            if (newLives > oldLives) {
                $enemy.animate({width:"+=10px",height:"+=10px"},150).animate({width:"-=10px",height:"-=10px"},150);
            } else if (newLives < oldLives) {
                $enemy.animate({width:"-=10px",height:"-=10px"},150).animate({width:"+=10px",height:"+=10px"},150);
            }
        });
}

Link: Handle jQuery Event

// jQuery Land
$(document).on('click.fireball', function(e) {
    var $fireball = $("<div class='fire-ball'></div>");
    var offset = $character.offset();
    $fireball.css({top: offset.top + ($character.height()/2), left: offset.left + $character.width()});
    $character.after($fireball);
    $fireball.animate({top: e.pageY, left: e.pageX}, function() {
        $fireball.remove();
        $(e.target).trigger("attack");
    });
});

// in Angular directive
link: function(scope, iElement, iAttrs) {
  var $enemy = $(iElement[0]);

  $enemy.on("attack", function(e) {
      scope.$apply(function() {
          scope.currentLives = scope.currentLives - 1;
          if (scope.currentLives === 0) {
              $enemy.remove();
              scope.onDestroy();
          }
      });
  });
}

DEMO

The EndThanks!

Alicia Liu

@aliciatweet

http://alicialiu.net/leveling-up-angular-talk

Images adapted from Mario Wiki