import { Component, OnInit } from '@angular/core';
import { Book } from 'src/app/models/book.model';

@Component({
  selector: 'app-books-list',
  templateUrl: './books-list.component.html',
  styleUrls: ['./books-list.component.scss']
})


export class BooksListComponent implements OnInit {
  monLivre: Book = { //ici on instancie un livre, juste pour l'exemple il faudrait utiliser un service plutôt
    id: 1,
    titre: 'Germinal',
    nomAuteur: 'Zola',
    description: 'Livre sur les grèves dans les mines'
  }

  constructor() { }

  ngOnInit() {
  }

}

Modèles

export class Book {
    id: number;
    titre: string;
    nomAuteur: string;
    description: string;
}

import { Injectable } from '@angular/core';
import { Book } from '../models/book.model';
import { HttpClient } from '@angular/common/http';
import { Observable, from } from 'rxjs';
import {environment} from '../../environments/environment';


const BASE_URL: string=environment.BASE_URL;

@Injectable({
  providedIn: 'root'
})
export class BookService {
  //va chercher un httpclient et retourner un observable de tableau de Book


constructor(private http: HttpClient) { 
  console.log("Nous sommes dans le constructeur de BookService"); 
}

        

putBooks(livre: Book){
  return this.http.post<Book>(`${BASE_URL}/books/`,livre);
}

  getBook(numLivre){
    console.log("Ici le book.service, on va chercher",BASE_URL+"/"+numLivre);
    return this.http.get<Book>(`${BASE_URL}/books/${numLivre}`);
  }

  getBooks(){
    return this.http.get<Book[]>(`${BASE_URL}/books/`);
  }

}

import { Component, OnInit } from '@angular/core';
import { BookService } from 'src/app/services/book.service'; //on a besoin du service pour récupérer le livre
import { Book } from 'src/app/models/book.model'; //il faut connaitre le model

@Component({
  selector: 'app-books-list',
  templateUrl: './books-list.component.html',
  styleUrls: ['./books-list.component.scss']
})


export class BooksListComponent implements OnInit {
   livreAAfficher: Book ; //la variable est en attribut pour pouvoir s'en servir en dehors du constructeur, l'afficher

  constructor(private bookService: BookService) {  //ici le type BookService sera détecté comme injectable et sera INJECTE
     this.livreAAfficher= bookService.getBook(1);   //on récupère le livre 1
    console.log("Nous sommes dans le constructor de BooksListComponent");
} 

  ngOnInit() {
    console.log("Nous sommes dans le ngOnInit de BooksListComponent");
  }

}

<ul>
 <li *ngFor="let article of articles">{{article.title}}</li> //va générer autant de lignes que d'articles, on peut rajouter : "let i= index" après "let article of articles"
</ul>

import { Directive,ElementRef } from '@angular/core';

@Directive({
  selector: '[appUppercase]'
})
export class UppercaseDirective {

  constructor(el: ElementRef){
    el.nativeElement.style.textTransform = 'uppercase';
   }

}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UppercaseDirective } from './uppercase.directive';

@NgModule({
  imports: [
    CommonModule //ce module est important, il y aura les directives angular
  ],
  declarations: [
    UppercaseDirective //on déclare notre directive dans ce module
  ],
  exports: [
    UppercaseDirective //on l'exporte
  ]
})
export class SharedModule { }

<appMoncomposant [attributAuquelOnVeutPasserQuelqueChose]="instanceDunObjet" attributString="uneString" (action)="uneAction()" (action2)="uneActionAvecParam($event)"></appMoncomposant>

@input() attributAuquelOnVeutPasserQuelqueChose: Type;

//dans la vue, moncomposant.component.html
<div  (click)="methodeAAppelerSiClick()"> //click est un event préprogrammé dans angular, se déclenche si clic de souris sur l'élément
Cliquez-moi !
</div>

//dans le contrôleur, moncomposant.component.ts
import { Component, OnInit, Input, Output,EventEmitter } from '@angular/core';
import { Book } from 'src/app/models/book.model';

@Component({
  selector: 'app-book',
  templateUrl: './book.component.html',
  styleUrls: ['./book.component.scss']
})
export class BookComponent {

  methodeAAppelerSiClick(){
    console.log("Un clic a été fait !");
  }
}

//Dans la vue du composant enfant
<div  (click)="monActionATransferer()">
 <p appUppercase>
  Titre : {{livre.titre}}
 </p>
