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!

 

Made with Slides.com