Angular tutoriel : Commencer rapidement un projet avec Angular Cli

Cet article a pour but de vous apprendre les fondamentaux d’Angular CLI.

Cet article est un complément au guide de démarrage Angular que vous pouvez obtenir en vous inscrivant à la newsletter ( et tout ça gratuitement :))

Nous allons aborder un peu plus de notions que dans le starter guide.

Dans cet article, nous allons voir :

• Comment créer nos fichiers
• Créer un composant Angular
• Bootstrapper notre application
• Les différentes façons de builder

Avant de commencer, vous pourrez trouver la documentation d’Angular CLI ici : cli.angular.io

Installation d’Angular CLI

Avant toute chose, vous devez avoir installé Node et npm.

Ensuite pour installer angular CLI, il suffit de taper la commande suivante dans votre bash :

npm install -g @angular/cli

Et voilà vous avez installé Angular CLI. Ca va, on a commencé par le plus facile 🙂

Démarrage de votre projet

Pour démarrer une nouvelle application, il suffit d’exécuter la commande suivante :

ng new pterrat-angular-cli-tuto

Bien entendu, vous pouvez remplacer pterrat-angular-cli-tuto par votre nom de projet.

Voilà ce qui doit s’afficher dans votre console :

 

La structure des dossiers

Après l’installation et la création de votre projet avec angular-cli, nous allons voir la structure des dossiers et fichiers dans l’architecture d’angular-cli.

// Tout ce qui va concerner les tests end to end
|- e2e/
  |----- app.e2e-spec.ts
  |----- app.po.ts
  |----- tsconfig.e2e.json

// les dépendances avec npm
|- node_modules/

// l'endroit où les fichiers de build seront mis
|- dist/

// Le dossier où vous allez modifier vos fichiers de code
//Là où va se trouver vos composants, services, etc..
|- src/
  |----- app/
      |----- app.component.css|html|spec.ts|ts
      |----- app.module.ts
  |----- assets/
  |----- environments/
      |----- environment.prod.ts|ts
  |----- favicon.ico
  |----- index.html
  |----- main.ts
  |----- polyfills.ts
  |----- styles.css
  |----- test.ts
  |----- tsconfig.app.json
  |----- tsconfig.spec.json
  |----- typings.d.ts

// la configuration globale de votre application
|- .angular-cli.json  // the main configuration file
|- .editorconfig      // editorconfig which is used in some VS Code setups
|- .gitignore
|- karma.conf.js
|- package.json
|- protractor.conf.js
|- README.md
|- tsconfig.json
|- tslint.json

Voilà, vous avez l’organisation générale de l’architecture ci-dessus.

Je vous conseille de bien comprendre la structure des fichiers et des dossiers dans angular-cli pour ne pas que vous vous retrouviez perdu. Le risque est aussi d’avoir une application non maintenable si vous négligez ce point. Pour ne pas tomber dans ce piège, vous pouvez bien entendu suivre le style guide d’Angular.

Vous allez quasiment passer tout votre temps dans le dossier src/app. Ce dossier contient presque tous les fichiers dont vous avez besoin pour coder votre application. Les fichiers contenus dans ce dossier sont ensuite compilés dans le dossier dist.  Vous pouvez aussi installer des dependances avec le gestionnaire de package de node : npm. Ces dépendances seront installées dans le dossier node_modules.

 

Les versions et le nom de chaque module sont sauvegardés dans un fichier package.json pour permettre à d’autres personnes d’installer les mêmes dépendances que vous (si vous partagez votre projet sur git par exemple).

Voici le fichier package.json que vous devriez à peu près avoir après avoir créé votre projet avec la commande ci-dessus :

