[Link]
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 .[Link] du dossier source de votre projet : modifiez
l'array styles
"../node_modules/bootstrap/dist/css/[Link]",
"[Link]"
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
[Link]
Exemple :
[Link]
<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 [Link]
[Link]
export class AppareilComponent implements OnInit {
appareilName: string = 'Machine à laver'; 1
appareilStatus: string = 'éteint'; 2
constructor() { }
Fichier TS -- selector: 'app-appareil', [Link] html <app-appareil></app-
appareil>
Pour afficher le code appareil html dans [Link]
[Link]
Ajouter une méthode
getStatus() {
return [Link];
}
Cette méthode ne fait que retourner la même valeur qu'avant
[Link]
export class AppComponent {
isAuth = false;
}
[Link]
<button class="btn btn-success" disabled>Tout allumer</button> 1
<button class="btn btn-success" [disabled]="!isAuth">Tout allume</button> 2
[Link]
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 :
export class AppComponent {
isAuth = false;
constructor() {
setTimeout(
() => {
[Link] = 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.
[Link]
export class AppComponent {
isAuth = false;
appareilOne = 'Machine à laver';
appareilTwo = 'Frigo';
appareilThree = 'Ordinateur';
constructor() {
[Link]
<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>
[Link]
[Link]
@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]="[Link]"
[appareilStatus]="[Link]"></app-appareil>
</ul>
<button class="btn btn-success"
[disabled]="!isAuth"
(click)="onAllumer()">Tout allumer</button>
</div>
</div>
</div>
[Link]
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@[Link]">
</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]="[Link]">Créer
mon compte</button>
</form>
<div class="dropdown-divider"></div>
<p class="text-danger">{{ errorMessage }}</p>
</div>