Angular

The superheroic Javascript framework.

HTML enhanced for web apps!

Origin

  • Started in 2009 by Miško Hevery
  • Googlefeedback: from 6 months x 3 devs (17kLoc - GWT) -> 3 weeks (1,5kLoc)
  • 36k⋆ on github, 6.6k commits, ~1.2k contributors
  • 14(?) core members

Key Feautures

  • 2way binding
  • Templates
  • MVC
  • DI
  • Directives

2way binding

JS Bin

Templates

JS Bin

MVC

  • Model – POJO/resource disclosed via $scope.
  • View – HTML that exists after ng compiled & binded stuff.
  • Controllers – setting of initial state of $scope & methods to control behaviour.

MVW

MVW

DI

JS Bin

Directives

ng-app, ng-controller, ng-model, input, a, ng-hide

JS Bin

ng-app

Your entry point

JS Bin

Module stuff

Module

angular.module('myModule', []).
  config(function(injectables) { // provider-injector
    // This is an example of config block.
    // You can have as many of these as you want.
    // You can only inject Providers (not instances)
    // into the config blocks.
  }).
  run(function(injectables) { // instance-injector
    // This is an example of a run block.
    // You can have as many of these as you want.
    // You can only inject instances (not Providers)
    // into the run blocks
  });
  angular.module('otherModule', ['myModule', 'ngRoute'])
  angular.module('myModule')
    .controller('extraStuff')

Startup

Concepts

Controllers

Define $scope for View. Or attach stuff to controllers & use them as ViewModel. JS Bin

They can be nested & inherit stuff but there's a trick.

JS Bin

Filters

Formatting the value of an expression for display to user Built-in: currency, date, filter, json, limitTo, lowercase, number, orderBy, uppercase JS Bin

Providers

  • value
  • constant
  • factory
  • service
  • provider JS Bin

Factory vs Service vs Providers

JS Bin

Providers conclusion

Custom Directives

Event-loop

Style guides:

Future:

Meta-sources:

Books:

Tutorial:

Understading event-loop:Make Your Own AngularJS