Angular Crash Course

Introduction to

AngularJS

Before we start...

POLLS

http://www.flickr.com/photos/58112514@N06/6089655050/

Are you doing

FRONTEND

stuff?

Do you include

jQuery

in every project

even before writing down your 1st line of

JavaScript?

Have you tried

building any

SPA

solely in jQuery?

I have.

It sucks.

Gias Kay Lee

@gsklee / gsklee.im

Angular Crash Course

▶

Introduction to AngularJS

Anatomy of AngularJS

Getting Started with AngularJS

The End of the Old and the Dawn of the New

An 8-hour

CRASH COURSE

focusing on

CONCEPTUAL

and

HIGH-LEVEL

overview of the framework

Walking through each public API which also happens to be well-documented on the official site?

You've gotta be kidding me...

No Hand-Holding

http://powerpuffssavetheday.tumblr.com/

An-gu-lah?

Why should I?

— Squidward Quincy Tentacles

http://moxie2d.deviantart.com/art/Squidward-145571470

To answer that question

a little bit of history recap is needed...

Introduction to

AngularJS

§ History of JavaScript Frameworks §

Why AngularJS

Conceptual Overview

The Angular Way

jQuery.

Once a best friend forever

...until the era of webapps

It has grown from

a handy DOM manipulation tool...

to an all-in-one juggernaut

without much forethoughts

jQuery + Webapp = Headaches

Structureless spaghetti code

Selectors creating tight coupling

Not enough high level abstractions

Then, there is

Backbone.js

It brings structures to our codes

...but still uses jQuery to handle the Views

Issues Solved by Backbone

Spaghetti code

Issues NOT Solved

by Backbone

Selectors creating tight coupling

What about

High Level Abstractions?

Well, since Backbone is unopinionated...

It lacks the necessary tools

to easily manage any webapp

above a certain threshold in complexity

From personal experiences...

Single view? Cool.

Multiple sibling views? Cool.

Multiple nested views? OMG.
(Many real-world webapps belong to this category)

In the end,

Backbone asks you to write

A Lot More Codes

to get what you want

AngularJS

Here to save your day

Introduction to

AngularJS

History of JavaScript Frameworks

§ Why AngularJS §

Conceptual Overview

The Angular Way

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

HTML

STRUCTURE

JS

BEHAVIOR

CSS

PRESENTATION

The Eval JavaScript Empire

HTML

INTERFACE

JS

LOGIC

CSS

PRESENTATION

The New Angular Republic

AngularJS

returns things to where they belong

in their natural forms

HTML? Build UI Declaratively!

CSS? Animations!

JavaScript? Use it the plain old way!

Introduction to

AngularJS

History of JavaScript Frameworks

Why AngularJS

§ Conceptual Overview §

The Angular Way

So, what is AngularJS?

Official Site:

Toolset for Building (Your) Framework

Misko: HTML Compiler

http://www.quora.com/JavaScript/How-do-Angular-js-and-Backbone-js-compare

Igor: MVW Framework

https://plus.google.com/104744871076396904202/posts/DRUAkZmXjNV

Live Code Demo

http://plnkr.co/

Model

View

Controller

Scope

$scope

{

Inner Workings

$$childHead: Child

$$childTail: Child

$$listeners: Object

$$nextSibling: Child

$$prevSibling: null

$$watchers: Array[2]

Special Properties

$id: '004'

$parent: Child

User Definitions

...

}

Directive

Angular Template

String Template

App Initialization

App Runtime

Introduction to

AngularJS

History of JavaScript Frameworks

Why AngularJS

Conceptual Overview

§ The Angular Way §

It's better to build UI

DECLARATIVELY

It's better to separate

DOM MANIPULATION

from

REAL LOGICS

It's better to separate

CLIENT CODE

from

SERVER CODE

Consequences

Separation of Concerns

in All Aspects

Easy Unit Testing

and

E2E Testing

THE ANGULAR WAY

http://www.wallpaperup.com/41783/Spongebob_rainbow_cartoon.html

Questions?

angular-phonecat

http://docs.angularjs.org/tutorial/