{
  "name": "pterrat-angular-cli-tuto",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.5.2",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

Rassurez-vous, toutes ces dépendances sont automatiquement ajoutées et incluses dans le fichier src/index.html. 

Si vous regardez dans ce fichier, vous allez remarquer des balises <app-root></app-root>. Ces balises vont servir à injecter votre application.

Builder notre application

Bon, il est temps de run notre application. Rien de plus simple avec Angular-cli, il suffit d’executer la commande suivante :

ng serve

Angular CLI va build l’application avec webpack. Il est possible pour vous de voir le résultat sur http://localhost:4200.

Enfin voilà le résultat que vous devez avoir dans votre console :

Quoi dire d’autre sur ng serve de Angular CLI ?

• Le build de votre application se fait avec webpack et plus avec SystemJs comme avant
• A chaque fois que vous sauvegardez un de vos fichiers, ng serve va recompiler automatiquement pour vous
• Il va automatiquement router pour vous
• Vous pourrez ouvrir votre application dans votre navigateur à http://localhost:4200
• Très simple d’utilisation et à comprendre
• Vous pouvez voir la taille de vos bundles pour votre application

Nous allons voir maintenant comment générer des “choses” pour votre application de façon simple.

Générer des “choses” pour votre application

Il est possible de générer plusieurs parties pour votre application.

Pour cela, il faut utiliser la commande ng generate. Avec cette commande il est possible de créer :

• Un composant
• Une directive
• Une route
• Un pipe
• Un service

On peut dire que Angular-cli va nous simplifier clairement la vie au niveau de la création de composants, pipe, … Et oui, c’est fini les créations à la main.

Nous allons voir cela avec un exemple concret

Comment créer un composant avec Angular-CLI

 

ng generate component hello-world

# ou plus simplement par :
ng g component hello-world

Vous devriez avoir ceci sur votre console :

Voilà, vous avez créer un composant Hello-world.

La commande a créé un dossier hello-world, les fichiers associés à ce composant :

• hello-world.component.html (pour le template)
• hello-world.component.css (pour le fichier style)
• hello-world.component.ts (pour le code métier du composant)
• hello-world.component.spec.ts (pour le fichier de test propre au composant)

Remarque : Quand vous utilisez la commande ng generate component, pensez au nom de votre composant et pas au nom de la classe. Par exemple, si vous utilisez la commande ng generate component HelloWorldComponent, vous allez créer un composant HelloWorldComponentComponent.

Pour en savoir plus, sur comment gérer les input et output d’un composant .

Générer un nouveau module

Il est possible d’ajouter des modules. Ils servent à encapsuler des fonctionnalités similaires dans votre application.

Il est intéressant de séparer en plusieurs modules les fonctionnalités de votre application pour vous y retrouver facilement. Il est nécessaire de pouvoir appeler les différentes sections de l’application en les appelant par une route spécifique.

 

Pour générer un module, on reste dans la même idée que pour générer un composant :

ng generate module projet --routing

ng generate module permet d’ajouter un module et le flag routing précédé de ng generate module. To add routing to it, we can add the --routing flag, — permet de l’associer à une route.

Nous avons créé un module ProjetModule qui est automatiquement inclus dans AppModule :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ProjetRoutingModule } from './projet-routing.module';

@NgModule({
  imports: [
    CommonModule,
    ProjetRoutingModule
  ],
  declarations: []
})
export class ProjetModule { }

Il y a aussi un fichier pour permettre le routing qui a été créé :

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ProjetRoutingModule { }

Créer un composant dans un module spécifique

Bon, nous venons de créer un module, mais un module sans pouvoir créer un composant dedans ne sert à rien.

Nous allons voir maintenant comment créer un composant CreateProjet dans notre ProjetModule.

 ng g component projet/create-project

Nous avons maintenant un composant CreateProjetComponent dans notre module ProjetModule. Angular-cli nous a tout modifié et par conséquent, nous a bien simplifié la vie.

Générer autre chose

Il est aussi possible de générer :

• Component : ng g component mycomponent
• Directive : ng g directive mydirective
• Pipe : ng g pipe mypipe
• Service : ng g service myservice
• Class : ng g class myclass
• Guard : ng g guard myguard
• Interface : ng g interface myinterface
• Enum : ng g enum myenum
• Module : ng g module mymodule

Comme vous pouvez le voir, il y a beaucoup de possibilités

Les différentes possibilités de build votre application

Nous allons voir les différentes possibilités de build.

Pour build en production, il suffit de lancer la commande suivante :

ng build

Les bundles vont être générer dans le dossier dist. Il suffit d’ouvrir index.html dans votre navigateur et l’application va marcher.

Build en production

Pour optimiser le build en production, il est possible de lancer la commande de build avec le flag build afin de diminuer la taille des bundles.

ng build --prod

Build en AOT

Vous pouvez ajouter le flag AOT pour diminuer de beaucoup la taille des bundles générés à partir du build.

ng build --prod --aot

Conclusion

Autant vous dire que c’était un outil très performant, et maintenant je dirais même qu’il indispensable pour développer une application Angular rapidement et proprement.

Je ne vais pas m’étaler plus car je ne serais que dire tellement cet outil est génial..

C’est là que se termine ce tutoriel, j’espère qu’il vous aura plu. Si c’est le cas, partager le et parler en autour de vous. Allez à bientôt 🙂