Démarrer avec Angular CLI

11/02/20 danny

Angular est un Framework Javascript.

Angular CLI signifie Angular Command Line Interface

Angular CLI est l'outil de base permettant de créer et modifier une application angular.

Nous allons étudier les commandes essentielles disponibles.


Ce que nous allons faire

  • Avant de Commencer
    Qu'est ce qu' Angular CLI
  • La liste des commandes
    Liste arbitraire et non exhaustive des commandes.

Qu'est qu'Angular CLI ?

CLI signifie Command Line Interface.

Angular CLI est un outil qui permet d'utiliser des commandes en ligne. 

Il permet d'initialiser, de développer et de maintenir des applications Angular. 

Les dernières versions sont disponibles ci-dessous

La procédure d'installation est détaillée sur le site officiel d'Angular https://angular.io/cli

Vous devez installer au préalable Node.js sur votre poste de travail.
Consultez pour cela le tutoriel suivant 
Démarrer avec Angular

​​​​​​Angular CLI est une librairie (ou package).
Nous allons l'installer avec npm le gestionnaire de packages de Node.js.

# Désinstallation d'angular-cli
npm uninstall -g @angular/cli

# Installation d'angular-cli dernière version disponible
npm install -g @angular/cli

# Installation d'angular-cli version spécifique
npm install -g @angular/cli@9.0.1

# Test de version installée
ng --version

Liste des commandes

Pour connaitre les commandes deux liens officiels


Voici la liste de celles-ci que nous allons examiner

  • Installation/Desinstallation d'Angular CLI
    ng new [project-name]
     
  • Création d'un projet Angular
    ng new [project-name]
     
  • Création d'un composant
    ng generate component [component-name]
     
  • Création d'un module
    ng generate module [component-name]
     
  • Création d'une classe
    ng generate class [class-name]

Désinstallation et Installation d' Angular CLI

Il ne s'agit pas de commandes angular CLI.
Mais comme elles sont essentielles parlons en.

Il faut utiliser npm (Node Package Managaer) de node.js

# Désinstallation d'angular-cli
npm uninstall -g @angular/cli

# Installation d'angular-cli dernière version disponible
npm install -g @angular/cli

# Installation d'angular-cli version spécifique
npm install -g @angular/cli@9.0.1

# Test de version installée
ng --version

Création d'un projet angular

Syntaxe (2 Méthodes)

  • ng new [project-name] [options]
  • ng n [project-name] [options]

    new
    ou n: Commande Angular CLI (création d'application)
    project-name : Nom du projet Angular (le nom est arbitraire)
    options : Adapte la commande

     


Action

  • Crée un nouvel espace de travail (Workspace) et une nouvelle application Angular.


Options

  • routing
    Permet de gérer le routing
    Crée automatiquement un fichier app-routing.module.ts
     
  • defaults
    Permet de sélectionner automatiquement les options par défaut
    (pas de routing , Type CSS)
     
# Générer un projet appelé angular-starter avec choix manuel des options
ng new angular-starter

# Générer un projet appelé angular-starter avec options par défaut
ng new angular-starter --defaults

# Générer un projet appelé angular-starter avec Gestion du routing
ng new angular-starter --routing

Création d'un composant

Syntaxe (2 méthodes)

  • ng generate component [component-name] [options]
  • ng g c [component-name] [options]

    generate 
    ou g: Commande Angular CLI
    component ou c : création d'un composant
    component-name : Nom du composant Angular (le nom est arbitraire)
    options : permet d'adapter la création de composant

Action

  • Crée un composant à l'emplacement indiqué


Exemples

  • ng generate component home

    Crée un répertoire home dans app
    Crée 4 fichiers dans le répertoire app/home
    - home.component.css
    - home.component.html
    - home.component.spec.ts
    - home.component.ts
    Modifie le fichier app.module.ts
    - rajout de HomeComponent dans declarations
     
  • ng generate component components/contact

    Crée un répertoire components dans app
    Crée un répertoire contact dans app/components
    Crée 4 fichiers dans le répertoire app/components/contact
    - contact.component.css
    - contact.component.html
    - contact.component.spec.ts
    - contact.component.ts
    Modifie le fichier app.module.ts
    - rajout de ContactComponent dans declarations
     
# Création d'un composant home dans app
ng generate component home

# Création d'un composant contact dans le répertoire app/modules
ng generate component modules/contact

Création d'un module

Syntaxe (2 méthodes)

  • ng generate module [module-name] [options]
  • ng g m [module-name] [options]

    generate 
    ou g: Commande Angular CLI
    module ou m : création d'un module
    module-name : Nom du module Angular (le nom est arbitraire)
    options : permettant d'adapter la création de module

Exemples

  • ng generate module home
    Crée un répertoire home dans app
    Crée 1 fichier dans le répertoire app/home
    - home.module.ts
     
  • ng generate module home --flat
    Crée 1 fichier dans le répertoire app
    - home.module.ts
     
  • ng generate module modules/contact
    Crée un répertoire modules dans app
    Crée un répertoire contact dans app/modules
    Crée 1 fichier dans le répertoire app/modules/contact
    - contact.module.ts
     
  • ng generate module modules/contact --flat
    Crée un répertoire modules dans app
    Crée 1 fichier dans le répertoire app/modules
    - contact.module.ts
# Création d'un module home dans app , création d'un répertoire home
ng generate module home

# Création d'un module contact dans le répertoire app/modules
ng generate module modules/contact

# Création d'un module home dans app, pas création d'un répertoire home
ng generate module home --flat

# Création d'un module contact dans le répertoire app/modules
ng generate module modules/contact --flat

Création d'une classe

Syntaxe (2 méthodes)

  • ng generate class [class-name]

    generate 
    ou g: Commande Angular CLI
    class : création d'une class
    class-name : Nom du module Angular (le nom est arbitraire)

Exemples

  • ng generate class data
    Crée 2 fichiers dans le répertoire src/app
    - data.ts
    - data.spec.ts
# Création d'une classe Data
ng generate class data