Angular Crash Course
#1
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
Angular Crash Course
#1
▶
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-compareIgor: MVW Framework
https://plus.google.com/104744871076396904202/posts/DRUAkZmXjNVLive 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
vs
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
THE ANGULAR WAY
http://www.wallpaperup.com/41783/Spongebob_rainbow_cartoon.html
Questions?
angular-phonecat
http://docs.angularjs.org/tutorial/AngularJS Crash Course #1: Introduction to AngularJS
By G. Kay Lee
