LEARN ALCACOOP ANGULARJS 101

AngularJS 101

Intro to the Web, the WebApps and AngularJS

Roma @ IED
17 e 24 Aprile 2015

This work is licensed under a

Creative Commons by-nc-sa 4.0 International License
by ALCA Società Cooperativa

AngularJS Basics

Template

i template AngularJS si mescolano alla pagina HTML, sfruttando la tolleranza dei browser web circa attributi e tag sconosciuti

<body ng-app>
  <h1>{{ "Hello AngularJS" }}</h1>
</body>

AngularJS: Espressioni e One-Way Binding

Durante il processo di compilazione, l'AngularJS $compile passa attraverso l'$interpolate Service tutti gli attributi e i nodi testo per completare le eventuali espressioni contenute:

<h1>Hello {{ name }}!</h1>

Le espressioni verranno aggiunte alla lista di watch e verranno aggiornate nei cicli di re-rendering (se sono stati segnalati degli aggiornamenti)

AngularJS: Direttive

ng-app / ng-if / ng-show / ng-repeat ... nel gergo AngularJS sono dette direttive.

Le direttive sono dei componenti Angular che consentono di creare nuovi elementi ed attributi riutilizzabili.

a seconda della particolare definizione utilizzata, la direttiva potra' essere utilizzata attraverso 4 sintassi: come tag, attributo, classe o commento:

<span ng-bind="exp"></span>
<ng-bind></ng-bind>
<span class="ng-bind: exp;"></span>
<!-- directive: ng-bind exp -->

AngularJS Module

Le applicazioni AngularJS sono composte da moduli, ogni modulo potra' a sua volta dipendere da altri moduli:

(function () {
  var app = angular.module("module-name",
            ["module-dep1", "module-dep2"]);
  ...
})();

AngularJS attivera' il modulo dopo essersi assicurato che i moduli da cui dipende sono stati definiti.

AngularJS Controller

I controller sono funzioni costruttore che controlla lo scope associato al DOM a cui e' stato agganciato mediante la direttiva ng-controller.

I controller vengono dichiarati attraverso l'helper angular.Module.controller:

(function () {
  ...
  app.controller("MyController", function() {
    this.name = "AngularJS"
  });
})();

AngularJS Controllers & Scopes

AngularJS crea per i controller degli scope (ambiente, contesto) all'interno del quale poter definire degli attributi di cui effettuare il binding nei template.

E' possibile accedere allo scope di un controller richiedendone il passaggio nei parametri:

app.controller("MyController", function($scope) {
  $scope.isUserActive = true;
});

AngularJS Controller e ControllerAs

Le piu' recenti Best Practice per AngularJS prevedono l'assegnazione di un nome al controller:

<div ng-controller="MyController as my">
  {{ my.attr }}
</div>

e nel controller assegnare gli attributi di cui fare il binding a this:

app.controller("MyController", function($scope) {
  this.attr = "AngularJS Binding";
});

AngularJS Direttive: ng-src

La direttiva ng-src ha il solo scopo di evitare che il browser interpreti il parametro prima della risoluzione dell'eventuale espressione angular contenuta:

<img src="{{ imageUrl }}">

vs.

<img ng-src="{{ imageUrl }}">

AngularJS Examples

<!DOCTYPE html>
<html>
  <head>
    <script src="angular.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
  </body>
</html>

<body ng-app>
  <h1> Angular Template </h1>
  <ul>
    <li ng-show="true">visible item</li>
    <li ng-hide="true">hidden item</li>
    <li ng-if="false">excluded item</li>
  </ul>
</body>

