آموزش مسیریابی در برنامه نویسی اورلیا

آموزش مسیریابی در برنامه نویسی اورلیا

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش مسیریابی در برنامه نویسی اورلیا خواهیم پرداخت.

مسیریابی بخش مهمی از هر برنامه است. در این درس، شما می آموزید که چگونه از روتر در چارچوب اورلیا استفاده کنید.

مرحله ۱ – ایجاد صفحات

ما قبلاً در یکی از فصل های قبلی یک پوشه کامپوننت ایجاد کرده ایم. اگر قبلاً آن را ایجاد نکرده اید ، باید آن را درون پوشه src قرار دهید.

C:\Users\username\Desktop\aureliaApp\src>mkdir components

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

C:\Users\username\Desktop\aureliaApp\src\components>mkdir home
C:\Users\username\Desktop\aureliaApp\src\components>mkdir about

در داخل پوشه home ، ما باید فایلهای view و model را ایجاد کنیم.

C:\Users\username\Desktop\aureliaApp\src\components\home>touch home.js
C:\Users\username\Desktop\aureliaApp\src\components\home>touch home.html

ما همچنین به صفحه نمایش و مشاهده مدل نیاز داریم.

C:\Users\username\Desktop\aureliaApp\src\components\about>touch about.js
C:\Users\username\Desktop\aureliaApp\src\components\about>touch about.html

توجه – همچنین می توانید تمام پوشه های فوق را به صورت دستی ایجاد کنید.

مرحله ۲ – صفحات

بعد ، باید برخی از کدهای پیش فرض را به پرونده هایی که ایجاد کردیم اضافه کنیم.

home.html

<template>
   <h1>HOME</h1>
</template>

home.js

export class Home {}

about.html

<template>
   <h1>ABOUT</h1>
</template>

مرحله ۳ – روتر

ما برای روتر داخل فایل app.js view-model ایجاد خواهیم کرد.

app.js

export class App {
   configureRouter(config, router) {
      config.title = 'Aurelia';
        
      config.map([
         { route: ['','home'],  name: 'home',  
            moduleId: './components/home/home',  nav: true, title:'Home' },
         { route: 'about',  name: 'about',
            moduleId: './components/about/about',    nav: true, title:'About' }
      ]);

      this.router = router;
   }
}

نمای روتر ما در app.html قرار می گیرد.

app.html

<template>
   <nav>
      <ul>
         <li repeat.for = "row of router.navigation">
            <a href.bind = "row.href">${row.title}</a>
         </li>
      </ul>
   </nav>	
   <router-view></router-view>
</template>

وقتی برنامه را اجرا می کنیم ، می توانیم با کلیک روی صفحه اصلی یا روی پیوندها مسیرها را تغییر دهیم.

منبع.

لیست جلسات قبل آموزش برنامه نویسی اورلیا

1. آموزش برنامه نویسی اورلیا
2. بررسی اجمالی برنامه نویسی اورلیا 
3. آموزش تنظیمات محیطی در برنامه نویسی اورلیا 
4.  آموزش اولین برنامه در برنامه نویسی اورلیا
5. آموزش اجزا در برنامه نویسی اورلیا
6. آموزش چرخه زندگی کامپوننت در برنامه نویسی اورلیا
7. آموزش عناصر سفارشی در برنامه نویسی اورلیا
8. آموزش تزریق وابستگی در برنامه نویسی اورلیا
9. آموزش پیکربندی در برنامه نویسی اورلیا
10. آموزش پلاگین ها در برنامه نویسی اورلیا
11. آموزش اتصال داده ها در برنامه نویسی اورلیا
12. آموزش رفتار اتصال در برنامه نویسی اورلیا
13. آموزش مبدل ها در برنامه نویسی اورلیا
14. آموزش رویدادها در برنامه نویسی اورلیا
15. آموزش گردآورنده رویداد در برنامه نویسی اورلیا
16. آموزش فرم ها در برنامه نویسی اورلیا
17. آموزش HTTP در برنامه نویسی اورلیا
18. آموزش رفرنس ها در در برنامه نویسی اورلیا
19. آموزش مسیریابی در برنامه نویسی اورلیا
20. آموزش تاریخچه در برنامه نویسی اورلیا
21. آموزش انیمیشن ها در برنامه نویسی اورلیا
22. آموزش dialog در برنامه نویسی اورلیا
23. آموزش بومی سازی در برنامه نویسی اورلیا
24. آموزش ابزارها در برنامه نویسی اورلیا
25. آموزش بسته بندی در برنامه نویسی اورلیا
26. آموزش اشکال زدایی در برنامه نویسی اورلیا
27.  جامعه برنامه نویسی اورلیا