27

AngularJS - What is it & Why is it awesome ? (with demos)

Embed Size (px)

DESCRIPTION

AngularJS - What is it & Why is it awesome! A quick introduction to AngularJS, its features and some demos. This deck was part of Gary Arora's presentation for the Boston Code Mastery event in December 2013.

Citation preview

Page 1: AngularJS - What is it & Why is it awesome ? (with demos)
Page 2: AngularJS - What is it & Why is it awesome ? (with demos)

Why

is Awesome!Gary Arora

Page 3: AngularJS - What is it & Why is it awesome ? (with demos)

Who's that guy?

AroraGary.com

Gary Arora

Sr. Consultant at

Microsoft Technology Stack

Technology Enthusiast (geek) -

Meteor, Node, Angular etc.

Globetrotter

Amateur pilot

Magenic

Page 4: AngularJS - What is it & Why is it awesome ? (with demos)

What Angular is NOT

Page 5: AngularJS - What is it & Why is it awesome ? (with demos)

AngularJS...

is not a JavaScript library (e.g jQuery)

is not a Platform (e.g .Net, Java) or a Language (e.g C#)

is not a Plugin or a browser extension

doesn’t abstract away HTML, CSS, or JavaScript

doesn’t require jQuery or inheritance from proprietary types

doesn’t use one-way data binding

doesn’t require boilerplate code

is not that complicated

Page 6: AngularJS - What is it & Why is it awesome ? (with demos)

What Angular is

Page 7: AngularJS - What is it & Why is it awesome ? (with demos)

“Superheroic JavaScript MVW Framework” - angularjs.org

The Creator.Miško Hevery.

“Angular is what the web browserwould have been, had it been

designed for applications”

Angular is a client-sideMVC framework but...

“there is complete lack of an angularAPI. There is nothing to inherit,

nothing to call, and no complex lifecycle for your controllers to follow [...]

It really is just a better browser.”

Page 8: AngularJS - What is it & Why is it awesome ? (with demos)

Demo!

Page 9: AngularJS - What is it & Why is it awesome ? (with demos)

Hello World!

<p>Hello World</p>

Hello !

Enter name

Page 10: AngularJS - What is it & Why is it awesome ? (with demos)

Hello [name]!

jQuery

Angular

Page 11: AngularJS - What is it & Why is it awesome ? (with demos)

What makes Angular Awesome ?

Page 12: AngularJS - What is it & Why is it awesome ? (with demos)

Why is Angular awesome?

MVC design pattern

SPA support

Testing

JavaScript

Google

Core AngularJS

Features

AngularJS's MVC = MVVM (Model-View-

ViewModel).

Model = Data (JavaScript Object)

ViewModel = Specific data to specific view

($scope)

Page 13: AngularJS - What is it & Why is it awesome ? (with demos)

Why is Angular awesome?

MVC design pattern

SPA support

Testing

JavaScript

Google

Core AngularJS

Features

index.html about_us.html our_products.html

Page 14: AngularJS - What is it & Why is it awesome ? (with demos)

Why is Angular awesome?

MVC design pattern

SPA support

Testing

JavaScript

Google

Core AngularJS

Features

1. Unit Testing - Isolate small "units" of code2. E2E Testing - Full area of application against a

special HTTP server3. 1,600 AngularJS tests in about 3 seconds

Page 15: AngularJS - What is it & Why is it awesome ? (with demos)

Why is Angular awesome?

MVC design pattern

SPA support

Testing

JavaScript

Google

Core AngularJS

Features

Clientside rendering

Perceived Performance

POJOAtwood’s Law

“Any application that can be written in JavaScriptwill eventually be written in JavaScript”

~Jeff Atwood, co-founder: Stack Overflow, Stack Exchange

Page 16: AngularJS - What is it & Why is it awesome ? (with demos)

Why is Angular awesome?

MVC design pattern

SPA support

Testing

JavaScript

Google

Core AngularJS

Features

Google Product = Steller level & quality of

support

Google Backing = Increased credibility &

interest

Page 17: AngularJS - What is it & Why is it awesome ? (with demos)

AngularJS Features: 2 Way Databinding

Page 18: AngularJS - What is it & Why is it awesome ? (with demos)

AngularJS Features: 2 Way Databinding

Page 19: AngularJS - What is it & Why is it awesome ? (with demos)

AngularJS Features: Filters & DynamicTemplating

Page 20: AngularJS - What is it & Why is it awesome ? (with demos)

AngularJS Features: Filters & DynamicTemplating

Page 21: AngularJS - What is it & Why is it awesome ? (with demos)

AngularJS Features: Filters & DynamicTemplating

Page 22: AngularJS - What is it & Why is it awesome ? (with demos)

AngularJS Features: Directives

Page 23: AngularJS - What is it & Why is it awesome ? (with demos)

AngularJS Features: Directives

Page 24: AngularJS - What is it & Why is it awesome ? (with demos)

AngularJS Features: Directives

Page 25: AngularJS - What is it & Why is it awesome ? (with demos)

Summing upWhat: It's a framework that binds your HTML (views) to JavaScript

objects (models)

Why: To create properly architected & maintanable web applications

MVC done right - Reduces server load

Geared towards SPA & CRUD web applications (Think database

frontends)

Robust set of tools

Amazing testability

Write less code

Is awesome!

Page 26: AngularJS - What is it & Why is it awesome ? (with demos)

How do I learn more?AngularJS Official Site

AngularJS Subreddit

AngularJS YouTube

Channel

Egghead.io

Built with AngularJS

Page 27: AngularJS - What is it & Why is it awesome ? (with demos)