</div>

import { Component, OnInit, Input, Output,EventEmitter } from '@angular/core';
import { Book } from 'src/app/models/book.model';

@Component({
  selector: 'app-book',
  templateUrl: './book.component.html',
  styleUrls: ['./book.component.scss']
})
export class BookComponent {
@Input() livre: Book;
@Output() monEventEmit=new EventEmitter(); //c'est lui qui émettra vers le parent

  monActionATransferer(){
    console.log("transfert de l'action !");
    this.monEventEmit.emit(this.livre); //ici l'évènement est émit vers le parent
  }
}

<div>
Livre cliqué : {{livreSelectionne.titre}}
<app-book [livre]="livreAAfficher" (monEventEmit)="monAction($event)"  *ngFor="let livreAAfficher of tabLivres"  class="book"></app-book>
</div>

import { Component, OnInit } from '@angular/core';
import { BookService } from 'src/app/services/book.service';
import { Book } from 'src/app/models/book.model';

@Component({
  selector: 'app-books-list',
  templateUrl: './books-list.component.html',
  styleUrls: ['./books-list.component.scss']
})
export class BooksListComponent {
  tabLivres: Book[] ;
  livreSelectionne: Book;

  constructor(private bookService: BookService) {      
     this.tabLivres= bookService.getBooks(); //récupère un tableau de livres
    console.log("Nous sommes dans le constructor de BooksListComponent");
} 

  monAction(livreTransfere:Book){
    console.log(livreTransfere);
    console.log(livreTransfere.titre);
    this.livreSelectionne=livreTransfere;
  }

}

  getMonBelObservable(){
    return this.http.get<Book[]>(BASE_URL);
  }

bookService.getMonBelObservable().subscribe( //on s'abonne à l'observable
    (books:Book[]) =>  {this.vraiTabLivres = books}, //on récupère les Objets, ici, des livres, et on en fait ce qu'on en veux
    (error) =>  this.errorMessage = <any>error);  //on peut afficher des erreurs

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http'; //rajout perso
import { RouterModule, Routes } from '@angular/router'; //ajout, pour les routes
import { AppComponent } from './app.component';
import { BooksModule } from './books/books.module';
import { SharedModule } from './shared/shared.module';
import { BookDetailsComponent } from './books/book-details/book-details.component';
import { BooksListComponent } from './books/books-list/books-list.component';


const appRoutes: Routes = [ //on peut aussi mettre les routes dans un fichier à part, par exemple app.routes.ts
  { path: 'livres/:id', component: BookDetailsComponent }, //puis faire import {appRoutes} from './app.routes.ts' 
  { path: 'livres', component: BooksListComponent },
 { path: '', redirectTo:'livres',pathMatch:'full' } //exemple de redirection
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BooksModule
    SharedModule,
    HttpClientModule,
    RouterModule.forRoot( //ne pas oublier d'importer notre module !
      appRoutes, //ici le tableau contenant les routes qu'on veut charger
      { enableTracing: true } // affiche des messages d'infos concernant les routes
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<a [ngCLass]="{nomDeLaClasse: locale === 'en' }">
<a [ngCLass]="{nomDeLaClasse: locale === 'fr' }">

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-book-details',
  templateUrl: './book-details.component.html',
  styleUrls: ['./book-details.component.scss']
})
export class BookDetailsComponent implements OnInit {

  constructor(  
    private route: ActivatedRoute,     //la route actuelle sera injectée
    ) { }

  ngOnInit() {
    const numLivreAAfficher=this.route.snapshot.params.id;  //on récupère le paramètre (la route sera "/book/:id", noter les 2 points)
    console.log("FAUT AFFICHER LE LIVRE N°",numLivreAAfficher);

}

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { Book } from 'src/app/models/book.model';
import { BookService } from 'src/app/services/book.service';

@Component({
  selector: 'app-book-details',
  templateUrl: './book-details.component.html',
  styleUrls: ['./book-details.component.scss']
})
export class BookDetailsComponent implements OnInit, OnDestroy {
  subscription: Subscription=null; //on doit avoir la subscription en attribut pour pouvoir se désabonner par la suite
  private livreAAfficher: Book; //sur la page on affichera {{livreAAfficher.description}} par exemple
  private errorMessage: string=""; //pour les erreurs si rien n'est renvoyé


