AngularJS - Application Intégrée

Introduction

Salut là, futurs maîtres d'AngularJS ! Je suis ravi de vous guider dans cette excitante aventure vers le monde des applications AngularJS intégrées. En tant que quelqu'un qui enseigne la programmation depuis bien trop d'années (disons simplement que je me souviens quand les disquettes étaient vraiment flexibles), je peux vous assurer que d'ici la fin de ce tutoriel, vous serez en mesure de créer votre première application AngularJS intégrée avec confiance.

AngularJS - In-line Application

Qu'est-ce Qu'une Application Intégrée ?

Avant de plonger dans le code, comprenons ce que nous entendons par "application intégrée". Imaginez que vous êtes à un buffet (restez avec moi, je promets que cette analogie aura un sens). Une application intégrée, c'est comme avoir tous vos plats préférés sur un seul plat - tout ce dont vous avez besoin est là, prêt à être utilisé. En termes d'AngularJS, cela signifie que nous allons écrire notre application entière dans un seul fichier HTML. Pas de fichiers JavaScript séparés, pas de modules externes - juste de la pure merveille AngularJS.

Créer Votre Première Application Intégrée

Étape 1 : Le squelette HTML

Commençons par les bases de notre fichier HTML :

<!DOCTYPE html>
<html>
<head>
<title.Ma Première Application Intégrée AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

</body>
</html>

Cela pourrait vous sembler familier si vous avez déjà fait du développement web. Si ce n'est pas le cas, ne vous inquiétez pas ! Nous simplement mettons en place un document HTML de base et incluons la bibliothèque AngularJS à partir d'un Réseau de Distribution de Contenu (CDN). Pensez-y comme inviter AngularJS à notre fête de codage.

Étape 2 : Ajouter la Directive ng-app

Maintenant, disons à AngularJS où se trouve notre application :

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title.Ma Première Application Intégrée AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

</body>
</html>

Nous avons ajouté ng-app="myApp" à la balise <html>. C'est comme mettre une grande pancarte sur votre maison disant : "AngularJS vit ici !" La partie myApp est le nom que nous donnons à notre application.

Créer Votre Premier Contrôleur

Qu'est-ce Qu'un Contrôleur ?

Dans AngularJS, un contrôleur est comme le cerveau de votre application. Il gère les données et le comportement d'une partie spécifique de votre application. Créons-en un !

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title.Ma Première Application Intégrée AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{salutation}}</h1>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.salutation = "Bonjour, Monde AngularJS !";
});
</script>
</body>
</html>

Décomposons cela :

Nous avons ajouté ng-controller="MainController" à la balise <body>. Cela dit à AngularJS quelle partie de notre HTML est contrôlée par ce contrôleur.
À l'intérieur des balises <script>, nous créons notre module d'application avec angular.module('myApp', []).
Nous définissons notre contrôleur en utilisant app.controller(). Le paramètre $scope est comment nous passons des données entre le contrôleur et la vue (notre HTML).
Nous définissons une propriété salutation sur $scope. Cela la rend disponible dans notre HTML.
Dans l'HTML, nous utilisons {{salutation}} pour afficher la valeur de salutation.

Ajouter de l'Interaction Utilisateur

Faisons notre application un peu plus interactive en ajoutant un bouton qui change la salutation :

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title.Ma Première Application Intégrée AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{salutation}}</h1>
<button ng-click="changerSalutation()">Changer la Salutation</button>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.salutation = "Bonjour, Monde AngularJS !";
$scope.changerSalutation = function() {
$scope.salutation = "Salutations, Terrien !";
};
});
</script>
</body>
</html>

Voici ce qui est nouveau :

Nous avons ajouté un bouton avec la directive ng-click. Cela dit à AngularJS d'appeler la fonction changerSalutation() lorsque le bouton est cliqué.
Dans notre contrôleur, nous avons défini la fonction changerSalutation() sur $scope. Cette fonction change la valeur de salutation.

Liaison de Données en Action

L'une des fonctionnalités les plus puissantes d'AngularJS est la liaison de données bidirectionnelle. Voyons-la en action :

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title.Ma Première Application Intégrée AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{salutation}}</h1>
<input type="text" ng-model="nom">
<p>Bonjour, {{nom}} !</p>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.salutation = "Bienvenue dans notre Application AngularJS !";
$scope.nom = "Anonyme";
});
</script>
</body>
</html>

Dans cet exemple :

Nous avons ajouté un champ d'entrée avec ng-model="nom". Cela lie la valeur de l'entrée à la propriété nom sur notre $scope.
Nous affichons la valeur de nom en utilisant {{nom}} dans notre paragraphe.
Lorsque vous tapez dans le champ d'entrée, vous verrez la salutation se mettre à jour en temps réel. C'est la magie de la liaison de données bidirectionnelle !

Conclusion

Félicitations ! Vous avez刚刚 created votre première application AngularJS intégrée. Nous avons couvert les bases de la configuration d'une application AngularJS, de la création d'un contrôleur, de la gestion des interactions utilisateur et de la mise en œuvre de la liaison de données bidirectionnelle. Souvenez-vous, comme pour toute nouvelle compétence, maîtriser AngularJS nécessite de la pratique. Alors n'ayez pas peur d'expérimenter, de casser des choses et d'apprendre de vos erreurs. C'est ainsi que nous sommes tous devenus les développeurs que nous sommes aujourd'hui !

Voici un tableau récapitulatif des directives AngularJS clés que nous avons utilisées :

Directive	Objectif
ng-app	Définit et initialise une application AngularJS
ng-controller	Spécifie un contrôleur pour une section de votre application
ng-click	Spécifie une fonction à exécuter lorsque l'élément est cliqué
ng-model	Lie un champ d'entrée, une sélection ou un champ de texte à une propriété sur le scope

Continuez à coder, continuez à apprendre, et surtout, amusez-vous ! Souvenez-vous, chaque expert a déjà été un débutant. Votre voyage AngularJS vient de commencer !

Credits: Image by storyset

Tutoriel précédent:

AngularJS - Téléversement de fichier

Tutoriel suivant:

AngularJS - Menu de navigation