Angular data-binding

 javascript  No Responses »
Feb 152013
 

anguar.js implementa il data-binding in modo automatico,  cioè è  un sistema di aggiornamento della vista ogni volta che il modello cambia, così come l’aggiornamento del modello ogni volta che la vista cambia. Ciò è molto comodo perché elimina la manipolazione DOM dall’elenco delle cose che dobbiamo fare.

Un esempio è dato dal binding che possiamo creare tra un campo di input testuale e un tag h1 dove visualizzeremo il contenuto:


<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
</head>
<body>
<div>
<label>Nome:</label>
<input type="text" ng-model="tuoNome" placeholder="Inserisci il tuo nome qui">
<hr>
<h1>Ciao {{tuoNome}}!</h1>
</div>
</body>
</html>

L’esempio

 Share

Angular.js: reperire json via ajax

 javascript  No Responses »
Jan 272013
 

Proviamo a completare il mini ciclo iniziato nei post precedenti rendendo oggettivamente operativo il nostro angular.js ovvero recuperando i dati in formato json da una pagina php

La chiamata ha una struttura essenziale, useremo il metodo get passando la url della pagina che ci manderà il JSON e gestiremo con success la risposta assegnandola direttamente allo $scope:

function UtenteListCtrl($scope, $http) {
$http.get('php-to-json-01.php').success(function(data) {
$scope.utenti = data;
});
$scope.orderProp = 'id';
}

L’ultima istruzione serve per ordinare i dati.

Il resto della pagina è in linea con i post precedenti, solo gli accorgimenti del caso

<body ng-controller="UtenteListCtrl">
Cerca: <input ng-model="query">
<ul>
<li ng-repeat="utente in utenti | filter:query">
<span>{{utente.myid}}</span>
<span>{{utente.mynome}}</span>
<span>{{utente.mycognome}}</span>
</li>
</ul>
</body>

L’esempio

 Share

Angular.js: ordinare e filtrare dei dati

 javascript  No Responses »
Jan 252013
 

Prendendo spunto dal post precedente vediamo come filtrare “al volo” dei dati e presentarli ordinati:

Lo schema sarà identico al tutorial del post precedente ma con delle interssanti varianti:

come prima cosa portiamo il controller direttamente sulla lista:


<ul ng-controller="BrowserListCtrl">

successivamente prepariamo un campo di input per filtrare i dati


Cerca: <input ng-model="query">

con l’ng-model per implementare il binding dei dati

e infine


<li ng-repeat="borwser in borwsers | filter:query | orderBy:'nome'">

dove nell’istruzione per ripetere tante liste quanti sono i nostri elemnti nel JSON agganciamo, separandoli con il pipe, ance il filtro e la clausola di ordinamento

L’esempio

 Share

Angular.js: come iniziare

 javascript  No Responses »
Jan 232013
 

Angular.js è un framework javascript patrocinato da Google e basato sul modello MVC: Vediamo come funziona partendo dall’intestazione del nostro file html:


<!DOCTYPE HTML>
<html ng-app>
<head>
<meta charset="utf-8">
<title>Angular js</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script>
...
</script>
</head>

Ci sono due cose da notare subito: la prima è il collegamento alla libreria, ma questo è scontato, ma soprattutto la direttiva ng-app che indica la root della pagina alla quale applicare il parsing del nostro framework

Il passaggio successivo è quello di preparare una fonte di dati che verranno utilizzati nella nosta pagina:


function BrowserListCtrl($scope) {
$scope.borwsers = [
{"id": "1", "nome": "Chrome"},
{"id": "2", "nome": "Firefox"},
{"id": "3", "nome": "Safari"},
{"id": "4", "nome": "Internet explorer"},
{"id": "5", "nome": "Opera"}
];
}

Questo sarà il nostro controller che contiene l’array di dati in formato JSON

Passaggio successivo sarà associare alla nostra pagina il controller


<body ng-controller="BrowserListCtrl">

e infine preparare la view, con una sintassi un po’ criptica ma decisamente economica:

<ul>
<li ng-repeat=”borwser in borwsers”>
<span>{{borwser.id}}</span>
<span>{{borwser.nome}}</span>
</li>
</ul>

L’esempio completo

Angular js Share