مسیر دهی (Routing) در انگولار 7

یکشنبه ۲۱ دی ۱۳۹۹
بازدید ۱,۰۴۵ نفر
سعید سیفی زاده
(5 امتیاز از 1 رای)
Loading...

تصویر angular-7-routing_7216 مسیر دهی (Routing) در انگولار 7

مسیر دهی (Routing) در انگولار 7

در این بخش با یک مثال ساده و چند صفحه، چگونگی مسیردهی در انگولار 7 را بررسی خواهیم کرد. در این آموزش برنامه انگولار ما دارای سه صفحه به نام های Home، Login و Register خواهد بود. همچنین برای راحتی کار و تست برنامه هر کدام از این صفحات فقط یک متن ساده را در داخل خود نشان می دهد.

یک کامپوننت انگولار، کلاسی شامل منطق مربوط به کنترل یک بخشی از UI برنامه است. این کلاس زمانی که با دکوراتور @Component اعلان شود، به عنوان یک کامپوننت انگولار شناخته می شود. برای اطلاعات بیشتر در مورد کامپوننت ها به صفحه Angular Components مراجعه کنید.

کامپوننت صفحه Home و قالب آن

در داخل فولدر app یک فولدر جدید به نام home ایجاد کنید. سپس یک فایل با نام home.component.html در داخل آن ایجاد کنید. این فایل به عنوان قالب کامپوننت home استفاده می شود. کد HTML زیر را به آن اضافه کنید:

<h1>Home Page</h1>

1	<h1>Home Page</h1>

یک فایل دیگر با نام home.component.ts در داخل همان فولدر ایجاد کنید. این فایل شامل منطق مربوط به کامپوننت home است. کدهای تایپ اسکریپت زیر را به آن اضافه کنید:

import { Component } from '@angular/core';

@Component({ templateUrl: 'home.component.html' })
export class HomeComponent {}

import { Component } from '@angular/core';

@Component({ templateUrl: 'home.component.html' })

export class HomeComponent {}

یک فایل به نام index.ts در داخل فولدر home ایجاد کنید. این فایل توسط ابزار barrel برای export کردن کامپوننت ها از داخل فولدر home استفاده می شود. بنابراین برای import کردن آن ها در سایر فایل ها به جای نوشتن مسیر کامل کامپوننت (‘./home/home.component’) می توانیم از اسم فولدر (‘./home’) استفاده کنیم. کد تایپ اسکریپت زیر را به فایل barrel اضافه کنید:

export * from './home.component';

1	export * from './home.component';

کامپوننت صفحه Login و قالب آن

در داخل فولدر app یک فولدر جدید به نام login ایجاد کنید. سپس یک فایل با نام login.component.html در داخل آن ایجاد کنید. این فایل به عنوان قالب کامپوننت login استفاده می شود. کد HTML زیر را به آن اضافه کنید:

<h1>Login Page</h1>

1	<h1>Login Page</h1>

یک فایل دیگر با نام login.component.ts در داخل همان فولدر ایجاد کنید. این فایل شامل منطق مربوط به کامپوننت login است. کدهای تایپ اسکریپت زیر را به آن اضافه کنید:

import { Component } from '@angular/core';

@Component({ templateUrl: 'login.component.html' })
export class LoginComponent {}

import { Component } from '@angular/core';

@Component({ templateUrl: 'login.component.html' })

export class LoginComponent {}

یک فایل به نام index.ts در داخل فولدر login ایجاد کنید. این فایل، فایل barrel تایپ اسکریپت است. سپس کد زیر را در آن قرار دهید:

export * from './login.component';

1	export * from './login.component';

کامپوننت صفحه Register و قالب آن

در داخل فولدر app یک فولدر جدید به نام register ایجاد کنید. سپس یک فایل با نام register.component.html در داخل آن ایجاد کنید. این فایل به عنوان قالب کامپوننت register استفاده می شود. کد HTML زیر را به آن اضافه کنید:

<h1>Register Page</h1>

1	<h1>Register Page</h1>

یک فایل دیگر با نام register.component.ts در داخل همان فولدر ایجاد کنید. این فایل شامل منطق مربوط به کامپوننت register است. کدهای تایپ اسکریپت زیر را به آن اضافه کنید:

import { Component } from '@angular/core';

@Component({ templateUrl: 'register.component.html' })
export class RegisterComponent {}

import { Component } from '@angular/core';

@Component({ templateUrl: 'register.component.html' })

export class RegisterComponent {}

یک فایل به نام index.ts در داخل فولدر register ایجاد کنید. این فایل، فایل barrel تایپ اسکریپت است. سپس کد زیر را در آن قرار دهید:

export * from './register.component';

1	export * from './register.component';

افزودن کامپوننت ها به App Module

فایل /src/app/app.module.ts را با ویرایشگر خود باز کنید و کامپوننت ها را به آرایه declarations اضافه کنید. با این کار این کامپوننت ها در سایر بخش های برنامه در دسترسی خواهند بود.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { HomeComponent } from './home';
import { LoginComponent } from './login';
import { RegisterComponent } from './register';

