Nothing Special   »   [go: up one dir, main page]
Scribd Logo
Importer

Bienvenue sur Scribd !

  • 244 vues

    Atelier1 Angular

    Transféré par

    hell2062018
    L'article décrit les étapes pour installer l'environnement de développement Angular, créer un projet Angular avec le CLI et explorer la structure de base d'un projet Angular.

    Droits d'auteur :

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

    Atelier1 Angular

    Transféré par

    hell2062018
    244 vues2 pages
    L'article décrit les étapes pour installer l'environnement de développement Angular, créer un projet Angular avec le CLI et explorer la structure de base d'un projet Angular.

    Titre original

    Atelier1-Angular

    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é ?

    L'article décrit les étapes pour installer l'environnement de développement Angular, créer un projet Angular avec le CLI et explorer la structure de base d'un projet Angular.

    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
    244 vues2 pages

    Atelier1 Angular

    Transféré par

    hell2062018
    L'article décrit les étapes pour installer l'environnement de développement Angular, créer un projet Angular avec le CLI et explorer la structure de base d'un projet Angular.

    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 2

    Institut Supérieur des Etudes Technologiques de Sousse

    Département de Technologies de l’Informatique


    Matière : Atelier FrameWork Côté Client Classe : DSI 2.1
    A. U. : 2019/2020 – Semestre 1

    Atelier 1 : Installation de l’environnement de


    travail d’Angular

    Installation
    Suivre les étapes suivantes :
    1- Installer Node.JS
    • Node.js est un environnement bas niveau permettant l’exécution de JavaScript
    côté serveur.
    • Télécharger la version LTS (Long-term support) la plus récente de Node.JS pour
    Windows et l’installer.
    2- Installer la version la plus récente de npm
    • npm est le gestionnaire de paquets officiel de Node.js
    • exécuter la commande suivante sur l’invite de commandes :
    npm install -g npm@latest
    3- Installer le CLI d’Angular
    • Le CLI (Command Line Interface) d’Angular est un outil permettant d'exécuter
    des commandes depuis la console pour la création, la structuration et la
    production d’une application Angular.
    • Exécuter la commande suivante sur l’invite de commandes :
    npm install -g @angular/cli
    • Une fois le CLI est installé, la commande ng est disponible depuis la ligne de
    commandes depuis n’importe quel dossier de l’ordinateur. Angular-cli utilise
    l'exécutable nommé ng pour réaliser ses différentes fonctionnalités offertes.
    4- Installer l’IDE Visual Studio Code
    Un IDE (Integrated Development Environment) est un logiciel qui rassemble des outils
    permettant de développer d’autres logiciels tels que des applications mobiles, des
    applications Web, des logiciels pour ordinateur ou consoles de jeux, etc.
    Créer un projet Angular avec CLI

    Pour créer un nouveau projet Angular, naviguer vers le dossier souhaité depuis une ligne de
    commande et saisir la commande suivante :
    ng new Projet1
    Ensuite, naviguer dans le dossier du projet et lancez le serveur de développement :
    cd Projet1
    ng serve --open
    Ouvrir le navigateur et taper localhost:4200. La page d’accueil du projet est alors affichée.
    Explorer la structure du projet Angular
    1. Ouvrir le projet créé avec VSCode.
    2. Remarquer l’existence du dossier src : c’est le dossier de travail où se trouvent tous les
    fichiers sources pour l’application.
    3. Ouvrir index.html. Remarquer dans le body, l’existence de la balise : app-root. Il s'agit
    d'une balise Angular.
    4. Ouvrir le dossier app et ouvrir le fichier app.component.html. Ce fichier correspondant
    à la page retournée par le navigateur.
    5. Ouvrir le fichier app.component.ts. Ce fichier contient la description du composant
    racine.
    6. Remplacer la variable title dans app.component.ts par votre prénom, enregistrer le
    fichier, et regarder le résultat dans le navigateur.

    Vous aimerez peut-être aussi