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?
<br />
NEED A BREAK?
WELCOME BACK
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