Angular JS

Transcript

1. David  Spence  
2. What  is  AngularJS?   •  “AngularJS  is  what  HTML  would  have  been,   had  it  been  designed  for  building  web-­‐apps.”   •  A  javascript  MVC  framework  (more  than  a   uJlity  library)  for  AJAX  heavy  applicaJons   Framework   Stack  Overflow  ques3ons   GitHub  stars   AngularJS   41k   25k   Backbone   15k   18k   Knockout   11k   5k   Ember   10k   10.5k  
3. Real  life  applicaJons   •  hXps://builtwith.angularjs.org/    
4. Some  key  features   •  DeclaraJve  HTML   •  Easy  two  way  data-­‐binding   •  Re-­‐usable  components   •  Dependency  injecJon   •  Unit  tesJng  (850+  for  us  currently)  
5. Why  are  we  using  AngularJS?   •  Defra  prototype  /  maps   •  Lots  of  APIs  and  JSON   –  GET  /api/organisaJon/5      {      "id":5,      "name":"Beech  Nut  Hill  Lane",      "sbi":222222841    }  
6. Basic  data  binding   <html>   <body>    <div>Name:  {{  name  }}</div>    <div>Age:  {{  age  }}</div>   </body>   </html>     Name:  David   Age:  25     {    name:  ‘David’,    age:  25   }     =     +    
7. What  would  I  have  done  before?   var  name  =  ‘David’;       •  JavaScript   <div  id=“name”></div>   document.getElementById(‘name’).textContent  =  name;     •  jQuery   <div  id=“name”></div>   $(‘#name’).text(name);     •  AngularJS   <div>{{  name  }}</div>    
8. What  goes  in  a  controller?   •  Simple  values,  objects,  funcJons     function  ZooController($scope)  {    $scope.maxAnimals  =  10;      $scope.animals  =  [{      name:  'tiger’,  cost:  5    },  {      name:  'elephant’,  cost:  10    }];      $scope.isOpen  =  function()  {      var  now  =  new  Date();      return  now.getHours()  >  9  &&  now.getHours  <  17;        };     }  
9.   <html>    <head>      <script  src="angular.js"></script>      <script>        funcJon  CarsController($scope)  {          $scope.car  =  ‘nissan  micra’;        }      </script>    </head>    <body  ng-­‐app>      <div  ng-­‐controller=“CarsController”>        <label>What's  your  favorite  car?</label>        <h1>Hello  {{car}}!</h1>      </div>    </body>   </html>   1.   2.   3.   4.   5.  
10. DEMO  
11. Adding  behavior  without  selectors   •  For  jQuery,  behavior  depends  on  a  class,  ID  or   structure  you’ve  given  to  your  markup.  This  means   that  making  a  class  change  for  CSS  purposes  could   break  your  JS  in  non-­‐obvious  ways.     <input  type=“text”  id=“member-­‐search”  />     <table  id="member-­‐list”>    <tbody>      <tr>        <td>          <a>David</a>        </td>      </tr>    </tbody>   </table>  
12. In  jQuery   var  $members  =  $('#member-­‐list').find('tbody  tr  td  a');     var  searchText  =  '';     $('#member-­‐search').keyup(function  ()  {    searchText  =  $(this).val();     $members.each(function  ()  {      var  $tr  =  $(this).closest('tr');      if  ($ (this).text().toLowerCase().indexOf(searchText.toLowerCase())  !=  -­‐1)  {    $tr.show();    }      else  {        $tr.hide();      }    });   });   And  if  structure  changes..?  
13. In  AngularJS,  direcJves  should   manipulate  the  DOM     $personNameContainsSearchPhrase  =  function(person)  {    return    person.name.toLowerCase().indexOf(      searchText.toLowerCase())  !=  -­‐1   };   <input  type=“text”  ng-­‐model=“…”  />     <table>   <tbody>    <tr  ng-­‐repeat=“…”  ng-­‐show=“personNameContainsSearchPhrase(person)”>      <td>        <a>{{  person.name  }}</a>      </td>    </tr>   </tbody>   </table>  
14. DeclaraJve  style   <button  ng-­‐click=“submitReview()”>Submit  review</button>     <div  ng-­‐show=“car.isCool”>    Your  car  is  really  cool!   </div>     <ul>          <li  ng-­‐repeat="car  in  cars">              {{  car.brand  }}  {{  car.model  }}          </li>   </ul>     <select  ng-­‐options=“car.model  for  car  in  cars”></select>     When  basic  behavior  is  defined  in  the  markup,  you  can  easily  tell   what  is  happening.  
15. Simple  custom  direcJve   define(function()  {          var  capdHistoryGoBack  =  function($window)  {                  return  {                          link:  function(scope,  element,  attrs)  {                                  $(element).on('click',  function()  {                                          $window.history.back();                                  });                          }                  }          }          capdHistoryGoBack.$inject  =  ['$window'];          return  capdHistoryGoBack;   });   <button  capd-­‐history-­‐go-­‐back>Back</button>  
16. DEMO