AngularJS Speaker Notes

gistfile1.md

Overview

• Troy Harvey, IT Consultant at ZyQuest

• Woodport Doors project

• Demonstrate door.bifold ng-model binding.

  scope = angular.element($0).scope()
  scope.DoorService.door.bifold = false
  

AngularJS Overview

• Disclaimer. There are other great options. Ember.js, Backbone.js
• http://angularjs.org
• "Angular is what HTML would have been had it been designed for applications"
• Allows you to extend the vocabulary of HTML and do things like binding the bifold checkbox to the Door.bifold property.
• It's plain Javascript. Our Door class is plain Javascript - no special inheritance or wrappers.

AngularJS Live Coding

• Create AngularJS boilerplate
• Bind {{ flights.count }} Flights
• {{ flights.count * 1000 }}
• Expressions docs
• Create controller

function FlightCtrl($scope) {
    $scope.flights = {
        count: 3
    };
}

• Scope: Multiple controllers with unique scope
• Scope: Property vs model
• Move controller into main.js
• Flight class

var Flight = function(number) {
    this.number = number;
}

• Move Flight class into flight.js
• Add a Service called FlightService

var flightApp = angular.module('flightApp', []);

flightApp.factory('FlightService', function() {
    return new Flight('UPS1234', 'SDF', 'CGN', new Date().getTime());
});

• Add a function to the controller

    $scope.zTimeFormat = function(timestamp) {
        return new Date(timestamp).toLocaleString();
    };

• Use a Filter for date formatting instead

{{ flight.departure | date:'HH:mm' }}Z

• Add ng-repeat Directive and filterFlightsBy

    [
        new Flight('UPS0010', 'SDF', 'CGN', new Date(2013,6,11,12,0).getTime() + Math.random()*43200000),
        new Flight('UPS0918', 'SDF', 'PHX', new Date(2013,6,11,12,0).getTime() + Math.random()*43200000),
        new Flight('UPS1872', 'SDF', 'ANC', new Date(2013,6,11,12,0).getTime() + Math.random()*43200000),
        new Flight('UPS6261', 'SDF', 'CGN', new Date(2013,6,11,12,0).getTime() + Math.random()*43200000),
        new Flight('UPS3827', 'SDF', 'MMX', new Date(2013,6,11,12,0).getTime() + Math.random()*43200000),
        new Flight('UPS2722', 'PHX', 'LAX', new Date(2013,6,11,12,0).getTime() + Math.random()*43200000),
        new Flight('UPS9482', 'PHX', 'BDL', new Date(2013,6,11,12,0).getTime() + Math.random()*43200000),
        new Flight('UPS8372', 'ANC', 'TPE', new Date(2013,6,11,12,0).getTime() + Math.random()*43200000),
        new Flight('UPS0482', 'BUR', 'PHX', new Date(2013,6,11,12,0).getTime() + Math.random()*43200000),
        new Flight('UPS2871', 'OAK', 'LAX', new Date(2013,6,11,12,0).getTime() + Math.random()*43200000),
        new Flight('UPS8392', 'SNA', 'LAX', new Date(2013,6,11,12,0).getTime() + Math.random()*43200000),
        new Flight('UPS0238', 'BDL', 'SDF', new Date(2013,6,11,12,0).getTime() + Math.random()*43200000),
        new Flight('UPS0392', 'ATL', 'SDF', new Date(2013,6,11,12,0).getTime() + Math.random()*43200000),
        new Flight('UPS9482', 'HNL', 'ANC', new Date(2013,6,11,12,0).getTime() + Math.random()*43200000),
        new Flight('UPS2028', 'BOS', 'SDF', new Date(2013,6,11,12,0).getTime() + Math.random()*43200000),
        new Flight('UPS4792', 'STL', 'SDF', new Date(2013,6,11,12,0).getTime() + Math.random()*43200000),
        new Flight('UPS2984', 'SDF', 'OKC', new Date(2013,6,11,12,0).getTime() + Math.random()*43200000)
      ];

• Filter results "flight in flights | filter:filterFlightsBy"
• Filter origin only ng-model="filterFlightsBy.origin"
• Order by departure | orderBy: 'departure'
• Show SDF only ng-hide="sdfOnly && flight.origin != 'SDF'"
• Custom Directive to link to Map

flightApp.directive("mapLink", function($window) {
    return function(scope, element) {
        element.bind('click', function() {
            $window.location.href = "https://maps.google.com/maps?q=" + this.innerText + "+airport&hl=en";
        });
    }
});