UNLEASH YOUR CREATIVITY WITH 


 Angular.js  


   









 





  ANDREAS MALÄR   
  GION KUNZ   

 Workshop schedule 


 09:00 - START 
 09:30 - INFRASTRUCTURE / ENVIRONMENT (VM) 
 10:00 - ANGULAR.JS INTRO EXAMPLE 
 10:30 - COFFEE <BR/> 10 MINUTES 
 10:40 - ANGULAR.JS EXCERCISES 
 12:20 - LUNCH 
 13:15 - MARKDOWN CHAT APPLICATION PART 1 
 15:00 - 
COFFEE <BR/> 10 MINUTES 
 15:10 - MARKDOWN CHAT APPLICATION PART 2 
 17:30 - FINISH 

 Setup 




 DO YOU HAVE THE VM READY? 

 OTHER ISSUES? 

 DOES YOUR INTERNET WORK? 

 What are  

 we gonna  

 do?  



 WEB DEVELOPMENT STACK  

 BASICS OF ANGULAR.JS 

 PRACTICE WITH EXAMPLES  

 BUILD A Cool HTML5 CHAT!  

 What we  

 ain't  

 gonna do!  



 No rocket sience 

 No fancy ui design 

 No SASSiSFaCtion 

 NO NUMBERCRUNCHING 

 THIS IS 
 NOT 





 A DEEP 

 DIVE  


 THEORY 

 What is Angular.jS? 




 MVC? MVP? MVVM? 

 MVW hat  ever  works  for  you



 "AngularJS lets you extend HTML vocabulary for your application." 



 Angular BASICS 



  ANGULAR BOOTSTRAP WITH NG-APP  

  EXPRESSIONS {{ }}  

  BASIC DIRECTIVE NG-REPEAT  




  JSBIN >  jsbin.com/dusupo  

 BINDINGS 


 & ONE WAY  

 = TWO WAY  


 {{ EXPRESSIONS }} 

 FUNCTION BINDING 

How Do bindings work?


 Angular BREAD & BUTTER 



 MODULES 

 CONTROLLER NG-CONTROLLER 

 SCOPE WITH $SCOPE 

 INPUT BINDING WITH NG-MODEL  


  JSBIN > jsbin.com/rigisa  

 SCOPE 

 /skəʊp/ Noun: "The extent of the area or subject matter that 
 something deals with or to which it is relevant"  



 HIERARCHY USING PROTOTYPES 

 STORES MODEL / VIEW MODEL 

 CAN BE USED TO PROPAGATE EVENTS 

How does Scope work?


 ANGULAR'S GLUE 



 PROVIDERS 

 VALUES & CONSTANTS 

 SERVICES & FACTORIES 

 DEPENDENCY INJECTION (DI) 


  JSBIN > jsbin.com/huniyi  

  INJECT YOUR  

  DEPENDENCIES  


 DECLARATIONS WITH FACTORY FUNCTIONS 

 ARGUMENTS HAVE NO ORDER 

 LOOSE COUPLING  WITH INVERSION OF CONTROL 

 ONE INJECTOR REGISTRY PER APPLICATION 

Angular.js Architecture



 YOU JUST GRADUATED! 



 DO YOU FEEL LIKE THIS? 

What is a web stack?

Grunt.js 

a simple task runner

Installation

USING NODE PACKAGE MANAGER

 

Usage

GRUNTFILE.JS / CLI / TASK:TARGET

ALMOST LIVE CODING

WITH LIVE RELOAD

 DUDE! 

 I WANT THIS! 

 NOW!  







 KEEP CALM, WE'LL GET TO THIS SOON... 



 LET'S CODE! 



 BUT BEFORE THAT... 

 LET'S PAIR UP 

 WHAT'S FIREBASE




 http://www.firebase.com 

 REALTIME NO-SQL DATABASE 

 MAX 50 CONNECTIONS AND 5 GB FOR FREE 



 OPEN A TERMINAL 

 npm install -g bower grunt-cli 

 curl -L goo.gl/KOd2DZ | sh 

 cd ~/md-chat-workshop 

 grunt serve