What's AngularJS?

AngularJS, is a client-side JavaScript framework designed for Single Page Application

Why AngularJS?

No external libraries

JQuery, Underscore etc..

Magic tricks in HTML
Maintained and fully funded by Google!

Stats

	AngularJS	BackBone.js
GitHub Contributors	1,062	240
Third-Party Modules	800 ngmodules	236 backplugs
StackOverflow	62,797	16,678
Library Size	111kb	60 kb + JQuery + Underscore

Growing

YOU

STILL

ASK

WHY?

TWO WAY

DATA BINDING

One-way data binding

BackBone.js

V.S.

Two-way data binding

AngularJS

Name:
Hello {{input}}

WHY

Less DOM manipulation
Less code
Less Bugs

HOW

But...

As $scope grow

Slow performance

Solutions:

Use in small data set
Use $apply to start or stop $scope
Use BackBone.js

Templates

&

Directives

What are directives?

A directive is a JavaScript object that generate a view

You can reference to them by using HTML attribute
Built-in directives: ngRepeat, ngBind, ngModel, and ngClass

ngRepeat

The ngRpeat loops over a collection of data. The same as for-loop

{{elm | uppercase}}

Filter

filter Selects a subset from collection
currency Convert decimal to local currency
orderBy Arrange data base on expression

Search:

{{elm | uppercase}}

No need for

Built a directive

Create a directive

app.directive("dirName", functionality)

Use directive

Dependency

Injection

Dependency Injection Provide:

Reusable Code between programs
Simpler dependency resolution via DI
Single responsibility principle

Testing

WHY

Less Debugging
No Blaming
Increasing Productivity
AngularJS is built with testing in mind

Unit & End-End Testing

Code Logic
User interface
Automation