BTS SIO2D
  • Accueil
  • Connexion
16 septembre 2024 par Killian Pinte

Installation AngularJS

Installation AngularJS
16 septembre 2024 par Killian Pinte

Table des matières

Toggle
  • Chapitre : Installation d'AngularJS
    • Introduction
    • 1. Utiliser un CDN pour AngularJS
    • 2. Télécharger AngularJS et l’intégrer localement
    • 3. Installation avec un gestionnaire de paquets (npm)
    • 4. Configuration de base d'une application AngularJS
    • Conclusion

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.

  1. 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.

  1. Accède à AngularJS.org et clique sur Download.
  2. 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).
  3. Place le fichier téléchargé dans le répertoire de ton projet, par exemple dans un dossier js.
  4. 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.

  1. Assure-toi que Node.js et npm sont installés sur ton système.
  2. 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 :

  1. Crée un fichier HTML et inclus AngularJS comme indiqué ci-dessus.
  2. 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.

Article précédentAméliorations de Performance dans Angular 18Article suivant Nouveauté d'Angular 16

Laisser un commentaire Annuler la réponse

Vous devez vous connecter pour publier un commentaire.

About The Blog

Nulla laoreet vestibulum turpis non finibus. Proin interdum a tortor sit amet mollis. Maecenas sollicitudin accumsan enim, ut aliquet risus.

Articles récents

projet flutter Forum28 avril 2025
Backup BDD Bash17 mars 2025
UE – TF1 se met à Unreal Engine ?17 mars 2025

Catégories

  • Article Angular Killian
  • Article Clément
  • Article Unreal Engine Hugo
  • Cybersécurité
  • IA
  • Non classé
  • Projet Flutter KHM
  • Projet Hugo
  • Stage Clément
  • Stage Hugo
  • Stage Killian P
  • TP Clément

Méta

  • Inscription
  • Connexion
  • Flux des publications
  • Flux des commentaires
  • Site de WordPress-FR

Étiquettes

Article Développer son projet professionnel Flutter Gérer son identité professionnelle Java Stage Symfony TP

Why Lander

Lander is a design prepared
especially for the free version
of Rife WordPress Theme.

You can use this for free.
Make your website today.
Get Started Now!

Contact

734 Blackwell Street
Anchorage, Alaska
info@domain.com
+33 (0) 101 0000
+33 (0) 102 0000
Mon. - Fri. 8AM - 6PM

Articles récents

projet flutter Forum28 avril 2025
Backup BDD Bash17 mars 2025
UE – TF1 se met à Unreal Engine ?17 mars 2025
Rife Wordpress Theme. Proudly Built By Apollo13