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




My name is {{ user.name }}.

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

  1. Dynamic view data
  2. Clientside-heavy logic
  3. Isolated functional components
  4. Favour plain JS objects over subclassing
  5. Backed by REST

Where Angular falls down

  1. Old browser support
  2. Non-JS support
  3. Static websites
  4. SEO
  5. Massive amounts of nested scopes
  6. 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.