AngularJS

Intro

• Structural framework for dynamic web apps
• Use HTML as template language
• Allows to extend HTML's syntax
• Brings data binding and dependency injection
  • Eliminates boilerplate code
• All client side, runs in browser

Intro #2

• HTML is designed for static documents
• Angular enhances HTML to build apps
• Static documents - dynamic apps problem is solved via
  • library: jQuery
    • collection of useful functions
  • framework:
    • implementation of a web app
    • developer fills in the details
    • framework is in charge and calls into the code when necessary
    •  durandal, ember, etc.

Intro #3

• Angular takes another approach
• Extends HTML, adds new syntax via directives
• Features
  • Data binding, {{ }}
  • DOM control structures (ng-if, ng-show)
  • Form, form validation
  • Grouping of HTML into reuseable components

Client-Side Solution

• Angular handles the whole DOM and AJAX glue
• Puts everything in well defined structure
• Brings tools to build CRUD apps
  • data binding
  • templating directives
  • form validation
  • routing
  • deep-linking
  • reuseable components
  • dependency injection
• Testability

Angular Use Cases

• Angular brings an higher level of abstraction
  • Comes at the cost of flexibility
• Not every app perfect match for Angular
• Angular mostly used to build CRUD apps
• Apps with intensive and tricky DOM manipulation
  • E.g. Games, GUI editors, etc.
  • Use lower level library (jQuery)

Ideas

• Decouple DOM manipulation from app logic (improves testability)
• Writing tests, as important as writing apps
• Decouple client-side app from server-side (REST API)
• Registering callbacks
  • Amout of callbacks are reduced
• DOM manipulation
  • Use declarative notions to describe DOM
  • No low-level DOM handling
• Marshalling data to and from the UI
  • Mostly eliminated

Concepts

• Template: HTML with additional markup
• Directives: extend HTML with custom attributes and elements
• Model: data shown to the user in the view
• Scope: central context where model is stored
• Expressions: access variables and functions from scope
• Compiler: parses template and instantiates directives and expressions
• Filter: formats value of an expression
• View: what the user sees (DOM)
• Data binding: sync data between model and view
• Controller: logic behind views
• DI: creates and wires objects and functions
• Injector: DI container
• Module: container for different parts of the app
• Service: reusable logic, independant of views

First Example

<div ng-app ng-init="qty=1;cost=2">
  <b>Invoice:</b>
  <div>
    Quantity: <input type="number" min="0" ng-model="qty">
  </div>
  <div>
    Costs: <input type="number" min="0" ng-model="cost">
  </div>
  <div>
    <b>Total:</b> {{qty * cost | currency}}
  </div>
</div>

https://code.angularjs.org/1.3.6/docs/guide/concepts

First Example #2

• Template is parsed and processed by Angular compiler
• Loaded transformed and rendered DOM is called view
• Enhanced markup: directives
  • apply special behavior to attributes or elements
• ng-app attribute is used to automatically initialize app
• ng-model directive stores/updates the value of the input field into/from a variable
• Directives: only place where the DOM should be accessed

First Example #3

• Enhanced markup: expressions
  • {{ expression | filter }}
• Compiler will replace it with the evaluated value of the markup
• Expression in a template is a JavaScript like code snippet
• Allows to read and write to variables
• Those variables live in a scope
• Scope variables ~ model
• Expression in this example also uses a filter
  • formats the value of an expression for display to the user
• Angular provides live bindings
  • Whenever values change, expression is reevaluated
  • Two-way data binding

Controllers

angular.module('invoice1', [])
.controller('InvoiceController', function() {
  this.qty = 1;
  this.cost = 2;
  this.inCurr = 'EUR';
  this.currencies = ['USD', 'EUR', 'CNY'];
  this.usdToForeignRates = {
    USD: 1,
    EUR: 0.74,
    CNY: 6.09
  };

  this.total = function total(outCurr) {
    return this.convertCurrency(this.qty * this.cost, this.inCurr, outCurr);
  };
  this.convertCurrency = function convertCurrency(amount, inCurr, outCurr) {
    return amount * this.usdToForeignRates[outCurr] / this.usdToForeignRates[inCurr];
  };
  this.pay = function pay() {
    window.alert("Thanks!");
  };
});

• Add logic
• https://code.angularjs.org/1.3.6/docs/guide/concepts

Services

angular.module('finance2', [])
.factory('currencyConverter', function() {
  var currencies = ['USD', 'EUR', 'CNY'];
  var usdToForeignRates = {
    USD: 1,
    EUR: 0.74,
    CNY: 6.09
  };
  var convert = function (amount, inCurr, outCurr) {
    return amount * usdToForeignRates[outCurr] / usdToForeignRates[inCurr];
  };

  return {
    currencies: currencies,
    convert: convert
  };
});

• View independent logic
• https://code.angularjs.org/1.3.6/docs/guide/concepts

Server Calls

• https://code.angularjs.org/1.3.6/docs/guide/concepts

References

https://code.angularjs.org/1.3.6/docs/guide/introduction

Thank you for your attention!