Angular 2
Directives et services généralement intégrés

Introduction

Classe d'emplacement

L'emplacement est un service que les applications peuvent utiliser pour interagir avec l'URL d'un navigateur. Selon l'emplacement utilisé, Location restera dans le chemin de l'URL ou dans le segment de hachage de l'URL.

Location est responsable de la normalisation de l'URL par rapport à la base href de l'application.

import {Component} from '@angular/core';
import {Location} from '@angular/common';

@Component({
    selector: 'app-component'
})
class AppCmp {

  constructor(_location: Location) {

    //Changes the browsers URL to the normalized version of the given URL, 
    //and pushes a new item onto the platform's history.
    _location.go('/foo');

  }

  backClicked() {
    //Navigates back in the platform's history.
    this._location.back();
  }

  forwardClicked() {
    //Navigates forward in the platform's history.
    this._location.back();
  }
}

AsyncPipe

Le canal asynchrone s'abonne à un objet Observable ou Promise et renvoie la dernière valeur émise. Lorsqu'une nouvelle valeur est émise, le tuyau asynchrone marque le composant à vérifier pour les modifications. Lorsque le composant est détruit, le canal asynchrone se désabonne automatiquement pour éviter les fuites de mémoire potentielles.

@Component({
  selector: 'async-observable-pipe',
  template: '<div><code>observable|async</code>: Time: {{ time | async }}</div>'
})
export class AsyncObservablePipeComponent {
  time = new Observable<string>((observer: Subscriber<string>) => {
    setInterval(() => observer.next(new Date().toString()), 1000);
  });
}

Affichage de la version angulaire2 actuelle utilisée dans votre projet

Pour afficher la version actuelle, nous pouvons utiliser la version de @ package angulaire / core.

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

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
  <h2>Current Version: {{ver}}</h2>
  `,
})
export class AppComponent  {
   name = 'Angular2'; 
   ver = VERSION.full;
}

Tuyau de monnaie

Le canal de devise vous permet de travailler avec vos données sous forme de nombres normaux, mais de les afficher avec le format de devise standard (symbole monétaire, décimales, etc.) dans la vue.

@Component({
  selector: 'currency-pipe',
  template: `<div>
    <p>A: {{myMoney | currency:'USD':false}}</p>
    <p>B: {{yourMoney | currency:'USD':true:'4.2-2'}}</p>
  </div>`
})
export class CurrencyPipeComponent {
  myMoney: number = 100000.653;
  yourMoney: number = 5.3495;
}

Le tuyau prend trois paramètres facultatifs:

• currencyCode : Vous permet de spécifier le code de devise ISO 4217.
• symbolDisplay : Booléen indiquant s'il faut utiliser le symbole monétaire
• digitInfo : vous permet de spécifier comment les décimales doivent être affichées.

Plus de documentation sur le canal des devises: https://angular.io/docs/ts/latest/api/common/index/CurrencyPipe-pipe.html