AngularJS

Submitted by davide.pilisi on Thu, 09/04/2014 - 19:52

Si inizia con due semplici passi:

1. Caricare la libreria ( che più che una libreria è un vero e proprio framework MVC per il frontend ) angularjs.js

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>

Caricare lo script dalla CDN di google, ha diversi vantaggi: oltre a non dover scaricare una copia del file per ogni APP che realizziamo, i server di Google sono veloci, e lo script è salvato in cache dai browser: per cui, se lo user interagisce con diverse APP che usano lo script, il suo browser non dovrà scaricarlo più volte.

2. Dire ad Angular, tramite la direttiva ng-app, che parte del DOM deve gestire: se si stà realizzando un intera APP in angular, la parte gestita è l'intero tag html, ossia l'intero DOM della pagina

<html  ng-app="myApp">

...ma in caso si voglia usare angular solo per gestire delle parti della pagina ( angular era nato per gestire gli spazi pubblicitari all'interno di portali ) perchè altre tecnologie si aspettano di manipolare il DOM ( ad esempio JAVA o RAILS ) oppure si volesse iniziare ad integrare angular in un applicazione esistente( per gestirne le parti che più necessitano di 'reatiività' x esempio) , si può attivare su uno specicfico tag:

<html>
	<div ng-app> 
	...
	</div>
</html>

Per poter sfruttare al meglio le potenzialità di un framework come angular, che supporta il design di programmazione MVC ( Model View Controller )

Un modello contenente i dati
La vista che rappresenta / mostra all'utente
Un controller che gestisce le relazioni tra il modello di dati e la sua rappresentazione.

Potete creare il vostro modello utilizzando gli attributi degli oggetti o anche solo dei tipi primitivi contenenti i vostri dati. Niente di speciale al riguardo, se volete mostrare del testo all'utente potreste avere una stringa tipo:

var stringaTesto = 'lorem ipsum';

Creerete le vostre viste scrivendo un template HTML inserendoci i dati derivati dal modello: ad esempio, inserendo un placeholder nel DOM:

<body ng-controller="TextController">
   <p>{{stringaTesto}}</p>
</body>

Le doppie parentesi graffe sono il modo in cui si inseriscono le interpolazioni tra i modelli e le viste all'interno di un template.

I controller invece sono classi scritte per dire ad Angular quali oggetti o primitive compongono il modello, assegnando loro l'oggetto $scope passato nel vostro controller:

function TextController($scope) {
   $scope.stringaTesto = stringaTesto; 
}

Invece di una semplice primitiva, potreste creare un oggetto che contenga i vostri dati:

var messaggi = {};
messaggi.stringaTesto = 'lorem ipsum';

function TextController($scope) {
    $scope.messaggi= messaggi;
}

Anche se questo va bene per l'esempio, il modo migliore di procedere è fare in modo che il controller sia parte di un modulo, che preveda un "namespace" per le parti correlate della vostra applicazione

<html ng-app='myApp'>
<body ng-controller='textController'>
    <p>{{stringaTesto.message}}</p>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script>
    var myAppModule = angular.module('myApp' , []);

    myAppModule.controller('textController',
    function($scope) {
       var stringaTesto = {};
       stringaTesto.message = 'lorem ipsum';
       $scope.stringaTesto = stringaTesto;
  });
</script>
</body>
</html>

drupal security adv