AngularJS - Première Application

Bienvenue, aspirants programmeurs ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde d'AngularJS. En tant que votre enseignant informatique de quartier, je suis ravi de vous guider à travers votre première application AngularJS. Ne vous inquiétez pas si vous n'avez jamais écrit une ligne de code auparavant - nous allons avancer pas à pas, et avant que vous ne vous en rendiez compte, vous serez créer des applications web dynamiques comme un pro !

AngularJS - First Application

Création d'une Application AngularJS

Commençons par les bases. AngularJS est un puissant framework JavaScript qui nous aide à construire des applications web interactives. Pensez-y comme une boîte à outils magique qui rend nos pages web vivantes !

Pour créer notre première application AngularJS, nous avons besoin de configurer un simple fichier HTML. Voici à quoi il ressemble :

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Ma Première Application AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<h2>Bonjour, {{name}} !</h2>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'Débutant AngularJS';
});
</script>
</body>
</html>

Décomposons cela :

Nous commençons avec une structure HTML standard.
La directive ng-app="myApp" dans la balise <html> indique à AngularJS que c'est l'élément racine de notre application.
Nous incluons la bibliothèque AngularJS en utilisant une balise <script> dans la section <head>.
Dans le <body>, nous avons un <div> avec ng-controller="myCtrl". Cela connecte notre HTML à un contrôleur AngularJS.
À l'intérieur de ce <div>, nous avons {{name}}. C'est une expression AngularJS qui affichera la valeur de name.
Enfin, nous avons une balise <script> où nous définissons notre module et notre contrôleur.

Exécution de l'Application AngularJS

Maintenant que nous avons créé notre application, voyons comment l'exécuter :

Enregistrez le code ci-dessus dans un fichier nommé index.html.
Ouvrez ce fichier dans un navigateur web (comme Chrome ou Firefox).

C'est tout ! Votre application AngularJS est maintenant en cours d'exécution. N'est-ce pas plus simple que vous ne le pensiez ?

Output

Lorsque vous ouvrez le fichier index.html dans votre navigateur, vous devriez voir :

Bonjour, Débutant AngularJS !

De la magie, n'est-ce pas ? Mais comment cela fonctionne-t-il ? Plongeons plus profondément !

Comment AngularJS S'intègre avec HTML

AngularJS s'intègre parfaitement avec HTML par le biais de ce que nous appelons des "directives". Ce sont des attributs spéciaux qui indiquent à AngularJS de faire quelque chose avec un élément DOM. Jetons un œil aux principales directives que nous avons utilisées :

Directive	Objectif
ng-app	Définit l'élément racine d'une application AngularJS
ng-controller	Spécifie quel contrôleur utiliser pour l'élément HTML
{{ }}	Affiche la valeur d'une expression

Voici une explication plus détaillée :

ng-app : Cette directive initialise une application AngularJS. Elle indique à AngularJS de prendre le contrôle de cette partie de la page. Dans notre exemple, nous l'avons placée sur la balise <html>, rendant notre page entière une application AngularJS.
ng-controller : Cette directive spécifie une classe de contrôleur JavaScript. Le contrôleur est où nous définissons le comportement de l'application en définissant des fonctions et des valeurs. Dans notre exemple, myCtrl est notre contrôleur.
{{ }} : Ces doubles accolades sont des expressions AngularJS. Elles indiquent à AngularJS d'évaluer l'expression à l'intérieur et de la remplacer par le résultat. Dans notre cas, {{name}} est remplacé par "Débutant AngularJS".

Maintenant, regardons notre code JavaScript :

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'Débutant AngularJS';
});

angular.module('myApp', []) crée un nouveau module AngularJS nommé 'myApp'. Cela correspond au nom que nous avons utilisé dans ng-app="myApp".
app.controller('myCtrl', function($scope) { ... }) définit notre contrôleur. Le $scope est un objet spécial qui agit comme un pont entre le contrôleur et la vue (notre HTML).
$scope.name = 'Débutant AngularJS' définit une propriété sur le $scope. C'est ce qui nous permet d'utiliser {{name}} dans notre HTML.

Et voilà ! Vous avez juste créé et compris votre première application AngularJS. N'est-ce pas excitant ?

Souvenez-vous, apprendre à coder est comme apprendre une nouvelle langue. Cela peut sembler déroutant au début, mais avec la pratique, cela devient second nature. Lorsque j'ai commencé à enseigner AngularJS, j'avais un élève qui était tellement confus par tous les accolades qu'il a commencé à appeler cela le "langage moustache" ! Mais à la fin du cours, il créait des applications complexes et riait de sa confusion initiale.

Alors, ne vous inquiétez pas si tout ne devient pas clair immédiatement. Continuez à pratiquer, essayez de modifier le code (que se passe-t-il si vous changez 'Débutant AngularJS' pour votre propre nom ?), et surtout, amusez-vous ! Dans notre prochain cours, nous explorerons plus de fonctionnalités AngularJS et commencerons à construire des applications plus complexes. Jusque-là, bon codage !

Credits: Image by storyset

Tutoriel précédent:

AngularJS - Architecture MVC

Tutoriel suivant:

AngularJS - Directives