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

AngularJS @ DevWeek 2014

AngularJS @ DevWeek 2014

Video: http://vimeo.com/user22258446/review/91421794/91f15e0ea0

Source code:
https://github.com/pchen/DevWeek2014-Angular

You've probably heard of Backbone.js as a JavaScript MVC (Model-View-Controller) framework for building web apps, but it's worth exploring other options when you want to get more out of your framework. AngularJS is highly opinionated, which makes it easier for beginners to grasp core MVC concepts, while veteran web developers will enjoy its integration with automated testing suites. And for anyone who wants to write less boilerplate code? You will love Angular JS's two-way data binding abilities. Attend this session and Angular JS just might turn into your favourite MVC framework.

http://devweek.com/talks/19?type=Talk

Pearl Chen

April 01, 2014
Tweet

More Decks by Pearl Chen

Other Decks in Technology

Transcript

  1. A n g u l a rJ S
    a i n’ t j u s t a n o t h e r M VC f r a m e w o r k
    @ P e a r lC h e n
    Slides: go.klab.ca/devweek-angular

    View Slide

  2. My n a m e i s Pe a r l C h e n .
    H E L LO !
    T h a n k s ,
    D e v We e k !

    View Slide

  3. Te c h n o l o g i s t + E d u c a t o r
    I ’ M A …
    Karma Laboratory

    View Slide

  4. A n g u l a rJ S
    I ❤
    Adobe Flash with
    ActionScript 2 & AS3
    Adobe Flex with
    ActionScript 3
    HTML, CSS, & JS with
    AngularJS

    View Slide

  5. W h a t i s A n g u l a rJ S ?
    I N T R O

    View Slide

  6. W h a t i s A n g u l a rJ S ?
    I N T R O
    angularjs.org

    View Slide

  7. W h a t i s A n g u l a rJ S ?
    I N T R O

    View Slide

  8. Given this JavaScript string:
    name  =  'DevWeek  2014';
    The old school way to dynamically update DOM text:
     
    document.getElementById('conference')
    Things got easier with the jQuery $(selector):
     
    $('#conference')
    Now, with Angular!
    {{name}}
    .textContent  =  name;
    .text(  name  );

    View Slide

  9. {{name}}

    View Slide

  10. AngularJS is a JavaScript MVC framework

    but…
    “there is nothing to inherit, nothing to call, and 

    no complex life cycle for your controllers to
    follow. […] It really is just a better browser.”
    - Misko Hevery, creator of AngularJS

    Appliness (Feb #11)

    View Slide

  11. B e g i n n e r / i n t e r m e d i a t e ?
    W H Y A N G U L A R ?
    • Declarative ➞ Readable
    • Spaghetti code
    • Does a lot of heavy lifting for you
    • Opinionated == good

    View Slide

  12. Mo r e a d v a n c e d ?
    W H Y A N G U L A R ?
    • Create complex web apps with less code.
    • Write code with unit testing in mind.

    View Slide

  13. Mo d e l -Vi e w - C o n t ro l l e r
    M V C R E F R E S H E R

    View Slide

  14. Model

    your application data
    Controller

    mediator between the view & model
    View

    a representation

    of the model data
    M V C R E F R E S H E R
    x
    user input database save
    REST result
    update DOM

    View Slide

  15. Mo d e l -Vi e w -W h a t e v e r
    M V C R E F R E S H E R
    L I N K

    View Slide

  16. Re c o m m e n d e d Re a d i n g
    M V C ( O R J AVA S C R I P T ) R E F R E S H E R

    View Slide

  17. "The model is the truth."
    - a wise person

    View Slide

  18. Pa r t 1 : O v e r v i e w
    A G E N D A
    Module building blocks:
    • directives (built in)
    • controllers + $scope
    • modules +
    dependency injection
    The basics:
    • getting started
    • 2-way data binding
    • template expressions

    View Slide

  19. Pa r t 2 : To o l s
    A G E N D A
    • Batarang for Chrome DevTools
    • Yeoman for scaffolding
    • Testing tools
    • Text editor plugins

    View Slide

  20. Pa r t 3 : G o i n g d e e p e r
    A G E N D A
    • Custom directives
    • $watch and $apply

    View Slide

  21. G e t t i n g s t a r t e d
    PA R T 1 : A N G U L A R O V E R V I E W

    View Slide

  22. A s i m p l e A n g u l a r t e m p l a t e
    D E M O
     
         
             
               What’s  your  name?  
                 
               Hello  {{yourName}}!  
             
             
         

    View Slide

  23.  
         
             
               What’s  your  name?  
                 
               Hello  {{yourName}}!  
             
             
         

    I n c l u d e t h e a n g u l a r . j s s c r i p t

    Ready for production?
    LO A D LO C A L LY O R F R O M A C D N

    View Slide

  24.  
         
             
               What’s  your  name?  
                 
               Hello  {{yourName}}!  
             
             
         

    B o o t s t r a p y o u r a p p

    Need to manipulate stuff in ? Only making a small widget?
    U S E T H E n g A p p D I R E C T I V E O N T H E PA R E N T N O D E

    View Slide

  25.  
         
             
               What’s  your  name?  
                 
               Hello  {{yourName}}!  
             
             
         

    M a ke i t A n g u l a r
    A D D OT H E R D I R E C T I V E S L I K E n g M o d e l
    A D D S O M E T E M P L AT E E X P R E S S I O N S

    View Slide

  26. Te m p l a t e e x p r e s s i o n s
    PA R T 1 : A N G U L A R O V E R V I E W

    View Slide

  27. O u t p u t t i n g v a l u e s
    T E M P L AT E E X P R E S S I O N S
    • Expressions are JavaScript-like code snippets.
    • Double curly brace notation

    e.g. {{simpleVariable}}  or {{object.simpleVariable}}
    • Evaluate and bind to primitives

    Strings, numbers, and booleans
    • undefined and null values will show up blank.
    D E M O

    View Slide

  28. F l o w c o n t ro l
    T E M P L AT E E X P R E S S I O N S
    • There is none!
    • No looping or conditionals within {{  }}.
    • Handle business logic with methods in a controller
    or via a directive.

    View Slide

  29. v s D i r e c t i v e e x p r e s s i o n s
    T E M P L AT E E X P R E S S I O N S
    • You might come across something like this:

    Hello  {{username}}!
    • But what about this?


    • Object literal notation

    e.g. {'stringToOutput':booleanCondition}
    • Not exactly the same as {{ }}. 

    Evaluated in the directive. Think: function parameter.
    D E M O

    View Slide

  30. D a t a b i n d i n g
    PA R T 1 : A N G U L A R O V E R V I E W

    View Slide

  31. 1 - w ay b i n d i n g
    D ATA B I N D I N G
     
    {{yourName}}
    yourName  
    hardcoded  to  'Pearl'
    {{yourName}}
    value="{{yourName}}"
    Pearl
    Pearl
    1 -WAY M E R G E

    View Slide

  32.  
    {{yourName}}
    2 - w ay b i n d i n g
    D ATA B I N D I N G
    yourName  
    hardcoded  to  'Pearl'
    {{yourName}}
    value="{{yourName}}"
    model becomes

    single source of truth
    L I N K E D
    L I N K E D
    ng-­‐model="yourName"
    value="{{yourName}}
    D E M O
    A U T O U P D AT E S
    Pearl
    Pearl

    View Slide

  33. H T M L C o m p i l e r
    D ATA B I N D I N G
    • The Angular compiler consumes the DOM, 

    not string templates.
    • Currently uses "dirty checking".
    • Object.observe in future versions of Angular.

    View Slide

  34. Pa r t 1 : O v e r v i e w
    A G E N D A
    Module building blocks:
    • directives (built in)
    • controllers + $scope
    • modules +
    dependency injection
    The basics:
    getting started
    2-way data binding
    template expressions

    View Slide

  35. D i r e c t i v e s 

    ( b u i l t i n a n d o t h e r l i b r a r i e s )
    PA R T 1 : A N G U L A R O V E R V I E W

    View Slide

  36. Angular directives teach DOM elements new tricks!
    • Use directives to enhance existing elements


    • Create directives to encapsulate DOM functionality


    W h a t i s a d i r e c t i v e ?
    D I R E C T I V E S

    View Slide

  37. Us i n g d i r e c t i v e s
    D I R E C T I V E S
    Syntax-wise, it can be a:
    • tag attribute


     
    • existing or custom HTML tag



    • css class



    View Slide

  38. B u i l t - i n d i r e c t i v e s
    D I R E C T I V E S
    Control
    • ng-repeat
    • ng-if / ng-switch
    Events
    • ng-click / ng-submit
    • ng-focus / ng-blur
    • ng-cut / ng-copy / ng-paste
    These are only some of them! Go to docs.angularjs.org/api/ng/directive for the full list.
    CSS
    • ng-class / ng-style
    • ng-show / ng-hide
    • ng-class-even / ng-class-odd
    Forms
    • form / input / select / textarea
    • ng-model
    • ng-selected / ng-checked
    • ng-required / ng-disabled

    View Slide

  39. n g - w h a t ?
    D I R E C T I V E N A M E S PA C I N G
    Angular Angular

    View Slide

  40. n g W h a t ? ?
    D I R E C T I V E N A M E S PA C I N G
    ng-click ??? ngClick
    N O R M A L I Z AT I O N

    View Slide

  41. Mo d u l e n a m e n o r m a l i z a t i o n
    D I R E C T I V E S
    Directive names automatically get converted.
    • camelCase used in JavaScript 

    angular.module('myApp',  [])

       .directive('myDirective',  function()  {

           //  return  

       });  
    • dashes used in HTML

    , ,

    View Slide

  42. H T M L 5 c o m p l i a n c y
    D I R E C T I V E S
    Need to run your markup through a validator?
    • Add the data-­‐ prefix: data-­‐ng-­‐directive  
    • x-­‐ng-­‐directive  for experimental vendor-specific feature
    Colons and underscores work too… but they are considered legacy:
    • ng:directive, data-­‐ng:directive, or x:ng_directive

    View Slide

  43. E x a m p l e : D 3
    D I R E C T I V E S
    From odiseo.net/angularjs/proper-use-of-d3-js-with-angular-directives:
     
         

    View Slide

  44. E x a m p l e : C h a r t J S
    D I R E C T I V E S
    From blog.safaribooksonline.com/2013/11/07/creating-an-angularjs-component/:
           width="chart.width"    
           height="chart.height"    
           title="{{chart.title}}"    
           type="{{chart.type}}"  
           data="{{chart.data}}"  
           ng-­‐model="chart">  

    View Slide

  45. E x a m p l e : Ic o n i c Fr a m e w o r k
    D I R E C T I V E S
    ionicframework.com

    >> /docs/angularjs/controllers/side-menu/
     
         
             
                                 ng-­‐repeat="project  in  projects">  
                   {{project.title}}  
                 
             
         

    View Slide

  46. C o n t ro l l e r s a n d $ s c o p e
    PA R T 1 : A N G U L A R O V E R V I E W

    View Slide

  47. G e t t i n g o r g a n i z e d
    C O N T R O L L E R S
    • Views are for HTML output.
    • Directives are for DOM manipulation.
    • Controllers are for your business logic.

    View Slide

  48. B u i l d a b u g t r a c ke r a p p
    C O N T R O L L E R S
    Let's build a "bug tracker app". Features of this app:
    1. 2.
    3.

    View Slide

  49. 1 . T h e v i e w
     
         
           {{counter}}  days  since  a  bug  was  found  
         
         
             
               No  bugs  found  today!  :)  
             
             
               A  bug  was  found  :(  
             
         
         
    D E M O

    View Slide

  50.  
         
           {{counter}}  days  since  a  bug  was  found  
         
         
             
               No  bugs  found  today!  :)  
             
             
               A  bug  was  found  :(  
             
         
         

    2 . A d d i n g l o g i c t o t h e v i e w
    D E M O

    View Slide

  51.  
                 ng-­‐init="style={'background-­‐color':'rgba(223,240,216,0)'}">  
           {{counter}}  days  since  a  bug  was  found  
         
         
                     style={'background-­‐color':'rgba(223,240,216,'+counter/20+')'}">  
               No  bugs  found  today!  :)  
             
                     style={'background-­‐color':'rgba(223,240,216,0)'}">  
               A  bug  was  found  :(  
             
         
         

    3 . A d d i n g m o r e l o g i c t o t h e v i e w
    D E M O

    View Slide

  52.  
                 ng-­‐init="style={'background-­‐color':'rgba(223,240,216,0)'}">  
           {{counter}}  days  since  a  bug  was  found  
         
         
                     style={'background-­‐color':'rgba(223,240,216,'+counter/20+')'}">  
               No  bugs  found  today!  :)  
             
                     style={'background-­‐color':'rgba(223,240,216,0)'}">  
               A  bug  was  found  :(  
             
         
         

    4 . A d d i n g e v e n m o r e l o g i c …
    S TO P

    View Slide

  53.  
         
           
         {{counter}}  
         
         <br/>        function  MagicCtrl($scope)  {  <br/>            $scope.counter  =  0;  <br/>        }  <br/>      
         

    C r e a t i n g a n A n g u l a r c o n t ro l l e r
    C O N T R O L L E R S
    U S E T H E n g C o n t r o l l e r D I R E C T I V E
    S A M E N A M E

    View Slide

  54.  
         
           
         {{counter}}  
         
         <br/>        function  MagicCtrl($scope)  {  <br/>            $scope.counter  =  0;  <br/>        }  <br/>      
         

    D e p e n d e n c y i n j e c t i o n o f $ s c o p e
    C O N T R O L L E R S
    D O N ' T N E E D $ s c o p e H E R E
    G E T / S E T V I A $ s c o p e .

    View Slide

  55.  
                 ng-­‐init="style={'background-­‐color':'rgba(223,240,216,0)'}">  
           {{counter}}  days  since  a  bug  was  found  
         
         
                     style={'background-­‐color':'rgba(223,240,216,'+counter/20+')'}">  
               No  bugs  found  today!  :)  
             
                     style={'background-­‐color':'rgba(223,240,216,0)'}">  
               A  bug  was  found  :(  
             
         
         

    4 . P u t l o g i c i n t o a c o n t ro l l e r

    View Slide

  56.  
         
           {{counter}}  days  since  a  bug  was  found  
         
         
             
               No  bugs  found  today!  :)  
             
             
               A  bug  was  found  :(  
             
         
     
     
     <br/>    function  CounterCtrl($scope)  {  …  }  <br/>
    4 . P u t l o g i c i n t o a c o n t ro l l e r
    D E M O

    View Slide

  57.  
         
           {{counter}}  days  since  a  bug  was  found  
         
         
             
               No  bugs  found  today!  :)  
             
             
               A  bug  was  found  :(  
             
         
     
     

    5 . E x t e r n a l i z e c o n t ro l l e r
    D E M O

    View Slide

  58. Wi t h o u t $ s c o p e ( n e w e r s y n t a x )
    C O N T R O L L E R S
    N E E D A L I A S H E R E
    N O $ s c o p e S O U S E t h i s .
    N E W A L I A S
     
         
           
         {{ctrl.counter}}!  
         
         <br/>        function  MagicCtrl()  {  <br/>            this.counter  =  0;  <br/>        }  <br/>      
         

    D E M O

    View Slide

  59. A r r ay s w i t h n gRe p e a t
    C O N T R O L L E R S
    • In your controller:

    $scope.todos  =  ["Learn  Angular",  

                                   "Make  awesome  apps",  

                                   "Rule  the  world"];  
    • In your template:


       {{todo}}


    D O C S

    View Slide

  60. Fo r m s o b j e c t s
    C O N T R O L L E R S
    • In your controller:

    $scope.user  =  {  name:  'Pearl',  

                                   email:  '[email protected]',

                                   subscribe:  true  };  
    • In your template:




    D O C S

    View Slide

  61. Mo d u l e s a n d
    d e p e n d e n c y i n j e c t i o n
    PA R T 1 : A N G U L A R O V E R V I E W

    View Slide

  62. Mo d u l a r c o m p o n e n t s
    M O D U L E S A N D D E P E N D E N C Y I N J E C T I O N
    Angular modules are just object containers.
    • Top-level module is like an application namespace
    • Stores your controllers, directives, etc
    • Declare what is required as a dependency
    • Angular takes care of bootstrapping module 

    vs developer having to declare & initialize it manually.
    D O C S

    View Slide

  63. Mo d u l e s y n t a x
    M O D U L E S A N D D E P E N D E N C Y I N J E C T I O N
    • Create top-level application module:
    • …  
    • angular.module('demoApp',  []);
    • Add another module like a controller:  
    • angular.module('demoApp')

       .controller('MagicCtrl',  function  ($scope)  {

           //  $scope.stuff  =  'goes  here';

       });  

    D O C S

    View Slide

  64. Mo d u l e s y n t a x
    M O D U L E S A N D D E P E N D E N C Y I N J E C T I O N
    Note the subtle difference:
    • Create:

    angular.module('demoApp',  []);  
    • Retrieve:

    var  myModule  =  angular.module('demoApp');

    View Slide

  65. D e p e n d e n c y i n j e c t i o n
    M O D U L E S A N D D E P E N D E N C Y I N J E C T I O N
    • Declare an application with no dependencies:

    angular.module('demoApp',  []);  
    • Declare a dependency on the URL routing module:

    angular.module('demoApp',  ['ngRoute']);  
    • Declare even more dependencies:

    angular.module('demoApp',  ['ngRoute','ngResource',  
    'ngCookies']);

    View Slide

  66. D e p e n d e n c y i n j e c t i o n
    M O D U L E S A N D D E P E N D E N C Y I N J E C T I O N
    • Each dependency should be a separate .js file:  
    • angular.module('demoApp',  

    ['ngRoute','ngResource',  'ngCookies']);  
    •  


     
    • Use a concat script (via Grunt or Gulp) to compile
    them all into 1 file when ready to deploy.

    View Slide

  67. Pa r t 1 : O v e r v i e w
    A G E N D A
    Module building blocks:
    directives (built in)
    controllers + $scope
    modules +
    dependency injection
    The basics:
    getting started
    2-way data binding
    template expressions
    questions?
    Let's recap, then…

    View Slide

  68. Re c a p : a l l t o g e t h e r n o w
    PA R T 1 : A N G U L A R O V E R V I E W

    View Slide

  69. Re w r i t i n g a s i m p l e " a p p"
    R E C A P : A L L TO G E T H E R N O W
    Going from jQuery to AngularJS
    D E M O

    View Slide

  70. App flow

    View Slide

  71. C o m p a r i n g t h e c o d e
    R E C A P : A L L TO G E T H E R N O W
    C O M PA R E

    View Slide

  72. B e n e f i t s
    R E C A P : A L L TO G E T H E R N O W
    Model-driven data binding means:
    • descriptive state variables —> code is better at

    "self documenting"
    • less code needed for DOM manipulation
    • business logic decoupled from the view
    • behavioural intentions are more clear in the HTML

    View Slide

  73. "The model is the truth."
    - me, a few slides ago
    REMINDER!

    View Slide

  74. Pa r t 1 : O v e r v i e w
    A G E N D A
    Module building blocks:
    directives (built in)
    controllers + $scope
    modules +
    dependency injection
    The basics:
    getting started
    2-way data binding
    template expressions
    Questions?

    View Slide

  75. Pa r t 2 : To o l s
    A G E N D A
    • Batarang for Chrome DevTools
    • Yeoman for scaffolding
    • Testing tools
    • Text editor plugins

    View Slide

  76. B a t a r a n g
    PA R T 2 : O T H E R T O O L S

    View Slide

  77. I n s t a l l f ro m C h ro m e S t o r e
    B ATA R A N G
    chrome.google.com/webstore > "Batarang"

    View Slide

  78. Ye o m a n fo r A n g u l a r
    PA R T 2 : O T H E R T O O L S

    View Slide

  79. S c a f fo l d y o u r a p p
    Y E O M A N F O R A N G U L A R
    Tutorial: yeoman.io/codelab.html

    View Slide

  80. To g e t s t a r t e d
    Y E O M A N F O R A N G U L A R
    $  [sudo]  npm  install  -­‐-­‐global  yo  
    $  yo  
    $  [sudo]  npm  install  -­‐g  generator-­‐angular  
    $  yo  angular  [app-­‐name]  
    $  bower  install  -­‐-­‐save  angular-­‐cookies  
    $  grunt  serve

    View Slide

  81. W h i l e y o u ' r e c o d i n g …
    Y E O M A N F O R A N G U L A R
    $  yo  angular:controller  [controllerName]  
    $  yo  angular:view  [viewName]  
    $  yo  angular:route  [routeName]  
    $  yo  angular:directive  [directiveName]  
    $  grunt  test
    All of the commands: github.com/yeoman/generator-angular

    View Slide

  82. Re a d y t o r e l e a s e ?
    Y E O M A N F O R A N G U L A R
    $  grunt  build

    View Slide

  83. Te s t i n g
    PA R T 2 : O T H E R T O O L S

    View Slide

  84. K a r m a
    T E S T I N G
    karma-runner.github.io

    View Slide

  85. Ja s m i n e
    T E S T I N G
    jasmine.github.io

    View Slide

  86. Us e d t o g e t h e r
    T E S T I N G
    • Karma test runner is for running your JS tests.
    • Jasmine is the syntax for describing your tests.
    • it('should  attach  awesomeThings  to  scope',  function  ()  {

           expect(scope.awesomeThings.length).toBe(3);

       });  
    • Tests automatically get generated with Yeoman
    generator-angular — so no excuses!

    View Slide

  87. P ro t r a c t o r
    T E S T I N G
    github.com/angular/protractor

    View Slide

  88. P ro t r a c t o r
    T E S T I N G
    • Use for end-to-end (e2e) functional testing
    • Wrapper for Selenium WebDriver
    • Uses Jasmine and "page objects" for its specs.
    • Fairly new so not part of Yeoman generator-angular — yet?

    View Slide

  89. Te x t e d i t o r p l u g i n s
    PA R T 2 : O T H E R T O O L S

    View Slide

  90. Fo r S u b l i m e Te x t
    T E X T E D I TO R P LU G I N S
    github.com/angular-ui/AngularJS-sublime-package

    View Slide

  91. Fo r o t h e r s
    T E X T E D I TO R P LU G I N S
    docs.angularjs.org/guide#tools

    View Slide

  92. Pa r t 2 : To o l s
    A G E N D A
    Batarang for Chrome DevTools
    Yeoman for scaffolding
    Testing tools
    Text editor plugins
    Questions?

    View Slide

  93. Pa r t 3 : G o i n g d e e p e r
    A G E N D A
    • Custom directives
    • $watch and $apply

    View Slide

  94. PA R T 3 : G O I N G D E E P E R
    C u s t o m d i r e c t i v e s 

    ( a k a " b u i l d y o u r o w n" )

    View Slide

  95. D i r e c t i v e s r e f r e s h e r
    C U S T O M D I R E C T I V E S
    Syntax-wise, it can be a:
    • tag attribute


     
    • existing or custom HTML element



    • css class



    View Slide

  96. D e f i n i n g c u s t o m d i r e c t i v e s
    C U S T O M D I R E C T I V E S
    • angular.module('demoApp')

       .directive('myTooltip',  function  ()  {

           return  directiveObject;

    });

    View Slide

  97. D i r e c t i v e d e f i n i t i o n o b j e c t
    C U S T O M D I R E C T I V E S

    View Slide

  98. D i r e c t i v e d e f i n i t i o n o b j e c t
    C U S T O M D I R E C T I V E S
    table from "AngularJS"

    View Slide

  99. To p 4 p ro p e r t i e s
    C U S T O M D I R E C T I V E S
    • restrict: 'E', 'A', 'C', or 'M' (or a combo 'AC')
    • template: 'Stuff'

    or templateUrl: 'myTemplate.html'  
    • link: function  postLink(scope,  elem,  attrs)  {

                 //  do  scope.stuff  here

             }
    • scope: false (default), true, or {attribute:'@=&'}

    View Slide

  100. Re s t r i c t
    C U S T O M D I R E C T I V E S
    • tag attribute

    'A'  
    • existing or custom HTML element

    'E'
    • css class

    'C'  
    • HTML comment

    'M'

    View Slide

  101. S c o p e
    C U S T O M D I R E C T I V E S
    • bind to object property in parent scope

    '='  
    • pass as string

    '@'
    • bind to function in parent scope

    '&'

    View Slide

  102. S a m p l e p ro j e c t
    C U S T O M D I R E C T I V E S
    designresearchtechniques.com

    View Slide

  103. S a m p l e c o d e
    C U S T O M D I R E C T I V E S
    github.com/pchen/telus-mobility-web-stats

    View Slide

  104. PA R T 3 : G O I N G D E E P E R
    $ w a t c h a n d $ a p p l y

    View Slide

  105. $ w a t c h
    $ WATC H A N D $ A P P LY
    Listen for changes in your properties:
    scope.$watch('watchExpression',  function(){

       //  do  stuff  now  that  watchProperty  has  changed

    });
    D O C S

    View Slide

  106. $ w a t c h
    $ WATC H A N D $ A P P LY
    Example, state changes in one file:

    scope.filterByTop10  =  function(event){

       event.preventDefault();

       scope.showInPhase  =  '';  //clear  out  phase  filters

       scope.showTop10  =  true;

    };
    Listening for the change:

    scope.$watch('showTop10',  function(){

       if  (  scope.appendix.length  >  0  )  {

           scope.filteredAppendix  =  $filter('masterTechniqueFilter')

                                               (scope.appendix,  scope.showInPhase,  scope.showTop10);

       }

    });

    View Slide

  107. $ a p p l y
    $ WATC H A N D $ A P P LY
    Use $apply to execute an expression in angular from
    outside of the angular framework.
    scope.$apply('expression');  
    e.g. browser DOM events, setTimeout, XHR or third party libraries
    D O C S

    View Slide

  108. $ a p p l y
    $ WATC H A N D $ A P P LY
    Example DOM event:
    element.on('mouseover',  'li',  function(event){

       var  technique  =  angular.element(  event.target  ).scope().technique;

       scope.$apply(function(){

           scope.selectedTechnique  =  technique;

       });

    });

    View Slide

  109. Pa r t 3 : G o i n g d e e p e r
    A G E N D A
    Custom directives
    $watch and $apply
    Questions?

    View Slide

  110. TWITTER @PearlChen
    GOOGLE+ klab.ca/+
    P E A R L C H E N
    T h a n k y o u !

    ( D e m o s : g i t h u b . c o m / p c h e n / D e v We e k 2 0 1 4 -A n g u l a r )
    F I N

    View Slide