ANGULAR LA PRIMA APP



AngularJS e’ un framework client side, dove le risorse vengono caricate dinamicamente. AngularJS potenzia html fornendo, attraverso le direttive, gli strumenti per creare una applicazione.
In altre parole:

Angular e’ quello che HTML avrebbe dovuto essere, se fosse stato progettato per sviluppare applicazioni.

Non e’ una semplice libreria di JavaScript, ma un framework che fornisce gli strumenti per creare.

Un’applicazione Single Page, dove le risorse e i dati vengono utilizzati senza caricare l’intera pagina, come farebbe ad esempio php, ma dinamicamente su richiesta .


La prima App

L’esempio che puo’ essere scaricato utilizza 2 framework


L’applicazione creata calcola un nuovo prezzo dopo la definizione di uno sconto.
Per utilizzarli, dopo averli scaricati vengono inseriti nel sito attraverso le seguenti istruzioni:

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

<script src="angular/angular.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script>

Il vantaggio di bootstrap e’ quello di rendere la APP responsive e utilizzare le classi dedicate.


Il vantaggio di bootstrap e’ quello di rendere la APP responsive e le utilizzare le
classi dedicate :

  • Container,
  • Jumbotron
  • page-header

Angular permette di creare un’applicazione single page, le direttive utilizzate sono :

  • ng-app="calcolo". Permette di definire il campo di applicazione di Angular, in questo esempio , Angular sara’ utilizzato in body , attraverso l’’istruzione (all’interno di script)
    var app=angular.module("calcolo",[ ]);
  • ng-controller="percentuale". Il controller definisce l’area di utilizzo delle variabili e le regole . Cioe’ :

      app.controller("percentuale", function($scope)
      {
      $scope.prezzo="prezzo";
      $scope.sconto="sconto";
      $scope.nprezzo="(prezzo*sconto)/100"
      }

Notare $scope usato nella definizione delle variabili.


Definite le variabili e l’area di applicazione di Angular, vengono poi utilizzate nel body per il calcolo del nuovo prezzo in base ad una % di sconto .
La direttiva ng-model="prezzo" oppure ng-model="sconto" utilizzata nel tag html:input, serve per catturare il valore che viene scritto nel form dall’utente .

Il nuovo prezzo viene calcolato attraverso la formula :


{{(prezzo*sconto)/100||nprezzo}}


Da notare l’’espressione ||nprezzo attraverso cui viene mostrato un valore iniziale.
Inizializza cioe’ il valore dei 2 form che servono per inserire prezzo e sconto.

Il risultato del prezzo scontato e’ definito nel controller ed e’ la stringa : (prezzo*sconto)/100