ناوبری در اپلیکیشن انگولار — به زبان ساده

زمانی که صفحه‌ای را رفرش یا بارگذاری مجدد می‌کنید در عمل فایل index.html را بارگذاری مجدد می‌کنید که به نوبه خود همه فایل‌های جاوا اسکریپت و CSS را بارگذاری مجدد می‌کند. برخی اوقات باید از یک اپلیکیشن تک‌صفحه‌ای به اپلیکیشن دیگری حرکت کنیم. در این مقاله با روش‌های مختلف ناوبری در اپلیکیشن انگولار برای جابجایی به وب‌سایت‌های بیرونی یا هر اپلیکیشن انگولار دیگر آشنا می‌شویم.

رفتار اپلیکیشن‌های تک‌صفحه‌ای متفاوت است. این اپلیکیشن‌ها هر زمان که شما داده‌هایی را از سرور دریافت می‌کنید، صفحه را بارگذاری مجدد نمی‌کنند. این اپلیکیشن‌ها صرفاً فایل index.html را بارگذاری می‌کنند که شامل همه فایل‌های CSS و جاوا اسکریپت ضروری است. کل اپلیکیشن و هر مورد مرتبط با فریمورک در همین فایل‌های جاوا اسکریپت قرار دارد. به محض این که فایل index.html بارگذاری شود، فایل‌های جاوا اسکریپت در مرورگر رندر می‌شوند و فریمورک انگولار آغاز به کار کرده و عملیاتی می‌شود.

پروژه نمونه

در این بخش یک پروژه نمونه برای نمایش چهار روش مختلف ناوبری در اپلیکیشن انگولار معرفی می‌کنیم.

فیلم آموزش نود جی اس، انگولار و مونگو دی بی – طراحی سایت خبری با Angular ،Node.js و MongoDB در فرادرس

کلیک کنید

این پروژه (+) را می‌توانید به صورت زیر کلون کرده و روی سیستم لوکال خود اجرا کنید:

// clone the project
git clone https://github.com/bbachi/angular-navigate-external.git

// install and run
npm install
npm start

جابجایی با شیء Window

شیء Window یک شیء سراسری و نماینده پنجره باز مرورگر است. همه تابع‌ها و متغیرهای سراسری در واقع مشخصه‌های شیء Window هستند. تابع‌های سراسری به متدهای Window و متغیرهای سراسری به مشخصه‌های شیء Window تبدیل می‌شوند. امکان دسترسی به سند با استفاده از Window به صورت زیر وجود دارد:

1window.document.getElementById("myid");

حتی می‌توان به URL مرورگر در شیء window.location به صورت زیر دسترسی یافت:

1console.log(window.location.href)

در ادامه یک کامپوننت با استفاده از دستور ng g c windowobj می‌سازیم و کدهای زیر را در آن قرار می‌دهیم:

فایل windowobj.component.css

1.windowobj {
2    width: 50%;
3    padding: 1%;
4    color: black;
5    text-align: center;
6    background-color: lightgray;
7    margin-left: 5%;
8}
9
10.mrgtop {
11    margin-top: 30px;
12}

فایل windowobj.component.html

1<div class="windowobj mrgtop">
2    <h2>With window.location.href</h2>
3    <button class="btn btn-primary" (click)="OnClick()">Click Here to go google.com</button>
4</div>

فایل windowobj.component.ts

1import { Component, OnInit } from '@angular/core';
2
3@Component({
4  selector: 'app-windowobj',
5  templateUrl: './windowobj.component.html',
6  styleUrls: ['./windowobj.component.css']
7})
8export class WindowobjComponent implements OnInit {
9
10  constructor() { }
11
12  ngOnInit() {
13  }
14
15  OnClick() {
16    console.log(window.location.href)
17    window.location.href = "https://www.google.com"
18  }
19
20}

شکل ظاهری این کامپوننت به صورت زیر است و زمانی که روی دکمه کلیک کنیم به صفحه اصلی وب‌سایت گوگل هدایت می‌شویم:

جابجایی با تگ href

این ساده‌ترین روش برای جابجایی محسوب می‌شود. تگ <a> نماینده یک هایپرلینک به صفحه دیگر است. خصوصیت href نشانی مقصد را نشان می‌دهد. با استفاده از دستور ng g c withhref کامپوننت را می‌سازیم و فایل‌های زیر را در آن قرار می‌دهیم:

فایل withhref.component.css

1.windowobj {
2    width: 50%;
3    padding: 1%;
4    color: black;
5    text-align: center;
6    background-color: lightgray;
7    margin-left: 5%;
8}
9
10.mrgtop {
11    margin-top: 30px;
12}

