UNLEASH YOUR CREATIVITY WITH
Angular.js
![](https://s3.amazonaws.com/media-p.slid.es/uploads/gionkunz/images/406117/AngularJS-Shield-large.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/gionkunz/images/597042/firebase_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/gionkunz/images/597039/nodejs_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/gionkunz/images/597040/grunt.png)
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?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/gionkunz/images/407726/theory-angular-binding.png)
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?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/gionkunz/images/407518/theory-angular-scopes.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/gionkunz/images/407470/theory-angular-architecture.png)
YOU JUST GRADUATED!
DO YOU FEEL LIKE THIS?
<br />
NEED A BREAK?
WELCOME BACK
What is a web stack?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/gionkunz/images/406585/theory-webstrack.png)
Grunt.js
a simple task runner
Installation
USING NODE PACKAGE MANAGER
Usage
GRUNTFILE.JS / CLI / TASK:TARGET
![](https://s3.amazonaws.com/media-p.slid.es/uploads/gionkunz/images/605518/grunt-simple-usage.gif)
ALMOST LIVE CODING
WITH LIVE RELOAD
![](https://s3.amazonaws.com/media-p.slid.es/uploads/gionkunz/images/605656/grunt-serve.gif)
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
Unleash Your Creativity with Angular.js
By Gion Kunz
Unleash Your Creativity with Angular.js
- 3,516