• MVW framework (W => whatever)
• Pure JavaScript
• Open source
• Can be used to implement Single-Page applications (SPA)

<form ng-app
      ng-controller="HelloCtrl as helloCtrl"
      ng-submit="helloCtrl.greet()">
  <label for="name">Name</label>
  <input type="text" id="name" ng-model="helloCtrl.name">
  <button type="submit">Greet</button>
</form>

function HelloCtrl() {
  this.name = 'Tom Mason';

  this.greet = function() {
    alert('Hello ' + this.name);
  };
}

Data binding

<input type="text" ng-model="helloCtrl.name">

Directives

<form ng-submit="helloCtrl.greet()">

Dependency injection

function HelloCtrl($scope, WelcomingService) {}

Source: Google I/O 2013 - Design Decision in AngularJS

Network

• Modules declaratively specify how an app is bootstrapped.
• "Bootstrapped" means "initialized, configured and kickstarted".
• To auto-bootstrap an app we use the ngApp directive:

<ANY ng-app="MovieDatabase">
// ...
</ANY>

• You can specify a module to be used as the root module for the application.
• Only one application can be auto-bootstrapped per HTML document.
• Applications cannot be nested within each other.

• A module is a collection of configuration and run blocks:

angular.module('MovieDatabase', [])
  .config(function() {
    // is executed during the provider registration and configuration phase.
  })
  .run(function() {
    // is executed after the injector is created
    // and is used to kickstart the application.
  });

• These blocks are applied to the application during the bootstrap process.

• You can retrieve an existing module using the same method with only one parameter.

var movieDatabase = angular.module('MovieDatabase');

• Multiple modules come in handy when developing large applications.
• Application structure is possible in various ways.
• It is quite common for mid-sized apps to use the following modules:

angular.module('MovieDatabase.services', []);     // A service module
angular.module('MovieDatabase.directives', []);   // A directive module
angular.module('MovieDatabase.filters', []);      // A filter module
angular.module('MovieDatabase.controllers', []);  // A controller module
angular.module('MovieDatabase',
               ['MovieDatabase.controllers', 'MovieDatabase.filters' /*  ... */]);

• Data-binding is the automatic synchronization of data between the model and view components.
• In classic web frameworks...
  • Controller combine models and templates to build views (HTML).
  • Views are mostly transferred via HTTP and rendered in web browsers.
  • Unfortunately they only reflect the application's state at a specific point in time.

Source: Official AngularJS Guide

• AngularJS takes a different approach:
  • It compiles templates to views and interpolates dynamic sections.
  • Models and views stay synchronized using dirty-checking.
  • The approach is significantly simpler and more efficient than traditional DOM manipulation and observability techniques.

Source: Official AngularJS Guide

• Dynamic sections (expressions) are defined using double curlies:

<input ng-model="person.name" type="text" />
Hello {{ person.name }}

Hello, {{ person.name }}!


• Data binding is bi-directional, meaning:
  • when the view changes, the model observes the change through dirty-checking,
  • when the model changes the value, the view will be updated with the changed value.
• It is preferrable to use ngBind when a template is momentarily displayed by the browser in its raw state before Angular compiles it.

• Filter provide means to format data.
• Filters are invoked in expressions with the | (pipe) character

{{ person.name | uppercase }}

• Angular gives us several built-in filters...

{{ 123.456789 | number:2 }}
{{ 123 | currency }}
{{ today | date:'medium' }}
{{ ['Ari', 'Lerner', 'Likes', 'To', 'Eat', 'Pizza'] | filter:'e' }}
{{ 'San Francisco' | limitTo:3 }}

• ...as well as a way to create our own:

var module = angular.module('MovieDatabase', []);
module.filter('myFilter', function() {
    return function(input) {
      /* transform input to output */
      return output;
    }
});