@NgModule({
    imports: [BrowserModule],
    declarations: [
        AppComponent,
        HomeComponent,
        LoginComponent,
        RegisterComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule { };

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { HomeComponent } from './home';

import { LoginComponent } from './login';

import { RegisterComponent } from './register';

@NgModule({

imports: [BrowserModule],

declarations: [

AppComponent,

HomeComponent,

LoginComponent,

RegisterComponent

bootstrap: [AppComponent]

})

export class AppModule { };

پیکربندی ماژول App Routing

یک فایل جدید با نام app.routing.ts در داخل فولدر app ایجاد کنید. در یک برنامه انگولار مسریابی به صورت یک آرایه به نام Routes پیکربندی می شود. این آرایه مسیرها را در خود نگه می دارد. هر کامپوننت یک مسیر مختص به خودش را دارد. Router انگولار با توجه به آدرس موجود در آدرس بار مرورگر متوجه می شود که کدام کامپوننت را باید نمایش دهد. آرایه Routes به متد RouterModule.forRoot() که ماژول Routing را با مسیرهای پیکربندی شده ایجاد می کند، ارسال می شود. کد های زیر را به فایل app.routing.ts اضافه کنید:

import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home';
import { LoginComponent } from './login';
import { RegisterComponent } from './register';

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },

    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

export const appRoutingModule = RouterModule.forRoot(routes);

import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home';

import { LoginComponent } from './login';

import { RegisterComponent } from './register';

const routes: Routes = [

{ path: '', component: HomeComponent },

{ path: 'login', component: LoginComponent },

{ path: 'register', component: RegisterComponent },

// otherwise redirect to home

{ path: '**', redirectTo: '' }

];

export const appRoutingModule = RouterModule.forRoot(routes);

افزودن ماژول Routing به App Module

فایل /src/app/app.module.ts را با ویرایشگر خود باز کرده و مانند نمونه زیر ماژول routing (appRoutingModule) را به آرایه imports اضافه کنید. فایل app.module.ts به روز شده:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { appRoutingModule } from './app.routing';
import { AppComponent } from './app.component';
import { HomeComponent } from './home';
import { LoginComponent } from './login';
import { RegisterComponent } from './register';

@NgModule({
    imports: [
        BrowserModule,
        appRoutingModule
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        LoginComponent,
        RegisterComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule { };

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { appRoutingModule } from './app.routing';

import { AppComponent } from './app.component';

import { HomeComponent } from './home';

import { LoginComponent } from './login';

import { RegisterComponent } from './register';

@NgModule({

imports: [

BrowserModule,

appRoutingModule

declarations: [

AppComponent,

HomeComponent,

LoginComponent,

RegisterComponent

bootstrap: [AppComponent]

})

export class AppModule { };

افزودن Router Outlet و Navigation به کامپوننت App

فایل /src/app/app/component.html را با ویرایشگر خود باز کنید و تکه کد

Hello Angular 7!

را با کدهای زیر جایگزین کنید.

کامپوننت App شامل ناوبری اصلی است که در بالای صفحه نمایش داده می شود و محتوای کامپوننت App با توجه به آدرس موجود در آدرس بار مرورگر و صفحاتی که در بالا ایجاد کردیم، گرفته می شود.

دستورالعمل routerLink قابلیت جا به جایی بین مسیرهای مختلف را فعال می کند و دستورالعمل با توجه به مسیر فعلی کامپوننت را نمایش می دهد. محتوای فایل app.component.html باید مانند نمونه زیر باشد:

<!-- nav -->
<nav class="navbar navbar-expand navbar-dark bg-dark">
    <div class="navbar-nav">
        <a class="nav-item nav-link" routerLink="/">Home</a>
        <a class="nav-item nav-link" routerLink="/login">Login</a>
        <a class="nav-item nav-link" routerLink="/register">Register</a>
    </div>
</nav>

<!-- main content container -->
<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-sm-8 offset-sm-2">
                <router-outlet></router-outlet>
            </div>
        </div>
    </div>
</div>

<a class="nav-item nav-link" routerLink="/login">Login</a>

<a class="nav-item nav-link" routerLink="/register">Register</a>

</div>

</nav>

<router-outlet></router-outlet>

</div>

به روز رسانی پیکربندی Webpack Dev Server

کد زیر را به فایل webpack.config.js اضافه کنید تا زمانی که مرورگر را رفرش می کنید با خطای 404 مواجه نشید.

devServer: {
    historyApiFallback: true
}

devServer: {

historyApiFallback: true

}

فایل webpack.config.js باید مانند نمونه زیر باشد:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.ts',
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /.ts$/,
                use: ['ts-loader', 'angular2-template-loader']
            },
            {
                test: /.(html|css)$/,
                use: 'raw-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({ template: './src/index.html' })
    ],
    devServer: {
        historyApiFallback: true
    }
}