  constructor(  
    private route: ActivatedRoute,
    private bookService: BookService
    ) { 
    }

  ngOnInit() {
    const numLivreAAfficher=this.route.snapshot.params.id;
    console.log("FAUT AFFICHER ",numLivreAAfficher);

    this.subscription=this.bookService.getBook(numLivreAAfficher).subscribe(
      (book:Book) =>  {this.livreAAfficher = book; console.log("On a recup",book);}, //une fois qu'on a récup le book on l'affiche
      (error) =>  this.errorMessage = <any>error);       
  }

  ngOnDestroy() {
    this.subscription.unsubscribe; //il faut absolument unsuscribe sinon des observateurs vont s'accumuler chaque fois qu'on voudra les détails d'un livre !
  }
}

Sous-routes

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router'; //ajout, pour les routes

//a été ajouté automatiquement lors de la génération du composant
//en général on saute une ligne pour lister nos propres composants
import { BooksListComponent } from './books-list/books-list.component';
import { SharedModule } from '../shared/shared.module';
import { BookComponent } from './books-list/book/book.component';
import { BookDetailsComponent } from './book-details/book-details.component';
import { BooksComponent } from './books.component';
import { bookRoutes } from './books.routes';

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    RouterModule,
    RouterModule.forChild(  //ce n'est plus "forRoot"
      bookRoutes //un tableau de routes
    )
  ],
  declarations: [
    BooksListComponent,
    BookComponent,
    BookDetailsComponent,
    BooksComponent
  ],
  exports:[ //rajouté par moi
    BooksListComponent //faut lui dire ce qu'on veut mettre à disposition 
  ]
})
export class BooksModule {}

import { Routes } from "@angular/router";
import { BooksListComponent } from "./books-list/books-list.component";
import { BookDetailsComponent } from "./book-details/book-details.component";
import { BooksComponent } from "./books.component";

export const bookRoutes: Routes = [ 
    {
        path: 'livres',
        component: BooksComponent,
        children: [                                       //la sous-route
            { path: ':id', component: BookDetailsComponent },
            { path: '', component: BooksListComponent }
        ]
    }


];

Lazy loading

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http'; //rajout perso
import { RouterModule, Routes } from '@angular/router'; //ajout, pour les routes
import { AppComponent } from './app.component';
import { BooksModule } from './books/books.module';
import { SharedModule } from './shared/shared.module';
import { BooksListComponent } from './books/books-list/books-list.component';
import { AdminModule } from './admin/admin.module';


const appRoutes: Routes = [ //on peut aussi mettre les routes dans un fichier à part, par exemple app.routes.ts
  { path: '', redirectTo:'livres',pathMatch:'full' },
  { path: 'admin', loadChildren:'./admin/admin.module#AdminModule'} //si le chemin correspond à "admin", le module sera chargé
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BooksModule, //à parti de là, rajouts perso
    SharedModule,
    HttpClientModule,
   // AdminModule, //il faut pas mettre l'AdminModule ici pour qu'on puisse le lazyloader
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: false } 
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminComponent } from './admin.component';
import { NewBookComponent } from './new-book/new-book.component';
import { NewAuthorComponent } from './new-author/new-author.component';
import { RouterModule } from '@angular/router';
import { adminRoutes } from './admin.routes';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(
      adminRoutes 
    )
  ],
  declarations: [AdminComponent, NewBookComponent, NewAuthorComponent]
})
export class AdminModule { }

import { Routes } from "@angular/router";
import { AdminComponent } from "./admin.component";

export const adminRoutes: Routes = [
    {
        path: '',
        component: AdminComponent,
        children: [
            { path: '', component: AdminComponent }
        ]
    }


];

<div *ngIf="messageDErreur">{{messageDErreur}}</div>
<form (ngSubmit)="envoyerForm()" #monFormulaire="ngForm">
  <p>Titre : <input name="titre" [(ngModel)]="livreACreer.titre" required></p>
  <p>Nom de l'auteur : <input name="nomAuteur" [(ngModel)]="livreACreer.nomAuteur" required></p>
  <p>Description : <textarea name="description" [(ngModel)]="livreACreer.description" required></textarea></p>
  <p><button type="submit">Créer le nouveau livre</button></p>
</form>

import { Component, OnInit } from '@angular/core';
import { Book } from 'src/app/models/book.model';
import { BookService } from 'src/app/services/book.service';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs';


