Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

https://my-dream-app-f5994.firebaseio.com/ 1 :créez un nouveau projet ng new DI

https://my-dream-app-f5994.firebaseio.com/ 1 :créez un nouveau projet ng new DIGIS --skip-tests=true (Le second flag annule la création des fichiers test) exécuter une commande pour installer Bootstrap dans votre projet : npm install bootstrap@3.3.7 –save Ouvrez le fichier .angular-cli.json du dossier source de votre projet : modifiez l'array styles "../node_modules/bootstrap/dist/css/bootstrap.css", "styles.scss" ng serve : lancer le serveur de développement local ouvrez votre navigateur à localhost:4200 2 : La structure des components d'une application Angular Les components sont les composantes de base d'une application Angular : une application est une arborescence de plusieurs components. 3 : Découvrez la structure du code Dossier e2e : est généré pour les tests end-to-end dossier node_modules : contient toutes les dépendances pour votre application : les fichiers source Angular et TypeScript dossier src : où vous trouverez tous les fichiers sources pour votre application <app-root>  selector : il s'agit du nom qu'on utilisera comme balise HTML pour afficher ce component, comme vous l'avez vu avec <app-root> . Ce nom doit être unique et ne doit pas être un nom réservé HTML de type <div> , <body> etc. On utilisera donc très souvent un préfixe comme app , par exemple ;  templateUrl : le chemin vers le code HTML à injecter ;  styleUrls : un array contenant un ou plusieurs chemins vers les feuilles de styles qui concernent ce component ; Créez un component ng generate component EditAppareilComponent https://my-dream-app-f5994.firebaseio.com/ Exemple : appareil.component.html les doubles accolades {{ }} . Ce qui se trouve entre les doubles accolades correspond à l'expression TypeScript que nous voulons afficher, l'expression la plus simple étant une variable. D'ailleurs, puisque la variable appareilName n'existe pas encore, votre navigateur n'affiche rien à cet endroit pour l'instant. Ouvrez maintenant appareil.component.ts appareil.component.ts Fichier TS -- selector: 'app-appareil', App.component html <app-appareil></app- appareil> Pour afficher le code appareil html dans app.commonent.html appareil.component.ts Ajouter une méthode Cette méthode ne fait que retourner la même valeur qu'avant app.component.TS app.component.html <li class="list-group-item"> <h4>Appareil : {{ appareilName }}-- Statut : {{ appareilStatus }}</h4> 1 <h4>Appareil : {{ appareilName }} -- Statut : {{ getStatus() }}</h4> 2 </li> export class AppareilComponent implements OnInit { appareilName: string = 'Machine à laver'; 1 appareilStatus: string = 'éteint'; 2 constructor() { } getStatus() { return this.appareilStatus; } export class AppComponent { isAuth = false; } <button class="btn btn-success" disabled>Tout allumer</button> 1 <button class="btn btn-success" [disabled]="!isAuth">Tout allume</button> 2 https://my-dream-app-f5994.firebaseio.com/ La propriété disabled permet de désactiver le bouton. Afin de lier cette propriété au TypeScript, il faut le mettre entre crochets [] et l'associer à la variable. Le point d'exclamation fait que le bouton est désactivé lorsque isAuth === false méthode : créerez une timeout qui associe la valeur true à isAuth après 4 secondes (pour simuler, par exemple, le temps d'un appel API). Ajouter une fonctionnalité : Ajouter une fonctionnalité liée à l'événement "click" (déclenché quand l'utilisateur clique dessus) on utilise les parenthèses () pour créer une liaison à un événement. app.component.TS app.component.HTML export class AppComponent { isAuth = false; constructor() { setTimeout( () => { this.isAuth = true; }, 4000 ); } } <button class="btn btn-success" disabled>Tout allumer</button> 1 <button class="btn btn-success" [disabled]="!isAuth">Tout allume</button> 2 <button class="btn btn-success" [disabled]="!isAuth" (click)="onAllumer()">Tout allume</button> export class AppComponent { isAuth = false; appareilOne = 'Machine à laver'; appareilTwo = 'Frigo'; appareilThree = 'Ordinateur'; constructor() { <ul class="list-group"> <app-appareil [appareilName]="appareilOne" [appareilStatus]="'éteint'"></app- appareil> <app-appareil [appareilName]="appareilTwo" [appareilStatus]="'allumé'"></app- appareil> <app-appareil [appareilName]="appareilThree" [appareilStatus]="'éteint'"></app- appareil> </ul> https://my-dream-app-f5994.firebaseio.com/ app.component.TS Les Directives Structurelles : *ngIf : pour afficher des données de façon conditionnelle *ngFor : pour itérer des données dans un array, par exemple *ngFor la directive *ngFor="let obj of myArray" à un component, Angular itérera l'array myArray et affichera un component par objet obj Vous avez un array avec trois objets, chaque objet ayant une propriété name et une propriété status @Input() appareilName: string; @Input() appareilStatus: string; <li class="list-group-item"> <div style="width:20px;height:20px;background-color:red;" *ngIf="appareilStatus === 'éteint'"></div> <h4>Appareil : {{ appareilName }} -- Statut : {{ getStatus() }}</h4> <input type="text" class="form-control" [(ngModel)]="appareilName"> </li> appareils = [ { name: 'Machine à laver', status: 'éteint' }, { name: 'Frigo', status: 'allumé' }, { name: 'Ordinateur', status: 'éteint' } ]; <div class="container"> <div class="row"> <div class="col-xs-12"> <h2>Mes appareils</h2> <ul class="list-group"> <app-appareil *ngFor="let appareil of appareils" [appareilName]="appareil.name" [appareilStatus]="appareil.status"></app-appareil> </ul> <button class="btn btn-success" [disabled]="!isAuth" (click)="onAllumer()">Tout allumer</button> </div> </div> </div> https://my-dream-app-f5994.firebaseio.com/ directives par attribut ngStyle : permet d'appliquer des styles à un objet du DOM de manière dynamique ng new bibliotheque --style=scss --skip-tests=true ng g c auth/signup inscrire un nouveau utilisateur ng g c auth/signin connexion un utilisateur existant ng g c header ? ng g s services/auth ng g s services/auth-guard npm install bootstrap –save npm install firebase --save ng g c Accueil <router-outlet></router-outlet> <div class="dropdown-menu"> <form [formGroup]="signupForm" (ngSubmit)="onSubmit()" class="px-4 py-3"> <h2>Créer un compte</h2> <div class="form-group" > <label for="exampleDropdownFormEmail1">Email address</label> <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com"> </div> <div class="form-group"> <label for="exampleDropdownFormPassword1">Mot de passe</label> <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password"> </div> <button type="submit" class="btn btn-primary" [disabled]="signupForm.invalid">Créer mon compte</button> </form> <div class="dropdown-divider"></div> <p class="text-danger">{{ errorMessage }}</p> </div> uploads/s3/ cours-angular.pdf