Guida per Principianti su AngularJS - Viste

Ciao a tutti, futuri programmatori! Oggi esploreremo il mondo emozionante delle Viste di AngularJS. Non preoccupatevi se non avete mai scritto una riga di codice prima - sarò il vostro guida amichevole in questo viaggio, proprio come ho fatto per innumerevoli studenti negli anni della mia insegnanza. Allora, prendete una tazza di caffè (o tè, se è la vostra cosa) e iniziamo!

AngularJS - Views

Cos'è una Vista in AngularJS?

Prima di addentrarci nei dettagli, capiremo cos'è una Vista in AngularJS. Pensa alle Viste come la "faccia" della tua applicazione - è ciò che l'utente vede e con cui interagisce. In AngularJS, le Viste sono essenzialmente template HTML che visualizzano dati e rispondono alle azioni dell'utente.

Ora, esploriamo gli strumenti che AngularJS ci offre per lavorare con le Viste.

La Direttiva ng-view: La Tua Finestra per i Contenuti Dinamici

Cos'è ng-view?

La direttiva ng-view è come una finestra speciale nella tua applicazione AngularJS. È dove la tua applicazione visualizza contenuti diversi in base alla rotta corrente (o URL) senza dover ricaricare l'intera pagina. Bel pezzo, vero?

Come Usare ng-view

Usare ng-view è semplice come aggiungerlo a un elemento nel tuo HTML. Ecco un esempio:

<div ng-view></div>

Questo è tutto! Questo div adesso funzionerà come contenitore dove AngularJS caricherà diverse viste in base alla rotta corrente.

Un Esempio Reale

Immaginiamo di costruire un sito web semplice per una libreria. Potremmo avere una pagina principale che looks così:

<!DOCTYPE html>
<html ng-app="bookstoreApp">
<head>
<title>La Mia Fantastica Libreria</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.js"></script>
</head>
<body>
<h1>Benvenuti nella Mia Fantastica Libreria</h1>
<div ng-view></div>
<script src="app.js"></script>
</body>
</html>

In questo esempio, il <div ng-view></div> sarà dove diverse pagine della nostra libreria (come l'elenco dei libri, i dettagli di un libro singolo, ecc.)将被显示。

La Direttiva ng-template: Il Tuo Schema per le Viste

Cos'è ng-template?

Se ng-view è la finestra, allora ng-template è come lo schema di ciò che va nella finestra. Permette di definire template riutilizzabili che AngularJS può usare per popolare le tue viste.

Come Usare ng-template

usi ng-template dandogli un ID, che puoi poi referenziare nella tua configurazione di routing. Ecco un esempio semplice:

<script type="text/ng-template" id="book-list.html">
<h2$I nostri libri</h2>
<ul>
<li ng-repeat="book in books">{{book.title}}</li>
</ul>
</script>

Questo template definisce una lista di libri che possiamo visualizzare nella nostra vista.

Il Servizio $routeProvider: Il Tuo Controllore del Traffico

Cos'è $routeProvider?

Il servizio $routeProvider è come un controllore del traffico per la tua applicazione. Decide quale vista visualizzare in base all'URL corrente.

Come Usare $routeProvider

Di solito configuri $routeProvider nella fase di configurazione della tua applicazione. Ecco un esempio:

var app = angular.module('bookstoreApp', ['ngRoute']);

app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: '<h2>Benvenuti nella nostra libreria!</h2>'
})
.when('/books', {
templateUrl: 'book-list.html',
controller: 'BookListController'
})
.otherwise({
redirectTo: '/'
});
});

In questa configurazione:

Quando l'URL è solo '/', visualizza un messaggio di benvenuto.
Quando l'URL è '/books', usa il template 'book-list.html' e il 'BookListController'.
Per qualsiasi altro URL, ridirige a '/'.

Un Esempio Completo

Mettiamo tutto insieme con un esempio più completo della nostra applicazione libreria:

<!DOCTYPE html>
<html ng-app="bookstoreApp">
<head>
<title>La Mia Fantastica Libreria</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.js"></script>
</head>
<body>
<h1>Benvenuti nella Mia Fantastica Libreria</h1>
<nav>
<a href="#!">Home</a>
<a href="#!books">Libri</a>
</nav>
<div ng-view></div>

<script type="text/ng-template" id="book-list.html">
<h2$I nostri libri</h2>
<ul>
<li ng-repeat="book in books">{{book.title}} di {{book.author}}</li>
</ul>
</script>

<script>
var app = angular.module('bookstoreApp', ['ngRoute']);

app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: '<h2>Benvenuti nella nostra libreria!</h2><p>Scoprite la nostra fantastica collezione di libri.</p>'
})
.when('/books', {
templateUrl: 'book-list.html',
controller: 'BookListController'
})
.otherwise({
redirectTo: '/'
});
});

app.controller('BookListController', function($scope) {
$scope.books = [
{title: 'To Kill a Mockingbird', author: 'Harper Lee'},
{title: '1984', author: 'George Orwell'},
{title: 'Gatsby il Magnifico', author: 'F. Scott Fitzgerald'}
];
});
</script>
</body>
</html>

Cosa Sta Succedendo Qui?

Abbiamo impostato una struttura HTML di base con link per navigare tra le viste.
Abbiamo definito un template per la nostra lista di libri usando ng-template.
Abbiamo configurato le nostre rotte usando $routeProvider.
Abbiamo creato un controller per fornire dati per la nostra lista di libri.

Quando esegui questa applicazione e clicchi sul link "Libri", vedrai un elenco di libri apparire nel ng-view div. Magia, vero?

Conclusione

Eccoci, ragazzi! Abbiamo fatto i nostri primi passi nel mondo delle Viste di AngularJS. Abbiamo imparato su ng-view, ng-template, e $routeProvider, e come lavorano insieme per creare applicazioni a pagina singola dinamiche.

Ricorda, imparare a codificare è come imparare a guidare una bicicletta - potrebbe sembrare instabile all'inizio, ma con pratica, diventerai un esperto in nessun tempo. Continua a sperimentare, continua a imparare e, surtout, divertiti!

Direttiva/Service	Scopo	Esempio di Utilizzo
ng-view	Definisce dove visualizzare la vista corrente	`<div ng-view></div>`
ng-template	Definisce template riutilizzabili	`<script type="text/ng-template" id="template-name.html">...</script>`
$routeProvider	Configura le rotte per l'applicazione	`$routeProvider.when('/path', { templateUrl: 'template.html', controller: 'ControllerName' });`

Buon codice, futuri maestri di AngularJS!

Credits: Image by storyset