@Component({
  selector: 'app-new-book',
  templateUrl: './new-book.component.html',
  styleUrls: ['./new-book.component.scss']
})
export class NewBookComponent implements OnInit {
private livreACreer: Book;
subscription: Subscription=null; 
messageDErreur: string="";
  constructor(private bookService: BookService, private routeur:Router) { 
    this.livreACreer=new Book();
  }

  ngOnInit() {
  }

  envoyerForm(){
    //il faudrait griser le bouton dès l'envoi pour éviter que si le serveur met 10s à répondre, on puisse cliquer 3 fois sur le bouton et envoyer 3 livres
    console.log("envoi du formulaire, il contient le nouveau livre ",this.livreACreer);
    this.subscription=this.bookService.putBooks(this.livreACreer).subscribe( //ATTENTION IL FAUT ABSOLUMENT SUBSCRIBE POUR POUVOIR POST
    () =>  {this.routeur.navigateByUrl("/")}, //on redirige vu qu'on a eu un succès
    (error)=>{this.messageDErreur=error.message;});    //ya eu une erreur, on la met dans notre attribut
  }
}

<div *ngIf="messageDErreur">{{messageDErreur}}</div>
<Form [formGroup]="monFormulairePourAuteur" (ngSubmit)="envoiFormulaire()">
  <input placeholder="Name" formControlName="nomauteur">
  <p><button type="submit">Créer le nouvel auteur</button></p>
</Form>

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { Auteur } from 'src/app/models/auteur.model';
import { Subscription } from 'rxjs';
import { AuteurService } from 'src/app/services/auteur.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-new-author',
  templateUrl: './new-author.component.html',
  styleUrls: ['./new-author.component.scss']
})
export class NewAuthorComponent implements OnInit {
  private subscription: Subscription=null;
  private messageDErreur="";

  private monFormulairePourAuteur: FormGroup = new FormGroup({    //Construction du formulaire !
    nomauteur: new FormControl()
  }
  );

  constructor(private auteurService: AuteurService, private routeur:Router) { }

  ngOnInit() {
  }

  envoiFormulaire(){
    console.log("Il faut envoyer le formulaire !");
    const formModel=this.monFormulairePourAuteur.value;
    const auteurACreer:Auteur = {
      id:0, //comme notre modèle a une ID, on est forcé de la spécifier. En la mettant à 0 le serveur va l'incrémenter. On pourrait faire new Auteur(nomauteur) aussi...
      nomAuteur: formModel.nomauteur as string
    };

    this.subscription=this.auteurService.putAuteur(auteurACreer).subscribe( //ATTENTION IL FAUT ABSOLUMENT SUBSCRIBE POUR POUVOIR POST
      (auteur: Auteur) =>  { //c'est l'auteur renvoyé par le serveur une fois qu'il est créé, il aura un id
        this.routeur.navigateByUrl("/")
        console.log('Auteur créé : ', auteur); //on le display pour le fun
      },
      (error)=>{this.messageDErreur=error.message;});   
  }
}

Validation

<div *ngIf="messageDErreur">{{messageDErreur}}</div>
<form (ngSubmit)="envoyerForm()" #monFormulaire="ngForm">
  <p>Titre : <input name="titre" [(ngModel)]="livreACreer.titre" required minlength="4" appForbiddenName="bob" #titre="ngModel"></p>
  <app-affiche-erreur-valid-forms [objetATester]="titre"></app-affiche-erreur-valid-forms> <!-- on met le champ "desc" dans l'objet objetATester. -->
  <p>Nom de l'auteur : <input name="nomAuteur" [(ngModel)]="livreACreer.nomAuteur" required minlength="4"#nomauteur="ngModel"></p>
  <app-affiche-erreur-valid-forms [objetATester]="nomauteur"></app-affiche-erreur-valid-forms>
  <p>Description : <textarea name="description" [(ngModel)]="livreACreer.description" required minlength="4" #desc="ngModel"></textarea></p>
  <app-affiche-erreur-valid-forms [objetATester]="desc"></app-affiche-erreur-valid-forms> 
  <p>  
  <button type="submit" [disabled]="!monFormulaire.form.valid">Créer le nouveau livre</button></p> <!-- par contre ya une verif à faire dans le contrôleur derrière car l'attribut disabled peut être enlevé dans l'inspecteur-->
</form>

