Scribd Logo
Importer

Bienvenue sur Scribd !

  • 115 vues

    TP 1

    Transféré par

    Samira cherif
    Ce TP présente la création d'une application Angular de base. Il explique comment installer Node.js, npm, Angular CLI puis créer une application avec ng new et lancer le serveur avec ng serve.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd

    TP 1

    Transféré par

    Samira cherif
    115 vues3 pages
    Ce TP présente la création d'une application Angular de base. Il explique comment installer Node.js, npm, Angular CLI puis créer une application avec ng new et lancer le serveur avec ng serve.

    Titre original

    TP_1

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Ce TP présente la création d'une application Angular de base. Il explique comment installer Node.js, npm, Angular CLI puis créer une application avec ng new et lancer le serveur avec ng serve.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    115 vues3 pages

    TP 1

    Transféré par

    Samira cherif
    Ce TP présente la création d'une application Angular de base. Il explique comment installer Node.js, npm, Angular CLI puis créer une application avec ng new et lancer le serveur avec ng serve.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    Vous êtes sur la page 1sur 3

    ESIP GAFSA 

    2022

    TP 1 : Premier pas avec Angular 

    Objectifs : 
    A la fin de ce TP l’étudiant sera capable : 
    • D’installer les différents outils et plateformes de développement
    • Créer une application Angular
    • Installer les modules nécessaires
    • Exécuter une application Angular

    1. Installation
    Pour installer Angular sur votre système local, vous avez besoin des éléments suivants : 
    Node.js 
    Angular  nécessite  une  version  LTS  active  ou  LTS  de  maintenance  de  Node.js 
    (https://nodejs.org/en/about/releases/ ). 
    Pour plus d'informations sur l'installation de Node.js, consultez  http://nodejs.org . Si vous ne savez 
    pas  quelle  version  de  Node.js  s'exécute  sur  votre  système,  exécutez  node  ­v  dans  une  fenêtre  de 
    terminal. 
    npm : gestionnaire de paquets 
    npm est le gestionnaire de paquets officiel de Node.js. 
    Angular, Angular CLI et les applications Angular dépendent  des  paquets  npm  pour de  nombreuses 
    fonctionnalités et  fonctions.  Pour  télécharger et  installer  des  paquets  npm,  vous  avez  besoin  d'un 
    gestionnaire de paquets npm. Ce guide utilise l'interface de ligne de commande du client npm, qui est 
    installé par défaut avec Node.js. Pour vérifier que vous avez installé le client npm, exécutez npm ­v 
    dans une fenêtre de terminal. 

    Installer Angular CLI 
    Vous utilisez Angular CLI pour créer des projets, générer du code d'application et de bibliothèque, et 
    effectuer diverses tâches de développement en cours, telles que les tests, le regroupement et le 
    déploiement. 
     Pour installer Angular CLI, ouvrez une fenêtre de terminal et exécutez la commande suivante : 

    npm install ­g @angular/cli 

    2  Atelier Framework côté client 
    2. Création d’une application Angular
     Pour créer une première application Angular : 
    • Exécutez la commande CLI ng new et fournissez le nom my­app, comme indiqué ici :

    ng new my-app

    • La commande ng new vous invite à fournir des informations sur les fonctionnalités à inclure
    dans l'application initiale. Acceptez les valeurs par défaut en appuyant sur la touche Entrée.

    Angular CLI installe les paquets npm Angular nécessaires et les autres dépendances. Cela peut prendre 
    quelques minutes. 
     Le CLI crée un nouvel espace de travail et une application de bienvenue simple, prête à fonctionner. 

    3. Exécuter l’application
    Angular  CLI  comprend  un  serveur,  qui  vous  permet  de  construire  et  exécuter  localement  une 
    application Angular. 
    Naviguez vers le dossier de l'espace de travail my­app. Exécutez les commandes suivantes : 

    cd my-app

    ng serve

    La commande ng serve lance le serveur, surveille vos fichiers, et reconstruit l'application au fur et à 
    mesure que vous apportez des modifications à ces fichiers. 
    L'option ­­open (ou simplement ­o) ouvre automatiquement votre navigateur à 
    http://localhost:4200/. 

    Si votre installation et votre configuration se sont déroulées avec succès, vous devriez voir une page 
    similaire à la suivante. 

    3  Atelier Framework côté client 
    Figure 1 : Page d’accueil par défaut de l’application. 

    Structure du projet créé : 

    Dossier / fichier Description


    e2e Tests de bout­en­bout

    node_modules Modules node.js

    app.component.css Feuille de style du composant racine

    app.component.html Fragment HTML du composant racine

    app.component.spec.ts Tests relatifs au composant racine

    app.component.ts Code relatif au composant racine

    app.module.ts Module principal de l’application

    assets Resources statiques, y compris les images

    environments Liste des environnements disponibles. Par défaut, dev et prod.

    4. Résumé
    Durant ce TP vous avez construit une application Angular à partir de zéro. Voici les commandes que 
    vous devez tenir : 
    ✓ npm –version : afficher la version courante de gestionnaire de paquet
    ✓ npm install –g @angular/cli : installer angular, l’option ‘­g’ pour dire indiquer que
    l’installation sera global
    ✓ ng  ­­version  : afficher la version courant d’Angular CLI
    ✓ ng new <nom_application> : créer une nouvelle application
    ✓ npm install : installer les paquets npm nécessaires.

    4  Atelier Framework côté client 

    Vous aimerez peut-être aussi