Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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 !

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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  );

Slide 9

Slide 9 text

{{name}}

Slide 10

Slide 10 text

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)

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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}}!

         
                 

Slide 23

Slide 23 text

               
             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

Slide 24

Slide 24 text

               
             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

Slide 25

Slide 25 text

               
             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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

 

{{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

Slide 33

Slide 33 text

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.

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

  • 


    • Slide 38

    Slide 38 text

    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

    Slide 39

    Slide 39 text

    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

    Slide 40

    Slide 40 text

    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

    Slide 41

    Slide 41 text

    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
 ,
    ,

    Slide 42

    Slide 42 text

    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

    Slide 43

    Slide 43 text

    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:
           

    Slide 44

    Slide 44 text

    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/:  

    Slide 45

    Slide 45 text

    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/                                                {{project.title}}                                

    Slide 46

    Slide 46 text

    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

    Slide 47

    Slide 47 text

    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.

    Slide 48

    Slide 48 text

    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.

    Slide 49

    Slide 49 text

    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

    Slide 50

    Slide 50 text

         

             {{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

    Slide 51

    Slide 51 text

         

             {{counter}}  days  since  a  bug  was  found      

         
                           No  bugs  found  today!  :)                                  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

    Slide 52

    Slide 52 text

         

             {{counter}}  days  since  a  bug  was  found      

         
                           No  bugs  found  today!  :)                                  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

    Slide 53

    Slide 53 text

         
                   

    {{counter}}

         
                   function  MagicCtrl($scope)  {              $scope.counter  =  0;          }               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

    Slide 54

    Slide 54 text

         
                   

    {{counter}}

         
                   function  MagicCtrl($scope)  {              $scope.counter  =  0;          }               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 .

    Slide 55

    Slide 55 text

         

             {{counter}}  days  since  a  bug  was  found      

         
                           No  bugs  found  today!  :)                                  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

    Slide 56

    Slide 56 text

         

             {{counter}}  days  since  a  bug  was  found      

         
                           No  bugs  found  today!  :)                                  A  bug  was  found  :(                
     
             function  CounterCtrl($scope)  {  …  }   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

    Slide 57

    Slide 57 text

         

             {{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

    Slide 58

    Slide 58 text

    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}}!

         
                   function  MagicCtrl()  {              this.counter  =  0;          }               D E M O

    Slide 59

    Slide 59 text

    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

    Slide 60

    Slide 60 text

    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:  'pearl@klab.ca',
                                subscribe:  true  };   • In your template:
 
 
 D O C S

    Slide 61

    Slide 61 text

    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

    Slide 62

    Slide 62 text

    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

    Slide 63

    Slide 63 text

    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

    Slide 64

    Slide 64 text

    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');

    Slide 65

    Slide 65 text

    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']);

    Slide 66

    Slide 66 text

    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.

    Slide 67

    Slide 67 text

    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…

    Slide 68

    Slide 68 text

    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

    Slide 69

    Slide 69 text

    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

    Slide 70

    Slide 70 text

    App flow

    Slide 71

    Slide 71 text

    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

    Slide 72

    Slide 72 text

    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

    Slide 73

    Slide 73 text

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

    Slide 74

    Slide 74 text

    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?

    Slide 75

    Slide 75 text

    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

    Slide 76

    Slide 76 text

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

    Slide 77

    Slide 77 text

    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"

    Slide 78

    Slide 78 text

    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

    Slide 79

    Slide 79 text

    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

    Slide 80

    Slide 80 text

    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

    Slide 81

    Slide 81 text

    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

    Slide 82

    Slide 82 text

    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

    Slide 83

    Slide 83 text

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

    Slide 84

    Slide 84 text

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

    Slide 85

    Slide 85 text

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

    Slide 86

    Slide 86 text

    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!

    Slide 87

    Slide 87 text

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

    Slide 88

    Slide 88 text

    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?

    Slide 89

    Slide 89 text

    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

    Slide 90

    Slide 90 text

    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

    Slide 91

    Slide 91 text

    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

    Slide 92

    Slide 92 text

    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?

    Slide 93

    Slide 93 text

    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

    Slide 94

    Slide 94 text

    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" )

    Slide 95

    Slide 95 text

    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

  • 


    • Slide 96

    Slide 96 text

    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;
 });

    Slide 97

    Slide 97 text

    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

    Slide 98

    Slide 98 text

    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"

    Slide 99

    Slide 99 text

    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:'@=&'}

    Slide 100

    Slide 100 text

    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'

    Slide 101

    Slide 101 text

    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
 '&'

    Slide 102

    Slide 102 text

    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

    Slide 103

    Slide 103 text

    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

    Slide 104

    Slide 104 text

    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

    Slide 105

    Slide 105 text

    $ 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

    Slide 106

    Slide 106 text

    $ 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);
    }
 });

    Slide 107

    Slide 107 text

    $ 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

    Slide 108

    Slide 108 text

    $ 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;
    });
 });

    Slide 109

    Slide 109 text

    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?

    Slide 110

    Slide 110 text

    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