<div *ngIf="objetATester.invalid && (objetATester.dirty || objetATester.touched)"
class="alert alert-danger">

<div *ngIf="objetATester.errors.required">
Champ requis.
</div>
<div *ngIf="objetATester.errors.minlength">
Longueur incorrecte.
</div>
<div *ngIf="objetATester.errors.forbiddenName">
Interdit de rentrer cette valeur.
</div>

{
    "APP":{
        "BOOKS_LINK":"Books zone",
        "ADMIN_LINK":"Admin zone"
    },
    "BOOK":{
        "BIENVENUE":"Welcome in our bookstore!",
        "LIST":{
            "TITRE":"Book title:",
            "AUTEUR":"Author :",
            "DETAILS":"Show book details"
        },
        "DETAILS":{
        }
    },
    "ADMIN":{
    }
}

import {TranslateLoader } from '@ngx-translate/core';
import {TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient} from '@angular/common/http';

export function createTranslateLoader(http: HttpClient){
    return new TranslateHttpLoader(http,'./assets/','.json');
}

export const appTranslate = {
    loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
    }
};

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { environment} from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  title = 'bookstore';
  langage=environment.langageParDefaut;

  constructor(private traduction:TranslateService){}

  ngOnInit(){
    this.traduction.setDefaultLang(this.langage);
    this.traduction.use(this.langage);
  }

   changerLangue(){
    console.log(this.langage);
    this.traduction.use(this.langage);

  }
}

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { NO_ERRORS_SCHEMA } from '@angular/core';

describe('AppComponent', () => {
  beforeEach(async(() => {          //s'éxécutera avant chaques tests, on peut faire "beforeAll" si on veut que que quelque chose soit fait avant tous les tests
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      schemas:[ //on créé ça pour qu'il n'essaie pas de tester les composants du dessous
        NO_ERRORS_SCHEMA //on veut pas qu'il essaie d'instancier tous les composants en dessous
        //a mettre pour chaque tests concernant des composants ayant eux-même des composants
        //pour éviter cascade de test
      ]
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'bookstore'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance; //ici on fonctionne sur le componentInstance, càd une fois instanciée mais pas forcément dans le dom
    expect(app.title).toEqual('bookstore');
  });

  it('should render title in a h1 tag', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();       //c'est seulement une fois que le DOM est affiché...
    const compiled = fixture.debugElement.nativeElement;  //...qu'on peut tester des balises HTML normales genre H1
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to bookstore!');
  });

  it('should render two routerlinks tags', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();       
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelectorAll('a[routerLink]').length).toEqual(2); //il devrait y avoir 2 balises routerLink sur la page principale (index et accès admin)
  });
});

    const fixture = TestBed.createComponent(AppComponent);
    const monComposant= fixture.debugElement.componentInstance;
    let monRetour = monComposant.maBelleFonction();
    expect(monRetour.id).toContain('quelqueChose');

    fixture = TestBed.createComponent(MonBeauComponent);
    component = fixture.componentInstance;
...
...
  it('devrait appeler maBelleFonction', () => {
    spyOn(component, 'maBelleFonction');
    component.autreFonctionQuiAppelleMaBelleFonction();
    expect(component.maBelleFonction).toHaveBeenCalled();
  });

    fixture = TestBed.createComponent(MonBeauComponent);
    component = fixture.componentInstance;
