دورة ANGULAR الدرس الثامن عشر


فهاد الدرس الثامن عشر والاخير من دورة angular js غادي نشوفوا أخر حاجة بقات لي هي نعرض القائمة الخاصة بالمستخدم فاش يكون مكونيكطي والعكس وأيضا نمنع العرض ديال ل contacts إلا يلا كان المستخدم connecté.


1- تعديل الملف home.component.ts

غادي نمشيو للملف الرئيسي ديالنا غادي نديرو عليه تعديل فل fonction ngOnInit فيها كنتحقق واش المستخدم مكونيكطي يلا كان كنعرض les contacts مكانش كنوجهوا للملف الخاص بتسجيل الدخول.

الكود ديال ل fonction ngOnInit بعد التعديل هو :

                                //
ngOnInit() {
    // this.Nom = "samadi";
    // this.Prenom = "samir";
    // this.Tel = 123456789;
     if(this.userService.isLoggedIn() !== null){
       this.Date = new Date();
       // // this.Contacts = [
       //       {nom:"samadi",prenom : "samir",tel:"123456789",status:"active"},
       //       {nom: "alaoui", prenom : "karim", tel: "123456789",status:"active"},
       //       {nom:"ahmadi",prenom : "amine",tel:"123456789",statue:"inactive"},
       //   ];
       this.contactService.getContacts().subscribe(
         (response: Contact[]) => {
           this.Contacts = response;
         }
       );
     }else{
        this.router.navigate(['/login']);
     }
    // console.log(this.Contacts);
  }
                            

2- تعديل الملف app.component.ts

غادي نمشي للملف app.component.ts كنزيد user جديد سميتو  existingUser لي غادي يكون فيه المستخدم لي مكونيكطي من بعد من سترجعوه من local storage.

كنزيد أيضا variable logged لي بها كنتحقق واش المستخدم connecté أو لا لا.

فل fonction ngOnInit فيها كنتحقق واش المستخدم مكونيكطي يلا كان كنعطي ل logged true وكنسترجع المستخدم من localstorage ونعطيه ل variable existingUser مكانش كنعطي ل logged false.

كنزيد أيضا ل fonction logout لي كتديكونيكطي المستخدم وكتوجهوا للصفحة الرئيسية.

الكود ديال app.component.ts بعد التعديل هو :

                                //
import { Component } from '@angular/core';
import {UserService} from './user.service';
import {User} from './user';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ContactsApp';
  logged : boolean = false;
  existingUser : User = new User();


  constructor(private userService: UserService, private router: Router){}

  ngOnInit(){
    if (this.userService.isLoggedIn() !== null){
      this.logged = true;
      this.existingUser = this.userService.isLoggedIn();
    }else{
      this.logged = false;
    }
  }

  logout(){
    this.userService.signOut();
    this.logged = false;
    this.router.navigate(['/login']);
  }
}
                            

3- تعديل الملف app.component.html

غادي نمشي للملف app.component.html لي فيه القائمة ديالي فيه كنتحقق ب directive *ngIf يلا كانت ل varibale logged لي زدنا كتساوي true كنعرض ل email ديال المستخدم لي كنرجعوا من existingUser لي زدنا قبل.

كنعرض أيضا رابط الخروج لي فاش كنضغط عليه كتنفذ ل fonction logout لي سبق وزدنا.

مكانتش كنعرض روابط ل inscription ول connexion.

الكود ديال app.component.html بعد التعديل هو :




                                //
<header id="header">
  <nav class="navbar navbar-expand-lg px-4">
      <a class="navbar-brand">Angular contacts app</a>
      <button class="navbar-toggler" data-toggle="collapse" data-target="#collapse">
          <span class="toggler-icon">
            <i class="fa fa-bars"></i>
          </span>
      </button>
      <div class="collapse navbar-collapse" id="collapse">
          <ul class="navbar-nav text-capitalize">
            <li class="nav-item active">
              <a routerLink="home" class="nav-link">Accueil</a>
            </li>
            <li class="nav-item" *ngIf="logged">
              <a routerLink="add" class="nav-link">Ajouter</a>
            </li>
            <li class="nav-item" *ngIf="logged">
              <a class="nav-link">{{existingUser.email}}</a>
            </li>
              <li class="nav-item" *ngIf="logged">
              <a style="cursor: pointer" (click)="logout()" class="nav-link">Déconnexion</a>
            </li>
            <li class="nav-item" *ngIf="!logged">
              <a routerLink="auth" class="nav-link">Inscription</a>
            </li>
            <li class="nav-item" *ngIf="!logged">
              <a routerLink="login" class="nav-link">Connexion</a>
            </li>
          </ul>
      </div>
  </nav>
</header>
<div class="container-fluid">
  <router-outlet></router-outlet>
</div>