AngularJS Workshop

AngularJS workshop in a nutshell

Transcript

1. AngularJS Training in a Nutshell Kristian Guevara
2. Agenda     Brief  Introduction  and  Architecture     Creating  your  “hello  world”  application     Adding  a  little  design  with  bootstrap     Using  the  common  directives     Creating  the  list  application     Looking  at  the  Bigger  picture  
3. Make  sure  to  have  bootstrap  and  angular   libraries  in  your  folder  before  getting  started    –  Enhancement  of  User  Interface    –  The  reason  why  we’re  here  :D   UnderscoreJS  –  For  data  deletion  purpose    
4. Our  End-­‐Goal  for  today:   Building  a  single-­‐paged  Item  List  Application…  From  Scratch!   Nothing  fancy.  Everything  is  straightforward  and  plain  simple  
5. Introduction   First  time  hearing  AngularJS?  Why  wasn’t  this  taught  in  school?  
6. Angular  makes  life   easier     You  don’t  need  to  keep  refreshing     Rich  in  creating  dynamic  and  interactive  web  pages   http://www.9lessons.info/2011/09/submit-­‐form-­‐without-­‐refreshing-­‐page.html  
7. Angular  also  uses  an  an  architectural   pattern  called  MVC  (Model-­‐View-­‐Controller)  
8. Controller(Conductor)   Model(Band)   View(Sounds)  
9. Let’s  get  started   Simple  “Hello  World”   (Demo)  
10. Syntax  Explanation   angular.module(app_name,[])  –  loads   the  ng-­‐app  directive  telling  your   running  angular  on  the  page     $scope  –  serves  as  the  bridge  between   the  view  and  the  controller;  Also  used   to  declare  variables/functions.     {{}}  or  double  curly  braces  serves  as   displaying  values  to  the  view  
11. Recap     Loaded  up  the  angularJS  library     Created  the  app  and  controller  directives  in   the  HTML     Created  the  module  and  controller  in  a  single   JavaScript  file     $scope  –  acts  as  the  object  between  the  view   and  controller.  Also  used  to  create  variables.  
12. Let’s  make  things  a   little  interesting  by   adding  bootstrap  to  our   website  
13. Let’s  add  a  basic  navbar   to  our  site   (Just  like  the  one  below)  
14. Pre-­‐defined  class  definitions   from  bootstrap     <nav  class="navbar  navbar-­‐inverse  navbar-­‐fixed-­‐ top">  -­‐  Creates  the  fixed  navbar  on  top     <div  class="container">  -­‐  defines  a  container  based  on  the   width     <div  class="navbar-­‐header”>  <a  href="#"  class="navbar-­‐ brand">  -­‐  sets  the  header  on  the  top-­‐left  of  the  nav     <ul  class="nav  navbar-­‐nav">  -­‐  Creates  the  list  of   menus  by  using  list  items  <li>     Note:  add  50  pixels  to  the  top  padding  to  adjust  the   content.  
15. Common  directives  
16. ng-­‐repeat     Used  to  display  list  from  arrays  and  objects.  Syntax  is   the  same  as  using  foreach()  in  OOP  
17. ng-­‐model     Used  to  get  the  data  from  input  (text,   checkbox,  radio  buttons,  etc)  
18. ng-­‐show  and  ng-­‐hide     Used  to  show/hide  based  from  the   condition.  I  can  either  be  a  boolean  or   conditional  statements(e.g.  IF)  
19. ng-­‐click     Used  to  trigger  click  events  and  make   corresponding  actions  based  on  logic  
20. Declaring  functions  in   Angular   Normaly  in  OOP,  we  declare  functions  as…                            associated  with  the  Function   keyword     In  Angular,  we  define  them  by  declaring  it  in   the  scope  like  this      
21. Moving  forward:  Item   List  Application  
22. Navigating  to  items   page  without  reload     Putting  the  tabs  in   action  
23. ng-­‐init     Used  to  initialize  values.  In  OOP,  this  is   basically  assigning  values.  (E.G.  int  a  =  0,   string  b  =  “hello”,  etc)     Note  that  his  will  only  work  in  a  single   controller  if  used  for  navigation  
24. Adding  the  table  design     Loading  up  libraries  from  bootstrap       <table  class=“table  table-­‐stripped”>     For  now  let’s  add  hard-­‐coded  data  from   the  JavaScript  to  see  the  layout     After,  use  ng-­‐repeat  to  display  data  
25. Searching  from  the   textbox     Add  another  textbox  which  serves  as   your  textbox  and  name  the  ng-­‐model   “search”.     The  filter  keyword  is  used  in  the  view  to   display  filtered  results  together  
26. Adding  items  to  the  list     Let’s  create  a  new  button  wherein  it  displays   a  new  form  for  input     Copy  and  paste  the  <thead>  portion  and   replace  the  words  into  textbox  with  models   corresponding  to  its  column  with  an  a  prefix   called  “add”.  Add  also  the  checkbbox  option   default  to  false.     Write  the  push  function  in  the  controller  to   add  the  data  
27. Deleting  data     To  delete  data,  add  another  column  for   the  checkbox  and  makesure  it  has  the   model  of  checked  from  the  JSON     Add  another  button  in  which  deletes  all   data  the’s  checked  from  the  checkbox     Load  underscorejs  for  filter.  This  will  be   used  to  filter  data  easier.  
28. Congratulations!  You   have  created  your  first   Angular  app!  
29. Clarifications     There  is  a  better  way  to  implement  single   page  apps  and  it’s  to  use  Angular  Routing   (Rather  than  using  tab  values).  The  reason  we   didn’t  do  it  is  it  NEEDS  to  be  run  on  a  server   (A.K.A  localhost)  for  routings  to  work     What  we  did  are  just  the  basics  and  the  things   you  will  be  needing  to  get  started.  Going   further  to  routes  will  make  you  crazy.  
30. Looking  at  the  bigger   picture  
31. What  benefits  can  I  gain   from  learning  this?   Thesis?   Increase  your  marketability   Gaining  Profit!  
32. Thanks!   For  the  complete  source  code,  go  to  this  link:   https://github.com/xtianxchan/AngularJSListApp-­‐ Workshop      
33. Questions?  
34. Follow  my  links  too!   Github:  https://github.com/xtianxchan   Linkedin:  http://ph.linkedin.com/in/kristianguevara     Speaker  Deck:  https://speakerdeck.com/kristianguevara     Website:  http://kristianguevara.azurewebsites.com