blabla...
blabla...

  it('devrait appeler maBelleFonction', () => {
    spyOn<any>(component, 'maBelleFonction');
    component.autreFonctionQuiAppelleMaBelleFonction();
    expect(component.['maBelleFonction']).toHaveBeenCalled();
  });

    TestBed.configureTestingModule({

      let monbeauServiceMock= mock(MonbeauServiceMock);
      declarations: [DashboardComponent],
      providers: [
        { provide: MonbeauService, useValue: instance(monbeauServiceMock) },
blabla...
blabla...

  it('devrait appeler MonbeauService.laFunctionDeMonbeauService', () => {
    //GIVEN
    let service = TestBed.inject(MonbeauService);
    spyOn(service, 'laFunctionDeMonbeauService').and.callThrough();

    //WHEN
    component.laMathodeQuiAppelleLeService();

    //THEN
    expect(service.laFunctionDeMonbeauService).toHaveBeenCalled();
  });

    TestBed.configureTestingModule({
      declarations: [DashboardComponent],
      providers: [ { provide: EventService, useValue: { laFunctionDeMonbeauService: () => {console.log("mocké");} } }]
        
blabla...
blabla...

  it('devrait appeler MonbeauService.laFunctionDeMonbeauService', () => {
    //GIVEN
    let service = TestBed.inject(MonbeauService);
    spyOn(service, 'laFunctionDeMonbeauService').and.callThrough();

    //WHEN
    component.laMathodeQuiAppelleLeService();

    //THEN
    expect(service.laFunctionDeMonbeauService).toHaveBeenCalled();
  });

    const maBelleMethodePriveeMockee = spyOn<any>(component, 'maBelleMethodePrivee');
    maBelleMethodePriveeMockee.and.callFake(() => [{
      monChamp1: 'abc',
      monChamp2: 'lol'
    }]);
    component.methodeAppelantMaBelleMethodePrivee();
  });

describe('FiltresComponent', () => {
let monBeauService: MonBeauService;
let monBeauServiceMock: MonBeauService;
  beforeEach(async(() => {
    monBeauServiceMock = mock(MonBeauService);
    TestBed.configureTestingModule({
      declarations: [UnComponent],
      providers: [
        {
          provide: MonBeauService,
          useValue: instance(monBeauServiceMock)
        }
      ]
    }).compileComponents();
    monBeauService= TestBed.inject(MonBeauService);
   }));
}


//ensuite, plus loin dans le test :
when(monBeauServiceMock.maBelleMethode()).thenReturn(monBelObjetDeRetour);

import { TestBed } from '@angular/core/testing';

import { BookService } from './book.service';
import { of } from 'rxjs';
import { HttpClient } from '@angular/common/http';

describe('BookService', () => {

  //il faut simuler le HttpClient et ses méthodes
//on pourrait mettre un vrai HttpClient qui ferait des vrais requêtes mais le test ne serait plus isolé
  const mockHttpClient = jasmine.createSpyObj('HttpClient', {
    get: of([{ //on créé une fausse fonction get qui renverra un faux observale de tableau de Book
      id:1,
      titre:'Title1',
      nomauteur:'Auteur',
      description:'blah'}])       
  });

  beforeEach(() => TestBed.configureTestingModule({ //dans notre environnement de test, on va utiliser des choses
    providers: [
      {provide: HttpClient, useValue: mockHttpClient}] //on dit qu'on va utiliser (provide) notre faux http client "mockHttpClient" (on pourrait utiliser le vrai mais cf plus haut) en tant que (usevalue) HttpClient
  }));

  it('should be created', () => {
    const service: BookService = TestBed.get(BookService);
    expect(service).toBeTruthy();
  });
});

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { BookComponent } from './book.component';

describe('BookComponent', () => {
  let component: BookComponent;
  let fixture: ComponentFixture<BookComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BookComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BookComponent);
    component = fixture.componentInstance;
    component.livre= {                  //pour le test on va générer cet attribut
      id:1,
      titre:'titre test',
      nomAuteur:'auteur test',
      description:'description test'
    }
    fixture.detectChanges();           //laisser ça à la fin
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Object.defineProperty(monBeauMock, 'laProprieteDeMonMockQueJeVeuxChanger', { value: 'valeurADonner' });

import { UppercaseDirective } from './uppercase.directive';
import { ElementRef } from '@angular/core';

describe('UppercaseDirective', () => {
  it('should create an instance', () => {
    const el:ElementRef = new ElementRef({ //on fait un élément sur lequel il peut travailler
      style:{
        textTransform:""
      }
  });     //on doit crééer l'élément ici
    const directive = new UppercaseDirective(el); //il attend un argument donc il faut lui donner un élément
    expect(directive).toBeTruthy();
  });
});

  it('devrait appeler maBelleFonction si on clique sur le bouton', fakeAsync(() => {
    spyOn(component, 'maBelleFonction');

    const button = fixture.debugElement.query(By.css('#mon-beau-bouton'));
    button.nativeElement.click();
    tick();
    fixture.detectChanges();
    expect(component.maBelleFonction).toHaveBeenCalled();
  }));

//clic sur une checkbox :
fixture.debugElement.nativeElement.querySelector("#maBelleCheckbox").click();
 
//ou bien :
fixture.debugElement.query(By.css("#maBelleCheckbox")).triggerEventHandler('change', { target: { checked: true }});

  it("doit changer l'état du ngModel lorsqu'on rempli le champ", fakeAsync(() => {
    // GIVEN
    monModel.monChamp = "0"; //on reset le champ
    fixture.detectChanges();
    //WHEN
    let champDeSaisie = fixture.debugElement.query(By.css('#monBelInput')).nativeElement
    champDeSaisie .value = "1234"; //on saisit un montant dans le champ input
    champDeSaisie .dispatchEvent(new Event('input'));
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      //THEN
      expect(monModel.monChamp).toEqual("1234"); //le modèle a bien été mis à jour quand on a saisi
    });
  }));

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { RouterTestingModule } from '@angular/router/testing';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    RouterTestingModule,
    HttpClientTestingModule
  ],
  exports:[
    FormsModule,
    RouterTestingModule,
    HttpClientTestingModule
  ],
  declarations: []
})
export class TestsModule { }

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private authenticated=false;
  constructor() { }

  isAuthenticated(){
    return this.authenticated;
  }


  setAuthenticated(authenticated:boolean){
    this.authenticated=authenticated;
  }
}

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, Route } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class LoginGuardService implements CanActivate {

  constructor(private _authService: AuthService, private _router: Router) {
  }

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (this._authService.isAuthenticated()) {
        return true;
    }

    // navigate to login page
    this._router.navigate(['/login']);
    // you can save redirect url so after authing we can move them back to the page they requested
    return false;
  }

}

