15.06.2018 Views

Anglar6 tutorial

A tutorial for Angular6. Please have a look to the Github repository NGNews6.

A tutorial for Angular6. Please have a look to the Github repository NGNews6.

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

é<br />

Angular<br />

© Gérald Abbadie 2018<br />

On peut aussi ouvrir une adresse en important la classe Router et en l’instanciant de la même<br />

manière dans le constructeur. Nous pouvons ensuite activer la navigation depuis le composant<br />

et passer des paramètres :<br />

this.router.navigate(['/product-details', id]);<br />

Les services & l'appel de données<br />

Les services sont des injectables. Ils sont dédiés à être partagés entre différents composants et<br />

donc particulièrement adaptés au chargement de données externes.<br />

Créer un service<br />

La commande est simple :<br />

ou<br />

ng generate service monServ<br />

ng g s monServ<br />

Pour mémoire, les services sont effectivement instanciés<br />

dans le tableau des providers du module qui<br />

le déclare<br />

Notre service sera automatiquement injecté dans le module, dans le tableau "providers". Il peut<br />

être ensuite instancié dans des composants :<br />

constructor(private donnees:AnewsService){}<br />

Il peut ainsi être utilisé dans le code, ses propriétés et méthodes publiques peuvent ainsi devenir<br />

accessibles au composant :<br />

this.actuId = this.donnees.getInfos();<br />

mais aussi dans le template du composant :<br />

{{donnees.article}}<br />

C'est redoutablement efficace pour une gestion centralisée des données.<br />

Appeler des données externes<br />

Plusieurs mécaniques sont nécessaires au chargement et à l’exploitation des données. HttpClient<br />

fournie par Angular est la classe de base pour l'appel de données en Ajax. Elle doit être<br />

importée et instanciée. Voici un exemple :<br />

27

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!