Angular

Demo

Barchart

AngularJS.tw Workshop #1

Before We Start

Install Latest Node.js & Required Packages



$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

$ nvm install 0.10.18

$ nvm alias default 0.10.18

$ npm install -g http-server yo generator-angular

Gias Kay Lee

gsklee.im

Why

?

AngularJS ?

A Quick Overview

It's

FAST

(Once you two become good buddies)

It brings

QUALITY

(Both in terms of code structure and robustness)

It's

FREE

(w00t!)

AngularJS


puts a heavy emphasis on

Separation of Concerns





It goes great lengths

extending the vocabulary of HTML

to restore balance to the galaxy...

three pillars of the frontend world...

HTML

STRUCTURE

JS

BEHAVIOR

CSS

PRESENTATION

The Eval JavaScript Empire

HTML

INTERFACE

JS

LOGIC

CSS

PRESENTATION

The New Angular Republic

What We're Gonna Complete

Here

Today

angulardemobarchart

Step #0



Initialize with Yeoman



$ yo angular

$ grunt server #or $ http-server app

Step #1



Scope & Controller



$ git clone https://github.com/gsklee/angular-demo-barchart.git

$ git checkout -f step-1

Step #2



Ajax with $resource



$ git checkout -f step-2

Step #3



ngModel & filter



$ git checkout -f step-3

Quiz #1



Different Resources

but

Same Filter?



$ git checkout -f step-4

Quiz #2



How 'bout

Filtering by Region?



$ git checkout -f answer-1

Quiz #3



Visualize It!



$ git checkout -f answer-2

Step #4



Factory & $q



$ git checkout -f answer-3

Quiz #4



Complete the Factory!



$ git checkout -f step-5

Step #5



Custom Filter



$ git checkout -f answer-4

Step #6



$timeout



$ git checkout -f step-6

Quiz #5



My CSS Transition

Ain't Working?



$ git checkout -f step-7

Quiz #6



Make It Multiple!



$ git checkout -f answer-5

Quiz #7



Bower Power!



$ git checkout -f answer-6

Step #7



ngAnimate



$ git checkout -f answer-7

Quiz #8



More ngAnimate

Awesomeness!



$ git checkout -f step-8

Step #8



ngStorage



$ git checkout -f answer-8

Step #9



Directive & Geocoding



$ git checkout -f step-9

Step #10



$routeProvider

&

AngularUI Utils



$ git checkout -f step-10

Quiz #9



ngAnimate ngView!



$ git checkout -f step-11




Questions?



$ git checkout -f answer-9