<form (ngSubmit)="envoyerForm()" #monFormulaire="ngForm">
  <p>Identifiant : <input name="login" [(ngModel)]="login" required></p>
  <p>Mot de passe : <input name="password" type="password" [(ngModel)]="password" required></p>
  <p><button type="submit">Connexion</button></p>
</form>

import { Component, OnInit } from '@angular/core';

import {Router} from "@angular/router"
import { AuthService } from '../auth.service';


@Component({
  selector: 'app-login',
  templateUrl: './agent-login.component.html',
  styleUrls: ['./agent-login.component.css']
})
export class AgentLoginComponent implements OnInit {

  private messageDErreur: string;
  private login: string;
  private password: string;
  constructor(private authService:AuthService, private router: Router) { }

  ngOnInit() {
  }

  envoyerForm(){
    if(this.login=="agent" && this.password=="password"){
      console.log("Redirection vers la page de l'agent...");
      this.authService.setAuthenticated(true);
      this.router.navigate(['/agent/login'])
    }else{
      console.log("Mauvais login ou mot de passe !");
    }
  }
}

        { path: 'login', component: AgentLoginComponent},
        { path: 'customers', component: AgentCustomersManagComponent, canActivate: [LoginGuardService]},
        { path: '**', component: AgentLoginComponent,  canActivate: [LoginGuardService]},

import { Observable } from 'rxjs'; //Observable est une classe
const source=Observable.create(observer => { //on créé une source d'évènement
 observer.next(33); //lorsqu'il va s'inscrire, l'observeur va recevoir "33". ici pas très intéressant avec "33" mais une source d'évènement pourrait être du du REST par exemple.
});


const subscription=source.subscribe(val=>{
 console.log("Observer1 :"+val);
});

const inputObservable = Observable.of(1,2,6,4,12,3); //fonction statique de la classe Observable, émet une séquence d'évènements, il existe par exemple Observable.interval (1000), Observable.fromEvent, Observable.concat.... of sert souvent en tests unitaires pour injecter un faux flux de données. Ici on envoie n° par n° mais on reçoit souvent des tableaux.
observable.pipe(
//par exemple notre valeur est A
map(x=>x*5), //si c'est 1, je le multiplie par 5
filter(x=>x<45) //puis ce résultat je vérifie s'il est inférieur à 45
scan((acc,x)=>acc+x), //on l'aditioonne avec la valeur accumulé
tap(x=>console.log('TAP:',x)),
bufferCount(5)//une fois qu'on en a 5 on renvoie à l'observer, si on l'élève elles seront retournées à chaque fois

Modules

var appli = angular.module("maBelleAppli", []);
appli.controller("monBeauController", function($scope) { //"controller" est une fonction de module
    $scope.maBelleVariableDeScope = "valeurDeLaVariable";  //l'objet scope fait le lien entre la vue et le contrôleur
});

<div ng-app="maBelleAppli" ng-controller="monBeauController">
{{ maBelleVariableDeScope }}
</div>