Français

Tutoriel AngularJS

Applications AngularJS

AngularJS - Application de Bloc-notes : Créer Votre Première Application Web

Bonjour, aspirants programmeurs ! Je suis ravi de vous guider à travers le voyage passionnant de la création de votre première application web en utilisant AngularJS. En tant que quelqu'un qui enseigne la programmation depuis plus d'une décennie, je peux vous assurer que d'ici la fin de ce tutoriel, vous aurez une application de bloc-notes fonctionnelle et une bonne compréhension des bases d'AngularJS. Alors, plongeons dedans !

AngularJS - Notepad Application

Qu'est-ce qu'AngularJS ?

Avant de commencer à coder, comprenons ce qu'est AngularJS. Imaginez que vous construisez une maison. AngularJS est comme le cadre qui fournit la structure et les outils pour rendre le processus de construction de votre maison plus facile et plus organisé. C'est un framework JavaScript qui nous aide à créer des applications web dynamiques avec moins d'efforts.

Configuration de Notre Environnement de Développement

Premiers pas, nous devons configurer notre espace de travail. Ne vous inquiétez pas ; c'est plus simple que de configurer un véritable établi !

  1. Ouvrez votre éditeur de texte préféré (je recommande Visual Studio Code pour les débutants).
  2. Créez un nouveau dossier appelé "AngularJS-Notepad".
  3. À l'intérieur de ce dossier, créez trois fichiers :
  • index.html
  • app.js
  • style.css

Création de la Structure HTML

Commençons par notre fichier index.html. C'est comme le plan de notre maison.

<!DOCTYPE html>
<html ng-app="notepadApp">
<head>
<title>AngularJS Notepad</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="NotepadController">
<h1>Mon Bloc-notes</h1>
<textarea ng-model="noteContent"></textarea>
<p>Nombre de caractères : {{noteContent.length}}</p>
</body>
</html>

Décomposons cela :

  • ng-app="notepadApp" : Cela indique à AngularJS que c'est la racine de notre application.
  • ng-controller="NotepadController" : Cela spécifie quel contrôleur devrait gérer cette partie de la page.
  • ng-model="noteContent" : Cela lie le textarea à une variable appelée noteContent dans notre contrôleur.
  • {{noteContent.length}} : C'est une expression qui affiche la longueur de notre note.

Styling Notre Application

Maintenant, ajoutons un peu de style pour rendre notre bloc-notes joli. Dans votre fichier style.css, ajoutez :

body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}

textarea {
width: 100%;
height: 200px;
margin-bottom: 10px;
}

h1 {
color: #333;
}

Ce CSS centrera notre contenu, choisira une belle police et stylera notre textarea et notre titre.

Création de l'Application AngularJS

Passons à la partie passionnante - faisons vivre notre bloc-notes avec AngularJS ! Dans votre fichier app.js :

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

app.controller('NotepadController', function($scope) {
$scope.noteContent = '';
});

Décomposons cela :

  1. Nous créons un module AngularJS nommé 'notepadApp'.
  2. Nous définissons un contrôleur nommé 'NotepadController'.
  3. À l'intérieur du contrôleur, nous initialisons noteContent comme une chaîne vide.

Ajout de Plus de Fonctionnalités

Maintenant que nous avons un bloc-notes de base, ajoutons quelques fonctionnalités pour le rendre utile !

1. Fonctionnalités de Sauvegarde et de Chargement

Ajoutons des boutons pour sauvegarder et charger nos notes. Mettez à jour votre HTML :

<body ng-controller="NotepadController">
<h1>Mon Bloc-notes</h1>
<textarea ng-model="noteContent"></textarea>
<p>Nombre de caractères : {{noteContent.length}}</p>
<button ng-click="saveNote()">Sauvegarder Note</button>
<button ng-click="loadNote()">Charger Note</button>
</body>

Et mettez à jour votre app.js :

app.controller('NotepadController', function($scope) {
$scope.noteContent = '';

$scope.saveNote = function() {
localStorage.setItem('savedNote', $scope.noteContent);
alert('Note sauvegardée !');
};

$scope.loadNote = function() {
$scope.noteContent = localStorage.getItem('savedNote') || '';
alert('Note chargée !');
};
});

Ici, nous utilisons localStorage pour sauvegarder et charger notre note. Pensez-y comme un petit carnet où votre navigateur peut écrire des informations pour les remember plus tard.

2. Fonctionnalité de Compte de Mots

Ajoutons une fonctionnalité de compteur de mots. Mettez à jour votre HTML :

<p>Nombre de caractères : {{noteContent.length}} | Nombre de mots : {{wordCount()}}</p>

Et ajoutez cette fonction à votre contrôleur dans app.js :

$scope.wordCount = function() {
return $scope.noteContent.split(/\s+/).filter(function(n) { return n != '' }).length;
};

Cette fonction split le contenu de la note par des espaces et compte les éléments non vides, nous donnant un compteur de mots.

Rassembler Tout

Voici un tableau résumant les principales directives et expressions AngularJS que nous avons utilisées :

Directive/Expression But
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
ng-model Lie la valeur des contrôles HTML aux données de l'application
ng-click Spécifie une expression AngularJS à évaluer lorsque un élément est cliqué
{{expression}} Affiche la valeur d'une expression

Félicitations ! Vous venez de construire votre première application AngularJS. Nous avons couvert les bases de la configuration d'une application AngularJS, l'utilisation de contrôleurs, le travail avec des modèles et même le stockage local des données.

souvenez-vous, apprendre à coder est comme apprendre une nouvelle langue. Cela nécessite de la pratique, de la patience et de la persévérance. Ne soyez pas découragé si quelque chose ne vous vient pas immédiatement - cela fait partie du processus d'apprentissage. Continuez à expérimenter avec votre application de bloc-notes, essayez d'ajouter de nouvelles fonctionnalités, et surtout, amusez-vous !

Dans mes années d'enseignement, j'ai vu des centaines d'étudiants passer de complets débutants à des développeurs compétents. Vous êtes maintenant sur ce même voyage passionnant. Continuez à coder, continuez à apprendre, et avant que vous ne vous en rendiez compte, vous serez capable de construire des applications web complexes avec facilité !

Credits: Image by storyset

Tutoriel précédent:
AngularJS - Application ToDo
Tutoriel suivant:
AngularJS - Application Bootstrap