- se non includiamo il tag script o il link e' erraro o per problemi di rete non e' possibile completare la richiesta con successo, il template non verra' "interpretato" e sara' quindi renderizzato dal browser come se fosse stato contenuto HTML semplice - se omettiamo ng-app (che nella terminologia di Angular e' detta direttiva) il contenuto HTML non verra' considerato da angular come parte del template da "renderizzare" - se una direttiva non esiste verra' ignorata (e questo vale anche per gli errori di sintassi: e.g. ng-hid anziche ng-hide)

<li>{{ "Hello" + "Angular" }}</li>
<li>{{ 10 + 20 | currency }}</li>
<li>{{ 10 + 20 | currency: "&euro;" }}</li>
<li>{{ "2015-04-17" | date }}</li>

<ul>
  <li ng-repeat="item in [1,2,3]">
    {{item}}
  </li>
</ul>

<ul>
  <li><input ng-model="name"></input></li>
  <li>My name is {{ name }}</li>
</ul>

<div ng-include="'first-template.html'"></div>
<div ng-include="'second-template.html'"></div>

EX02: AngularJS Module & Controller

<body ng-app="ex02">
  <div ng-controller="MyController as my">
    <h1>Hello {{ my.name }}!</h1>
  </div>
</body>

(function() {
  var app = angular.module("ex02", []);
  app.controller("MyController", MyController);

  function MyController() {
    this.name = "AngularJS"
  }
})();

- ng-app specifica quale modulo angular dovra' essere attivato dal template - ng-controller specifica quale controller dovra' controllare il frammento del template - l'espressione angular {{ name }} verra' sostituita con l'attributo name contenuto nello $scope (campo, spazio) che il controller si dovra' preoccupare di popolare - l'espressione angular {{ name }} e' in "binding" con l'attributo name: in altre parole quando l'attributo name cambiera', cambiera' anche il valore dell'espressione - angular.module dichiara un modulo con nome specificato nel primo parametro e dipendenze specificato in forma di array nel secondo parametro - angular.module ritornera' una variabile che contiene diversi funzioni di utilita' con le quali popolare il modulo - app.controller consente di associare un controller ad un nome di controller utilizzabile nell'attributo ng-controller - function MyController() {} e' la funzione costruttore del controller e verra' richiamata da angular ogni volta che verra' istanziato il controller - $scope rappresenta lo spazio di visibilita' del template - (function() {...})(); e' un pattern comune in javascript che consente di creare dei contesti anonimi in cui le variabili non sono visibili all'esterno della funzione.

<body ng-app="ex02">
  <div ng-controller="ProductController">
    <h1>{{ product.title }}</h1>
    <p>{{ product.description }}</p>
    <img ng-src="{{ product.image }}"></img>
    <dl>
      <dt>price</dt>
      <dd>{{ product.price }}</dd>
    </dl>
  </div>
</body>

(function() {
  ...
  function ProductController($scope) {
    $scope.product = {
      title: "AngularJS Intro",
      description: "Ebook description",
      image: "https://angularjs.org/img/AngularJS-large.png"
      price: 10.99
    }
  }
})();

Advanced JS Concepts for AngularJS

La tecnica consiste nell'utilizzare una funzione anonima come contesto in cui isolare le variabili e le funzioni private del modulo:

(function() {
  var privateVar = 5;
  function privateFn(a, b) {
    return a + b;
  }

  window.publicFn = function(b) {
    return privateFn(privateVar, b);
  }
})();

Javascript Functions: Closures

Quando dichiariamo una funzione in Javascript, il codice all'interno della funzione ha accesso alle variabili che erano accessibili nel contesto in cui e' stata definita, per questo motivo ogni funzione Javascript e' in realta una Closure:

(function startApp() {
  var appName = "MyApp";

  window.addEventListener("load", onLoad, false);

  function onLoad() {
    // appName e' stata catturata ed e'
    // raggiungibile dalla funzione onLoad
    alert("Hello from " + appName);
  }
})();

var doubledValues = [1,2,3].map(function (item) {
  return item * 2;  
})

window.addEventListener("resize", function() {

}, false);

function multiplier(a) {
  return function(b) {
    return a * b;
  };
}

var double = multiplier(2);
var doubledValues = [1,2,3].map(double);

AngularJS 101Intro to the Web, the WebApps and AngularJSRoma @ IED17 e 24 Aprile 2015This work is licensed under a Creative Commons by-nc-sa 4.0 International Licenseby ALCA Società Cooperativa