Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Directives For The Rest Of Us

Angular Directives For The Rest Of Us

A very basic introduction to directives. Talk at the Angular Meetup Berlin, April 9th 2014

Rin Raeuber

April 09, 2014
Tweet

More Decks by Rin Raeuber

Other Decks in Programming

Transcript

  1. Angular Directives
    for the rest of us

    View full-size slide

  2. Rin Räuber
    @rinpaku

    !
    developer at bitcrowd

    View full-size slide

  3. Content
    what is a directive?
    !
    how to roll your own.
    !
    testing.

    View full-size slide

  4. Angular
    is what HTML would have been,

    had it been designed

    for building web-apps

    View full-size slide

  5. lets you build a new vocabulary

    for HTML – a DSL for your app

    Angular

    View full-size slide

  6. What the fuck
    is a Directive?

    View full-size slide

  7. teach your browser new tricks

    !
    add behavior to an element

    and/or transform the DOM
    Directives

    View full-size slide

  8. !
    !
    !<br/>$(function() {!<br/>$("#datepicker").datepicker();!<br/>});!<br/>
    instead of this

    View full-size slide

  9. instead
    of this

    View full-size slide

  10. include angular.js

    the setup

    View full-size slide

  11. include angular.js

    create your Angular app
    angular.module(“myAwesomeAngularApp”, []);
    the setup

    View full-size slide

  12. include angular.js

    create your Angular app
    angular.module(“myAwesomeAngularApp”, []);
    have Angular bootstrap it

    the setup

    View full-size slide

  13. the setup
    $ yo angular bitch
    shortcut!

    View full-size slide

  14. Our first
    Directive

    View full-size slide

  15. myApp.directive('kitten',
    function(){
    return {
    // directive definition object
    };
    }
    );
    Registering a directive

    View full-size slide

  16. restrictions
    myApp.directive('myDirective',
    function(){
    return {
    restrict: ‘ACE’
    };
    }
    );

    View full-size slide

  17. restrictions
    A is for attributes

    View full-size slide

  18. restrictions
    C is for CSS classes


    View full-size slide

  19. restrictions
    E is for elements

    View full-size slide

  20. restrictions
    E is for elements

    no kittens
    for IE =< 8

    View full-size slide

  21. myApp.directive('myDirective',
    function(){
    return {
    template: ‘I am a template’
    };
    }
    );
    template

    View full-size slide

  22. myApp.directive('myDirective',
    function(){
    return {
    templateUrl: ‘me_too.html’
    };
    }
    );
    templateUrl

    View full-size slide

  23. let’s look at
    an example.

    View full-size slide

  24. kittens
    come
    in different
    sizes,
    so …

    View full-size slide

  25. let’s add an attribute
    height=‘50’>

    View full-size slide

  26. myApp.directive('myDirective', function(){
    return {
    link: function(scope, element, attrs){
    // do something
    }
    };
    });
    the linkin’ function

    View full-size slide

  27. modifying the DOM
    function(scope, element, attrs){
    // change the height of the element
    element.css(‘height’, ‘42px’);
    }

    View full-size slide

  28. let’s look at
    an example.
    again.

    View full-size slide

  29. … but
    what about
    behavior?

    View full-size slide

  30. adding an event listener
    function(scope, element, attrs){
    element.on(‘mouseover’, function(){
    alert(‘meooow’);
    })
    }

    View full-size slide

  31. let’s look at
    an example.
    one last time.

    View full-size slide

  32. I wish
    I had known™

    View full-size slide

  33. scope.$apply

    View full-size slide

  34. when to use
    scope.$apply

    View full-size slide

  35. changes to the scope
    that Angular doesn’t
    know about

    View full-size slide

  36. changes to the scope
    that Angular doesn’t
    know about
    browser DOM events

    View full-size slide

  37. changes to the scope
    that Angular doesn’t
    know about
    browser DOM events
    setTimeout

    View full-size slide

  38. changes to the scope
    that Angular doesn’t
    know about
    browser DOM events
    setTimeout
    asynchronous requests

    View full-size slide

  39. changes to the scope
    that Angular doesn’t
    know about
    browser DOM events
    setTimeout
    asynchronous requests

    ng-click
    $timeout
    $http

    View full-size slide

  40. … but how
    do I test
    this stuff?

    View full-size slide

  41. you DO test,
    don’t you?

    View full-size slide

  42. Unit Testing w/
    Karma and Jasmine

    View full-size slide

  43. install and configure Karma
    $ npm install -g karma
    $ karma init
    run Karma
    karma start
    rejoice \o/
    the setup

    View full-size slide

  44. describe(‘my thing', function(){
    // some setup stuff
    !
    it(“does something", function() {
    expect(result).toEqual(expectedResult);
    });
    Jasmine specs

    View full-size slide

  45. Built-in
    Directives

    View full-size slide

  46. ng-click

    Kitten

    View full-size slide

  47. ng-hide=‘hidden’>
    Hide me!

    ng-hide

    View full-size slide

  48. ng-show=‘shown’>
    Hide me!

    ng-show

    View full-size slide


  49. I think, therefore I am.

    ng-if

    View full-size slide

  50. Moar
    Directives

    View full-size slide

  51. even more awesome angular directives

    View full-size slide

  52. some words
    of advice.

    View full-size slide

  53. Don’t try to use “self-closing”

    or void tags for your directives.

    View full-size slide

  54. Know where to use scope.$apply.

    !
    (And why.)

    View full-size slide

  55. Read the fucking manual.

    View full-size slide

  56. Don’t reimplement

    existing directives.

    View full-size slide

  57. … that directives are awesome

    !
    … how to build one

    !
    … how to manipulate the DOM

    and add event listeners in its link function

    !
    … how to test a directive
    you hopefully learnt

    View full-size slide

  58. kthxbai
    @rinpaku
    abstraction.killedthecat.net

    View full-size slide

  59. Writing Directives (Talk by Miško Hevery)
    Resources
    unrelated, but awesome:
    Building 2048 in Angular

    View full-size slide