Cours Angular

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
<li class="list-group-item">
<h4>Appareil : {{ appareilName }}-- Statut : {{ appareilStatus }}</h4> 1
<h4>Appareil : {{ appareilName }} -- Statut : {{ getStatus() }}</h4> 2
</li>
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
export class AppareilComponent implements OnInit {
appareilName: string = 'Machine à laver'; 1

appareilStatus: string = 'éteint'; 2
constructor() { }
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
getStatus() {
return this.appareilStatus;
}
Cette méthode ne fait que retourner la même valeur qu'avant
app.component.TS
export class AppComponent {

isAuth = false;
}
app.component.html
<button class="btn btn-success" disabled>Tout allumer</button> 1
<button class="btn btn-success" [disabled]="!isAuth">Tout allume</button> 2

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 :

isAuth = false;
constructor() {
setTimeout(
() => {
this.isAuth = true;
}, 4000
);
}
}
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é :
<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>
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
isAuth = false;
appareilOne = 'Machine à laver';

appareilTwo = 'Frigo';
appareilThree = 'Ordinateur';
constructor() {
app.component.HTML
<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>
app.component.TS
@Input() appareilName: string;
@Input() appareilStatus: string;
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
<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>
*ngFor
la directive *ngFor="let obj of myArray" à un component, Angular itérera l'array myArray et affichera un
component par objet obj
appareils = [
{
name: 'Machine à laver',
status: 'éteint'
},
{
name: 'Frigo',
status: 'allumé'
},
{
name: 'Ordinateur',
status: 'éteint'
}
];
Vous avez un array avec trois objets, chaque objet ayant une propriété name et une propriété status
<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>
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>

Cours Angular

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Cours Angular

Hochgeladen von

Copyright:

Verfügbare Formate

https://my-dream-app-f5994.firebaseio.

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

ng serve : lancer le serveur de développement local

ouvrez votre navigateur à localhost:4200

2 : La structure des components d'une application Angular

3 : Découvrez la structure du code

Dossier e2e : est généré pour les tests end-to-end

ng generate component EditAppareilComponent

export class AppareilComponent implements OnInit {

appareilName: string = 'Machine à laver'; 1

Fichier TS -- selector: 'app-appareil', App.component html <app-appareil></app-

Pour afficher le code appareil html dans app.commonent.html

Cette méthode ne fait que retourner la même valeur qu'avant

export class AppComponent {

<button class="btn btn-success" disabled>Tout allumer</button> 1

<button class="btn btn-success" [disabled]="!isAuth">Tout allume</button> 2

export class AppComponent {

Ajouter une fonctionnalité :

<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

on utilise les parenthèses () pour créer une liaison à un événement.

appareilOne = 'Machine à laver';

*ngIf="appareilStatus === 'éteint'"></div>

<h4>Appareil : {{ appareilName }} -- Statut : {{ getStatus() }}</h4>

<input type="text" class="form-control" [(ngModel)]="appareilName">

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

<form [formGroup]="signupForm" (ngSubmit)="onSubmit()" class="px-4 py-3">

<label for="exampleDropdownFormEmail1">Email address</label>

<button type="submit" class="btn btn-primary" [disabled]="signupForm.invalid">Créer

Das könnte Ihnen auch gefallen