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

Post on 06-May-2015

12.173 views 0 download

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.

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

Why

is Awesome!Gary Arora

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

What Angular is NOT

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

What Angular is

“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.”

Demo!

Hello World!

<p>Hello World</p>

Hello !

Enter name

Hello [name]!

jQuery

Angular

What makes Angular Awesome ?

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)

Why is Angular awesome?

MVC design pattern

SPA support

Testing

JavaScript

Google

Core AngularJS

Features

index.html about_us.html our_products.html

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

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

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

AngularJS Features: 2 Way Databinding

AngularJS Features: 2 Way Databinding

AngularJS Features: Filters & DynamicTemplating

AngularJS Features: Filters & DynamicTemplating

AngularJS Features: Filters & DynamicTemplating

AngularJS Features: Directives

AngularJS Features: Directives

AngularJS Features: Directives

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!

How do I learn more?AngularJS Official Site

AngularJS Subreddit

AngularJS YouTube

Channel

Egghead.io

Built with AngularJS