فایل withhref.component.html

1<div class="windowobj mrgtop">
2    <h2>With anchor tag</h2>
3    <a href="https://www.google.com">Click Here to go google.com</a>
4</div>

شکل ظاهری این کامپوننت در مرورگر به صورت زیر است و زمانی که روی لینک کلیک کنیم به صفحه اصلی وب‌سایت گوگل هدایت می‌شویم:

جابجایی با Resolver

دو روش قبلی که بررسی کردیم، پیش از هدایت کاربر به وب‌سایت بیرونی، هیچ چیزی را بررسی نمی‌کردند. برای نمونه مواردی مانند مجوز یا دسترسی کاربر بررسی نمی‌شوند. با استفاده از Resolver می‌توان پیش از ارسال درخواست ناوبری آن را اعتبارسنجی کرد.

ابتدا باید Resolver را تعریف کنیم و سپس آن را در فایل Resolver بگنجانیم:

فایل app.module.ts

1import { BrowserModule } from '@angular/platform-browser';
2import { NgModule } from '@angular/core';
3
4import { AppResolve } from './_resolvers/app.resolver'
5
6import { AppRoutingModule } from './app-routing.module';
7import { AppComponent } from './app.component';
8import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
9import { WindowobjComponent } from './windowobj/windowobj.component';
10import { WithhrefComponent } from './withhref/withhref.component';
11import { WithjqueryComponent } from './withjquery/withjquery.component';
12import { WithresolverComponent } from './withresolver/withresolver.component';
13import { BlankComponent } from './blank.component';
14
15@NgModule({
16  declarations: [
17    AppComponent,
18    WindowobjComponent,
19    WithhrefComponent,
20    WithjqueryComponent,
21    WithresolverComponent,
22    BlankComponent
23  ],
24  imports: [
25    BrowserModule,
26    AppRoutingModule,
27    BrowserAnimationsModule
28  ],
29  providers: [
30    AppResolve
31  ],
32  bootstrap: [AppComponent]
33})
34export class AppModule { }

فایل app.resolver.ts

1import { Injectable } from '@angular/core';
2import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
3import { Observable } from 'rxjs';
4
5@Injectable()
6export class AppResolve implements Resolve<any> {
7
8  constructor() {}
9
10  resolve(route: ActivatedRouteSnapshot): any {
11      window.location.href = "https://www.google.com";
12      return true;
13  }
14
15}

باید resolver را در فایل app-routing.module.ts تعریف کنیم:

1import { NgModule } from '@angular/core';
2import { Routes, RouterModule } from '@angular/router';
3import { AppResolve } from './_resolvers/app.resolver';
4import { BlankComponent } from './blank.component';
5
6
7const routes: Routes = [
8  { path: 'paymentmethod.htm',
9      component: BlankComponent,
10      resolve: {
11        appResolve: AppResolve
12      }
13    },
14];
15
16@NgModule({
17  imports: [RouterModule.forRoot(routes)],
18  exports: [RouterModule]
19})
20export class AppRoutingModule { }

در نهایت فایل‌های کامپوننت ما به شرح زیر هستند:

فایل withresolver.component.html

1<div class="windowobj mrgtop">
2    <h2>With Resolver</h2>
3    <button class="btn btn-danger" (click)="onSubmit()">Click Here to submit form</button>
4</div>

فایل withresolver.component.ts

1import { Component, OnInit } from '@angular/core';
2import { Router, ActivatedRoute } from '@angular/router';
3
4@Component({
5  selector: 'app-withresolver',
6  templateUrl: './withresolver.component.html',
7  styleUrls: ['./withresolver.component.css']
8})
9export class WithresolverComponent implements OnInit {
10
11  constructor(private router: Router, private route: ActivatedRoute,) { }
12
13  ngOnInit() {
14  }
15
16  onSubmit() {
17    this.router.navigate(['paymentmethod.htm'])
18  }
19
20}

شکل کلی این کامپوننت در مرورگر به صورت زیر است و زمانی که کاربر روی دکمه کلیک کند، به resolver می‌رود و سپس کاربر را ریدایرکت می‌کند:

جابجایی با Jquery

همه روش‌های قبلی که بحث شدند، در واقع درخواست‌های Get هستند. معنی آن این است که نمی‌توان دادهای زیادی به مقصد ارسال کرد. امکان ارسال مواردی با پارامترهای query وجود دارد اما مقدار داده‌هایی که ارسال می‌شوند محدود هستند و هیچ نوع امنیتی نیز ندارند.

