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

4 سال پیش

امتیاز دهید post

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

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

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

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

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

C:\Users\username\Desktop\aureliaApp\src&gt;mkdir components

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

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

C:\Users\username\Desktop\aureliaApp\src\components&gt;mkdir home
C:\Users\username\Desktop\aureliaApp\src\components&gt;mkdir about

1 2	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&gt;touch home.js
C:\Users\username\Desktop\aureliaApp\src\components\home&gt;touch home.html

1 2	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&gt;touch about.js
C:\Users\username\Desktop\aureliaApp\src\components\about&gt;touch about.html

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

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

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

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

home.html

&lt;template&gt;
   &lt;h1&gt;HOME&lt;/h1&gt;
&lt;/template&gt;

</template>

home.js

export class Home {}

1	export class Home {}

about.html

&lt;template&gt;
   &lt;h1&gt;ABOUT&lt;/h1&gt;
&lt;/template&gt;

<h1>ABOUT</h1>

</template>

مرحله 3 – روتر

ما برای روتر داخل فایل 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;
   }
}

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

&lt;template&gt;
   &lt;nav&gt;
      &lt;ul&gt;
         &lt;li repeat.for = "row of router.navigation"&gt;
            &lt;a href.bind = "row.href"&gt;${row.title}&lt;/a&gt;
         &lt;/li&gt;
      &lt;/ul&gt;
   &lt;/nav&gt;	
   &lt;router-view&gt;&lt;/router-view&gt;
&lt;/template&gt;

<nav>

<ul>

<a href.bind = "row.href">${row.title}</a>

</li>

</ul>

</nav>

<router-view></router-view>

</template>

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

Aurelia Routing Example

منبع.

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

امتیاز دهید post

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

نویسنده مطلب saber

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

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

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

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

home.html

home.js

about.html

مرحله 3 – روتر

app.js

app.html

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

دیدگاه شما

بدون دیدگاه

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

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

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

home.html

home.js

about.html

مرحله 3 – روتر

app.js

app.html

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

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه