• ۲۹
  • مرداد
توضیحات
  • دسته‌بندی‌ها : آموزش جاوا اسکریپت
  • بازدید : 480
جلسه ۲۲ : ویژگی Routing یا مسیریابی در AngularJS
  • جزئیات
  • نوع محتواآموزش تصویری

فیلم های آموزشی آکادمی پی وی لرن

  • آموزش های مرتبط

  • ۲۹
  • مرداد

جلسه ۲۲ : ویژگی Routing یا مسیریابی در AngularJS

  • دسته‌بندی‌ها :
  • بازدید : 480

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. در ادامه ی سری آموزشهای آنگولار، در این بخش قصد داریم شما را با ویژگی Routing یا مسیریابی در AngularJS ، آشنا کنیم. این ویژگی مانند ویژگی include در AngularJS ، به شما اجازه استفاده از فایل های HTML و صفحات وب دیگر را در صفحه وب جاری می دهد. اما در این حالت مانند ویژگی AJAX ، فقط بخش های متفاوت صفحه وب مجدد بارگزاری شده و از بارگزاری کل صفحه جلوگیری می شود.

در ادامه ی آموزش ، بیشتر با ویژگی Routing یا مسیریابی در AngularJS و طرز استفاده از آن، آشنا می شوید.

Routing یا مسیریابی در AngularJS

ماژول ngRoute به شما کمک می کند. از فایل های مختلف html در صفحه وب خود، بدون بارگزاری کل صفحه ی جاری، استفاده کنید.

Routing در آنگولار چیست

اگر می خواهید به صفحات مختلف در برنامه خود حرکت کنید، اما شما همچنین می خواهید. که در برنامه جاری باشید و فقط بخش های متفاوت از صفحات دیگر بارگزاری شود. می توانید از ماژول ngRoute در برنامه ی خود استفاده کنید.

ماژول ngRoute برنامه شما را به صفحات مختلف بدون بارگذاری کل برنامه هدایت می کند.

مثال: حرکت بین صفحات “red.htm” و “green.htm” یا “blue.htm” :

مثال : عملکرد Routing

خودتان امتحان کنید »

مثال : 

ابزار مورد نیاز

برای اینکه برنامه های خود را برای Routing آماده کنید، باید از ماژول AngularJS Route نیز استفاده کنید:

مثال : 

شما باید ماژول ngRoute را در بخش تعریف نام برنامه آنگولار، بصورت زیر تعریف کنید:

مثال : 

اکنون برنامه ی شما به ماژول route که سرویس $ pathProvider  را فراهم می کند. دسترسی دارد.

از سرویس $routeProvider برای پیکربندی های مختلف routes در برنامه خود استفاده کنید.

 

مثال : 

برنامه شما نیاز به یک ظرف برای قرار دادن محتوای ارائه شده توسط route دارد.

این ظرف دستورالعمل ng-view است.

سه راه مختلف برای افزودن دستورالعمل ng-view در برنامه شما وجود دارد:

مثال: روش اول دستور ng-view

خودتان امتحان کنید »

مثال : 

مثال : روش دوم دستور ng-view

خودتان امتحان کنید »

مثال : 

مثال : روش سوم دستور ng-view

خودتان امتحان کنید »

مثال : 

برنامه می تواند فقط از یک دستور ng-view برای تمام نماهایی که ویژگی route را عرضه می کند باشد.

سرویس $routeProvider

با استفاده از سرویس $routeProvider شما می توانید یک صفحه را زمانیکه کاربر روی یک لینک کلیک می کند، تعریف کنید.

مثال : عملکرد سرویس $routeProvider

خودتان امتحان کنید »

مثال : 

از سرویس $routeProvider با استفاده از متد config در برنامه ی خود استفاده کنید.

عملیت ریجستر در config ، زمانیکه برنامه در حال بارگزاری است انجام می شود.

کنترلرها

شما با استفاده از سرویس $routeProvider همچنین می توانید برای هر نمای View یک کنترلر، تعریف کنید.

مثال : افزودن کنترلر به برنامه

خودتان امتحان کنید »

مثال : 

“london.htm” و “paris.htm” فایل های معمولی HTML هستند که شما می توانید. عبارات AngularJS را همانطور که با هر بخش HTML دیگر از برنامه AngularJS خود اضافه می کنید اضافه کنید.

مثال ۱: فایل london.htm :

مثال : 

مثال ۲: فایل paris.htm :

مثال : 

چهارچوب

در مثال قبلی، شما از ویژگی templateUrl در در متد $routeProvider.when استفاده کردید.

ویژگی template به شما اجازه می دهد.که به طور مستقیم کدهای html را در برنامه وارد کرده و نیازی به استفاده از صفحات دیگر، نداشته باشید.

مثال : کاربرد ویژگی template

خودتان امتحان کنید »

مثال : 

متد otherwise

در مثال قبل از متد when در سرویس $routeProvider استفاده کردیم.

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

مثال: اگر روی گزینه های “Banana” و “Tomato” کلیک نشده باشد، به کاربر اعلام شود که گزینه ای انتخاب نشده است.

مثال : کاربرد متد otherwise

خودتان امتحان کنید »

مثال : 

کلام آخر

ما در این بخش شما را با یکی از ویژگی های پرکاربرد آنگولار با نام ویژگی Routing یا مسیریابی در AngularJS ، آشنا کردیم. با استفاده از Routing از کدهای html فایل های html دیگر در صفحه ی خود استفاده کنید. بدون اینکه کل صفحه وب شما مجددا بارگزاری شود.

جلسه ۲۲ : ویژگی Routing یا مسیریابی در AngularJS
5 (100%) 1 رای
QR:  جلسه ۲۲ : ویژگی Routing یا مسیریابی در AngularJS
به اشتراک بگذارید