در این وضیعت اگر بخواهیم به یک وب‌سایت بیرونی برویم و همراه با این جابجایی مقداری داده با خود ببریم و نخواهیم از پارامترهای query استفاده کنیم، ساده‌ترین راه حل استفاده از jquery است. ابتدا باید jquery را با دستور زیر نصب کنیم:

npm install jQuery –save

سپس خط زیر را در بخش اسکریپت‌های فایل angular.json می‌نویسیم:

همچنین باید jquery را به صورت یک متغیر سراسری اعلان کرده و از آن به روش معمول در کامپوننت استفاده کنیم. فایل component.ts به صورت زیر است:

1import { Component, OnInit } from '@angular/core';
2
3declare var jQuery: any;
4
5@Component({
6  selector: 'app-withjquery',
7  templateUrl: './withjquery.component.html',
8  styleUrls: ['./withjquery.component.css']
9})
10export class WithjqueryComponent implements OnInit {
11
12  constructor() { }
13
14  ngOnInit() {
15  }
16
17  onSubmit() {
18    jQuery("#value1").val("some value");
19    jQuery("#value2").val("value 2");
20    jQuery("#formid").attr("action", "someform.htm").submit();
21  }
22
23}

فرم تعریف شده در فایل HTML به صورت زیر است. به id-های فرم و شیوه تنظیم داده‌ها با jQuery برای value1 و value2 دقت کنید.

فایل withjquery.component.html

1<div class="windowobj mrgtop">
2    <h2>With Jquery</h2>
3    <button class="btn btn-warning" (click)="onSubmit()">Click Here to submit form</button>
4    <form #form id="formid" name="formid" method="post">
5        <input type="hidden" id="value1" name="value1" value="ramdom val"/>
6        <input type="hidden" id="value2" name="value2" value="other val"/>
7    </form>
8</div>

نمایش آن در مرورگر به صورت زیر است و زمانی که روی دکمه کلیک کنید، Jquery فرم را با همه داده‌های آن به URL شکل someform.htm تحویل می‌دهد.

با استفاده از ابزارهای توسعه‌دهنده (DevTools) مرورگر می‌توانیم ببینیم که فرم و داده‌ها تحویل می‌شوند. حتی با این که URL ساختگی است، می‌توانید عملکرد آن را بررسی کنید:

جمع‌بندی

در این بخش مواردی که در این مقاله مطرح شد را جمع‌بندی می‌کنیم.

• اپلیکیشن‌های تک‌صفحه‌ای فایل index و همه فایل‌های ضروری CSS و جاوا اسکریپت را در آغاز بارگذاری دانلود می‌کنند.
• برخی اوقات باید از یک اپلیکیشن تک‌صفحه‌ای به وب‌سایت دیگری برویم. برای نمونه فرض کنید می‌خواهیم به سایت پرداخت برویم و بازگردیم.
• چهار روش برای ناوبری به وب‌سایت خارجی وجود دارد که شامل استفاده از تگ href، شیء Window، resolver و تحویل فرم Jquery هستند.
• روش‌های href و window روش‌های چندان ساده‌ای برای اعتبارسنجی درخواست کاربر پیش از ناوبری محسوب نمی‌شوند.
• در انگولار می‌توان از resolver برای اعتبارسنجی استفاده کرد.
• تحویل فرم jQuery برای ارسال داده‌ها روشی آسان است.

سخن پایانی

ناوبری در اپلیکیشن انگولار به یک وب‌سایت بیرونی امری کاملاً رایج است. شما می‌توانید هر یک از روش‌های چهارگانه‌ای که در این راهنما معرفی کردیم را به این منظور انتخاب کرده و بسته به نیازتان مورد استفاده قرار دهید. اگر یک درخواست Get بدون داده‌های فرم است می‌توانید هر یک از سه روش href ،window و resolver را انتخاب کنید، اما اگر می‌خواهید حجم زیادی از داده‌ها را نیز همراه با ناوبری حمل کنید، بهتر است از jQuery بهره بگیرید.

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برای شما مفید بوده است آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های JavaScript (جاوا اسکریپت)
• مجموعه آموزش‌های برنامه‌‌نویسی
•  آموزش مقدماتی AngularJS برای ساخت اپلیکیشن‌های تک‌صفحه‌ای
• Lazy Loading در انگولار — به زبان ساده
• ۱۰ قابلیت مفید انگولار که احتمالاً از وجودشان اطلاع ندارید — راهنمای کاربردی

==