AngularJS – Why Angular: #1

View Github Repository Open presentation in a new window

brnkrygs

See all presentation from brnkrygs

AngularJS – Why Angular: #1

1 0

presentation-hope-angular

Presentation for Hope College CS students on AngularJS.

On Github brnkrygs / presentation-hope-angular

AngularJS

Created by Brian Krygsman

Image: http://www.bennadel.com/blog/2439-My-Experience-With-AngularJS-The-Super-heroic-JavaScript-MVW-Framework.htm

About Me

@brnkrygs
"Currently up to my eyeballs in Angular"
  • Application Development Consultant at Open Systems Technologies (OST)
  • Developer on the web since 2000

Javascript's Role

On the Web

All browsers

Elsewhere!

Server: NodeJS

Embedded: Playstation

Mobile: Phonegap

The "assembly language" of the web?

3rd highest language tag on stackoverflow.com

Where do Frameworks Fit?

The foundation your code plugs in to.

Prescriptive

The chaos of Javascript's Frameworks

Smashing Magazine reviewed common JS frameworks in 2012.

~35 frameworks/libs were compared

The same folks built TodoMVC

~65 frameworks/libs compared today

Why Angular: #1

Common MV* structure

  • Models
  • Views
  • ...Controllers/Services/Factories/Providers/Filters
I hereby declare AngularJS to be MVW framework - Model-View-Whatever. Where Whatever stands for "whatever works for you". - Igor Minar (lead dev of AngularJS)

Why Angular: #2

Delarative Data Binding

<input ng-model="user.name">
<p>My name is {{ user.name }}.</p>

Turns into:

My name is Bria.

Why Angular: #3

POJOs for models

AngularJS

$scope.person = { firstName: 'Brian' };

EmberJS

App.Person = DS.Model.extend({ firstName: DS.attr() });

Backbone

Person = Backbone.Model.extend({});
var person = new Person({ firstName: 'Brian' });

Why Angular: #4

Dependency injection

app.controller('todoCtrl', ['$rootScope', '$scope', 'TodoFactory', 
    function( $rootScope, $scope, todoFactory ){
        // in here I can call methods on all the objects I injected
        // ...
        $scope.todos = todoFactory.get();
    }]
);

Why Angular: #5

Testability

Because of DI, we control the execution environment.

Better control === better testing

The Angular Sweet Spot

Dynamic view data Clientside-heavy logic Isolated functional components Favour plain JS objects over subclassing Backed by REST

Where Angular falls down

Old browser support Non-JS support Static websites SEO Massive amounts of nested scopes Documentation lacks intent - steep learning curve

Parts of an AngularJS app

You'll see these shortly...

Controller: the "glue"

View: the UI

Service: the logic, A.K.A. the factory

Filter: the manipulator

Directive: the component

The digest cycle: the machinery

DEMO TIME

Worksheets

Thanks!

Dr. McFall has further contact info if you'd like to chat.