Démarrer avec Angular CLI

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

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

• https://github.com/angular/angular-cli/releases

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.

Pour connaitre les commandes deux liens officiels

• https://github.com/angular/angular-cli/wiki
• https://angular.io/cli

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]

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

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)
   

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
   

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

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

Les étapes suivantes vous permettront d'obtenir une application prototype

• Etape 1 : Démarrer avec Angular
   
• Etape 2 : Routing avec Angular
   
• Etape 3 : Lazy loading avec Angular
   
• Etape 4 : Bootstrap avec Angular
   
• Etape 5 : Modules avec Angular
   
• Etape 6 : Components avec Angular
   
• Etape 7 : Services avec Angular
   
• Etape 8 : Template Driven Forms avec Angular
   
• Etape 9 : Charts avec Angular
   
• Etape 10 : Server Side Rendering avec angular
   
• Etape 11 : HttpClient avec Angular
   
• Etape 12 : Transfer State avec Angular
   
• Etape 13 : Progressive Web App avec Angular
   
• Etape 14 : Search Engine Optimization avec Angular

La dernière étape permet d'obtenir un exemple d'application

• Etape 15 : Créer une application Web complète avec Angular

Le code source de cette application finale est disponible sur GitHub
https://github.com/ganatan/angular-app