Table des matières

Chapitre : Installation d'AngularJS

Introduction

Dans ce chapitre, nous allons voir comment installer AngularJS et configurer un environnement de base pour commencer à développer une application avec ce framework. AngularJS est conçu pour être intégré facilement dans un projet existant, et son installation est rapide, que ce soit via un CDN, un téléchargement manuel, ou avec un gestionnaire de paquets.

1. Utiliser un CDN pour AngularJS

La méthode la plus simple pour intégrer AngularJS est d'utiliser un CDN (Content Delivery Network). Cette approche ne nécessite aucun téléchargement et permet d’obtenir la dernière version d’AngularJS, tout en améliorant les performances de chargement grâce à l’utilisation de serveurs optimisés.

Dans ton fichier HTML, ajoute une balise <script> avec le lien vers le fichier AngularJS hébergé sur le CDN. Par exemple :

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Mon Application AngularJS</title>
    <!-- Inclusion d'AngularJS via le CDN de Google -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
    <!-- Contenu de l'application ici -->
</body>
</html>

2. Télécharger AngularJS et l’intégrer localement

Si tu préfères stocker AngularJS dans ton propre projet sans dépendre d'un CDN, tu peux télécharger la bibliothèque directement depuis le site officiel.

Accède à AngularJS.org et clique sur Download.
Choisis la version que tu souhaites, et télécharge le fichier angular.min.js pour une version minifiée ou angular.js pour la version complète (non compressée).
Place le fichier téléchargé dans le répertoire de ton projet, par exemple dans un dossier js.
Inclue le fichier AngularJS dans ton fichier HTML comme ceci :

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Mon Application AngularJS</title>
    <!-- Inclusion d'AngularJS depuis un fichier local -->
    <script src="js/angular.min.js"></script>
</head>
<body>
    <!-- Contenu de l'application ici -->
</body>
</html>

3. Installation avec un gestionnaire de paquets (npm)

Si tu utilises des outils de développement modernes, tu peux installer AngularJS avec npm (Node Package Manager). Cette approche est idéale si tu souhaites organiser ton projet avec des dépendances contrôlées.

Assure-toi que Node.js et npm sont installés sur ton système.
Dans ton terminal, exécute la commande suivante pour installer AngularJS :

npm install angular

Après l'installation, le fichier AngularJS sera ajouté dans le dossier node_modules de ton projet. Pour l'inclure dans ton application, tu peux créer un lien vers node_modules/angular/angular.min.js dans ton fichier HTML, ou importer AngularJS dans un fichier JavaScript :

import angular from 'angular';

4. Configuration de base d'une application AngularJS

Une fois AngularJS installé, tu peux rapidement configurer une application de base. Voici un exemple simple :

Crée un fichier HTML et inclus AngularJS comme indiqué ci-dessus.
Dans le corps de ton fichier HTML, ajoute le code suivant pour lier un modèle à la vue :

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Application de Démo AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myController">
    <p>Entrez votre nom : <input type="text" ng-model="nom"></p>
    <p>Bonjour, {{nom}} !</p>

    <script>
        // Définition de l'application et du contrôleur
        var app = angular.module('myApp', []);
        app.controller('myController', function($scope) {
            $scope.nom = "Visiteur";
        });
    </script>
</body>
</html>

Dans cet exemple :

ng-app="myApp" initialise une application AngularJS nommée myApp.
ng-controller="myController" associe le contrôleur myController à la vue.
ng-model="nom" lie l’entrée utilisateur à la variable nom, affichée dynamiquement avec {{nom}}.

Conclusion

L’installation d’AngularJS peut être réalisée de plusieurs manières, en fonction de tes préférences et de la structure de ton projet. Que ce soit via un CDN, un téléchargement manuel, ou un gestionnaire de paquets, AngularJS est facile à intégrer, ce qui en fait un outil accessible et rapide pour démarrer le développement d’applications web dynamiques. Dans les chapitres suivants, nous explorerons comment tirer parti de ses fonctionnalités puissantes pour créer des applications front-end efficaces et maintenables.

Installation AngularJS