# MonProjetAngular

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.11.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

-------------------------------------------------------
Run `ng g c nom_du_component` pour générer automatiquement un nouveau component

-------------------------------------------------------------------
## [ngClass] :
permet d'attribué une classe à la balise html en fonction des conditions

## [ngStyle] :
permet de modifier le style de la balise html en fonction d'une fonction
-------------------------------------------------------------------

## Interpolation :
intégrer une donnée venant du type script vers ce template appareilName est une donnée provenant du typeScript

------------------------------------------------------------------
## *ngIf : condition
condition pour que ce bloc apparaisse

## *ngFor : elem for array
agit comme un foreach
-----------------------------------------------------------------
## Property binding
[] : pour lier a une propriété => donnée vers la vue

en gros, c'est pour dire que la valeur de l'attribut dans l'objet du component aura la valeur à droite du égal(=).
ex :

**dans le component**
Class AppareilComponent {
@Input() appareilName : string; //sera initialiser dans l'html
}
**Dans l'html**
<app-appareil [appareilName]="'ordi'"></app-appareil>

() : pour réagir a un évènement => vue vers la donnée
C'seet a dire qu'un évènement correspond a une action/modification sur les données.
exemple :
<button (click)="onAllumer()"> Tout allumer </button>

------------------------------------------------------------------

## Un service :
un service c'est une facon de centraliser du code et des données utilisés par différentes parties de votre application.

Pour être utiliser dans une application, un service doit être injecter. Il existe manière d'injecter un service :
- 1) **Dans app-module** : donc le service sera disponible pour tout les components de l'application et pour les autres services de l'application
(une seule instance du service)

- 2) **Dans app.component** : le service sera disponible pour tous les components de l'application mais ***pas*** pour les autres services.
(une seule instance du service)

- 3) **Dans un component** : alors le service sera disponible ***que*** pour le component et ses fils. Et il y aura autant d'instance du service que d'instance du components.

Dans l'objet du service on stocke dans une variable les données.

Puis on crée des méthodes qui peuvent modifier/s'appliquer au données
***ex :***
export class AppareilService{
data = [data1, data2, data3 ...]

pas besoin de constructeur

/** les méthodes qui s'appliquent/modifient les données */
}
## ---------------------------------------------------------
**grace a cette méthode on dit à angular qu'a la création/initialisation de ce component, this.appareils sera égale au tableau appareilService du service**

Pour utiliser cette méthode, il faut que la classe implements OnInit

export class AppComponent implements OnInit{
appareils : any[]; // un tableau de type any
...

**on passe le service en parametre**
constructor(private ***appareilSercice***: AppareilService){
...
}
...
ngOnInit(): void {
this.appareils = this.***appareilSercice***.appareils;
}
}
##---------------------------------------
Routing
##---------------------------------------
Pour créer des routes il faut se placer dans :
**app.module.ts**

et faire ceci :
''' javascript
import {Routes} from "@angular/router";
const appRoutes : Routes = [
/** on spécifile le path et le component qui correspond */
{ path : 'appareils', component: AppareilViewComponent },
{ path : 'auth', component: AuthComponent },
{ path : '', component: AppareilViewComponent }//redirection quand c'est vide
]

'''