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

  • یکشنبه ۲۱ دی ۱۳۹۹
  • بازدید ۲۰۸ نفر

angular 7 routing 7216 تصویر

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

فایل /src/app/app/component.html را با ویرایشگر خود باز کنید و تکه کد <h1>Hello Angular 7!</h1> را با کدهای زیر جایگزین کنید.

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

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

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

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

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

اجرای برنامه انگولار

دستور npm start را از فولدر ریشه برنامه (جایی که فایل package.json قرار داره) اجرا کنید تا برنامه در مرورگر اجرا شود.

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است