AngularJS - Vue : Un guide pour les débutants
Salut à toi, futur(e) programmeur(euse) ! Aujourd'hui, nous allons plonger dans l'univers passionnant des vues (Views) d'AngularJS. Ne t'inquiète pas si tu n'as jamais écrit une ligne de code auparavant - je vais être ton guide amical tout au long de ce voyage, comme j'ai été pour des centaines d'étudiants au fil des ans. Alors, prends une tasse de café (ou de thé, si c'est ton truc), et c'est parti !
Qu'est-ce que les Views dans AngularJS ?
Avant de rentrer dans les détails, comprenons ce qu'est une View dans AngularJS. Penses aux Views comme la "figure" de ton application - c'est ce que l'utilisateur voit et avec quoi il interagit. Dans AngularJS, les Views sont essentiellement des templates HTML qui affichent des données et réagissent aux actions de l'utilisateur.
Maintenant, explorons les outils que AngularJS nous donne pour travailler avec les Views.
La directive ng-view : Ta fenêtre sur le contenu dynamique
Qu'est-ce que ng-view ?
La directive ng-view est comme une fenêtre spéciale dans ton application AngularJS. C'est là que ton application affiche un contenu différent en fonction de l'itinéraire actuel (ou de l'URL) sans avoir besoin de recharger toute la page. Génial, non ?
Comment utiliser ng-view
Utiliser ng-view est aussi simple qu'ajouter la directive à un élément dans ton HTML. Voici un exemple :
<div ng-view></div>C'est tout ! Cette div va maintenant agir comme un conteneur où AngularJS va charger des vues différentes en fonction de l'itinéraire actuel.
Un exemple concret
Disons que nous construisons un simple site web pour une librairie. Nous pourrions avoir une page d'accueil qui ressemble à ceci :
<!DOCTYPE html>
<html ng-app="bookstoreApp">
<head>
<title>Ma super librairie</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>Bienvenue dans ma super librairie</h1>
<div ng-view></div>
<script src="app.js"></script>
</body>
</html>Dans cet exemple, la balise <div ng-view></div> est l'endroit où différentes pages de notre librairie (comme la liste des livres, les détails d'un livre, etc.) seront affichées.
La directive ng-template : Ton plan pour les Views
Qu'est-ce que ng-template ?
Si ng-view est la fenêtre, alors ng-template est comme le plan de ce qui va dans cette fenêtre. Il te permet de définir des templates réutilisables que AngularJS peut utiliser pour peupler tes vues.
Comment utiliser ng-template
Tu utilises ng-template en lui giving un ID, que tu peux ensuite référencer dans ta configuration des itinéraires. Voici un exemple simple :
<script type="text/ng-template" id="book-list.html">
<h2>Nos Livres</h2>
<ul>
<li ng-repeat="book in books">{{book.title}}</li>
</ul>
</script>Ce template définit une liste de livres que nous pouvons afficher dans notre vue.
Le service $routeProvider : Ton régulateur de trafic
Qu'est-ce que $routeProvider ?
Le service $routeProvider est comme un régulateur de trafic pour ton application. Il décide quelle vue afficher en fonction de l'URL actuelle.
Comment utiliser $routeProvider
Tu configure habituellement $routeProvider dans la phase de configuration de ton application. Voici un exemple :
var app = angular.module('bookstoreApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: '<h2>Bienvenue dans notre librairie !</h2>'
})
.when('/books', {
templateUrl: 'book-list.html',
controller: 'BookListController'
})
.otherwise({
redirectTo: '/'
});
});Dans cette configuration :
- Quand l'URL est simplement '/', elle affiche un message de bienvenue.
- Quand l'URL est '/books', elle utilise le template 'book-list.html' et le 'BookListController'.
- Pour toute autre URL, elle redirige vers '/'.
Un exemple complet
Mettons tout cela ensemble avec un exemple plus complet de notre application de librairie :
<!DOCTYPE html>
<html ng-app="bookstoreApp">
<head>
<title>Ma super librairie</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>Bienvenue dans ma super librairie</h1>
<nav>
<a href="#!">Accueil</a>
<a href="#!books">Livres</a>
</nav>
<div ng-view></div>
<script type="text/ng-template" id="book-list.html">
<h2>Nos Livres</h2>
<ul>
<li ng-repeat="book in books">{{book.title}} par {{book.author}}</li>
</ul>
</script>
<script>
var app = angular.module('bookstoreApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: '<h2>Bienvenue dans notre librairie !</h2><p>Découvrez notre incroyable collection de livres.</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 le Magnifique', author: 'F. Scott Fitzgerald'}
];
});
</script>
</body>
</html>Qu'est-ce qui se passe ici ?
- Nous mettons en place une structure HTML de base avec des liens pour naviguer entre les vues.
- Nous définissons un template pour notre liste de livres en utilisant
ng-template. - Nous configurons nos itinéraires en utilisant
$routeProvider. - Nous créons un contrôleur pour fournir les données de notre liste de livres.
Lorsque tu exécutes cette application et que tu cliques sur le lien "Livres", tu vas voir une liste de livres apparaître dans le div ng-view. De la magie, n'est-ce pas ?
Conclusion
Et voilà, les amis ! Nous avons fait nos premiers pas dans le monde des vues d'AngularJS. Nous avons appris sur ng-view, ng-template, et $routeProvider, et comment ils travaillent ensemble pour créer des applications à page unique dynamiques.
Souviens-toi, apprendre à coder c'est comme apprendre à faire du vélo - cela peut sembler un peu instable au début, mais avec de la pratique, tu seras bientôt en train de rouler sans problème. Continue à expérimenter, continue à apprendre, et surtout, amuse-toi !
| Directive/Service | But | Exemple d'utilisation |
|---|---|---|
| ng-view | Définit où afficher la vue actuelle | <div ng-view></div> |
| ng-template | Définit des templates réutilisables | <script type="text/ng-template" id="template-name.html">...</script> |
| $routeProvider | Configure les itinéraires de l'application | $routeProvider.when('/path', { templateUrl: 'template.html', controller: 'ControllerName' }); |
Bonne programmation, futurs maîtres d'AngularJS !
Credits: Image by storyset