AngularJS

Chris Breiding

 

(use arrow keys to navigate through slides)

What is AngularJS?

  • MV* framework
  • Ideal for single page applications
  • "HTML Enhanced"

Features

  • Templating
  • Data binding
  • Directives
  • Services
  • Dependency injection
  • Filters
  • Routing
  • Testability

Templating


    <!DOCTYPE html>
    <html ng-app="myApp">
        <head>
            ...
        </head>
        <body ng-controller="PageCtrl">

            <h1>{{title}}</h1>

            <p>{{content}}</p>

        </body>
    </html>

Data Binding


    var myApp = angular.module('myApp');

    myApp.controller('PageCtrl', function ($scope) {

        $scope.title = 'The Eleventh Hour';

        $scope.content = "There's something you better understand about me, 'cause it's important and one day your life may depend on it. I am definitely a madman with a box!";

    });

Data Binding

View demo


    <!DOCTYPE html>
    <html ng-app>
        <head>
            ...
        </head>
        <body>

            <input ng-model="items" type="text" />

            <p>{{items || 'Fezes'}} are cool!</p>

        </body>
    </html>

Directives

"Teach HTML new tricks"

Add behavior to DOM elements with custom attributes

Create custom elements

 

  • ng-model
  • ng-repeat
  • ng-click
  • ng-view
  • ng-pluralize

Directives in Action

View demo


    <!DOCTYPE html>
    <html ng-app="quoteApp">
        <head>
            ...
        </head>
        <body ng-controller="QuoteCtrl">
            <ul>
                <li ng-repeat="quote in quotes"
                    ng-class="{emphasize: quote.em}"
                    ng-click="toggleEmphasis(quote)">
                    "{{quote.text}}"
                </li>
            </ul>
        </body>
    </html>

Directives in Action


var quoteApp = angular.module('quoteApp', []);
quoteApp.controller('QuoteCtrl', function ($scope) {
    $scope.quotes = [
        { em : false, text : "Never ignore a ..." },
        { em : true,  text : "Bow ties are cool." },
        { em : false, text : "It's a lot to take ..." },
        { em : false, text : "First things first. You ..." }
    ];

    $scope.toggleEmphasis = function (quote) {
        quote.em = !quote.em;
    };
});

Directives - make your own!

Attributes



        <select chosen>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
Chosen site | Tutorial

Directives - make your own!

Elements



        <markdown>
            # AngularJS

            * Directives
            * Services
            * Filters
        </markdown>
Tutorial Part 1 | Tutorial Part 2

Services

Injectable objects that carry out specific tasks

Provide a way to separate concerns and re-use code

 

  • $http
  • $resource
  • $locale
  • $timeout
  • $filter
  • $routeProvider

Dependency Injection

services.js


angular.module('quoteServices', ['ngResource'])
.factory('Quote', function ($resource) {
    return $resource('/quotes/:id');
});

quote_controller.js


var quoteApp = angular.module('quoteApp', ['quoteServices']);
quoteApp.controller('QuoteCtrl', function ($scope, Quote) {
    $scope.quotes = Quote.query();

    $scope.toggleEmphasis = function (quote) {
        quote.em = !quote.em;
    };
});

Filters

Used in template expressions to format the display of data

 

  • currency
  • date
  • json
  • orderBy
  • filter

currency

View demo


    <input type="number" ng-model="amount">
    <p>{{amount | currency}}</p>

filter

View demo


    <input type="text" ng-model="query">
    <ul>
        <li ng-repeat="item in items | filter:query">
            {{item}}
        </li>
    </ul>

Routing

View demo


    angular.module('quoteApp', [],
        function($routeProvider) {
            $routeProvider
                .when('/', {
                    templateUrl : 'views/index.html',
                    controller : 'QuoteCtrl'
                })
                .when('/quote/:id', {
                    templateUrl : 'views/show.html',
                    controller : 'QuoteDetailCtrl'
                })
                .otherwise({ redirectTo : '/' });
        }
    );

Testability

  • "Built to be testable"
    • Dependency injection
    • Separation of concerns
  • Mocks for unit tests
  • DSL for end-to-end tests
  • Resources provided are Jasmine-only
  • Developers favor Testacular

Unit Tests

 

quote_controller.js


var myApp = angular.module('myApp');

myApp.controller('QuoteCtrl', function ($scope, $http) {
    $http.get('/quotes').success(function(data) {
        $scope.quotes = data;
    });
});

controller_spec.js


describe('QuoteCtrl', function() {
    var scope, ctrl, $httpBackend;

    beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
        $httpBackend = _$httpBackend_;
        $httpBackend.expectGET('/quotes')
            .respond([{text: 'Four score...'}, {text: 'Ask not...'}]);
        scope = $rootScope.$new();
        ctrl = $controller('QuoteCtrl', {$scope: scope});
    }));

    it('creates a quotes model with 2 quotes fetched from xhr', function() {
        expect(scope.quotes).toBeUndefined();
        $httpBackend.flush();
        expect(scope.quotes)
            .toEqual([{text: 'Four score...'}, {text: 'Ask not...'}]);
    });
});

End-to-end Tests

Filter demo


describe('Grocery list', function() {
    beforeEach(function() {
        browser().navigateTo('/');
    });

    it('filters the grocery list based on the search query', function() {
        expect(repeater('.groceries li').count()).toBe(7);

        input('query').enter('b');
        expect(repeater('.groceries li').count()).toBe(2);

        input('query').enter('cheese');
        expect(repeater('.groceries li').count()).toBe(3);
    });
});

Resources

Learning

Troubleshooting

Resources

Useful Stuff

Why use AngularJS?

  • Reduces boilerplate
  • 2-way data binding
  • Separation of concerns
  • Dependency injection
  • Full-featured
  • Extensible
  • Testable

Thank You!