TP 1

Installation de l'environnement

Prérequis

Vérifiez que vous avez les éléments suivants d’installés sur votre poste :

Installation

Initialisation du projet

Nous allons utiliser l'outil @angular/cli pour générer le projet. Placez-vous dans votre workspace et lancez les commandes suivantes :

npm install -g @angular/cli
ng new tp-angular
cd tp-angular

Une fois le projet créé vous pouvez l'ouvrir dans votre IDE.

Pour lancer le serveur de développement :

ng serve

Installation d'Angular Material

Nous allons utiliser Angular material pour créer les interfaces de nos applications.

Lancer la commande suivante:

npm install --save @angular/material @angular/cdk @angular/animations hammerjs

Puis rajouter dans le fichier app.module.ts la dépendence du module comme suivant :

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatButtonModule, MatCardModule, MatInputModule, MatDialogModule } from '@angular/material';

import "hammerjs";
// other imports 
@NgModule({
  ...  
  imports: [
      BrowserAnimationsModule, 
      MatButtonModule,
      MatCheckboxModule,
      MatCardModule,
      MatInputModule,
      MatDialogModule
  ],
  ...
})
export class AppModule { }

En complément vous pouvez rajouter la feuille de style suivante dans la page index si vous voulez utiliser les icônes de la librairie Material :

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Enfin dans le styles.css, ajouter le thème :

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

body {
    padding: 0;
    margin:0;
    font-family: Roboto,"Helvetica Neue",sans-serif;
}

Générer des Composants, Directives, Pipe, etc...

Vous pouvez utiliser la commande ng generate (ou ng g) pour générer des composants Angular : 

ng generate component my-new-component
ng g component my-new-component # using the alias

# components support relative path generation
# if in the directory src/app/feature/ and you run
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp
# but if you were to run
ng g component ../newer-cmp
# your component will be generated in src/app/newer-cmp

Voici la liste des commandes possibles pour générer une fonctionnalité d'Angular:

Génération Usage
Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Guard ng g guard my-new-guard
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module

Correction du TP : tp1-solution

Suivant