قسمت بیست و دوم AngularJS :چگونه با انگولار مسیریابی کنیم؟

خانه » مقالات اموزشی » javascript » قسمت بیست و دوم AngularJS :چگونه با انگولار مسیریابی کنیم؟
قسمت بیست و دوم AngularJS :چگونه با انگولار مسیریابی کنیم؟

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

2579

Calendar-amico (2)

تاریخ به‌روزرسانی:

۱۳۹۹-۰۲-۱۸

Work time-rafiki

زمان مطالعه:

5 دقیقه

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

مسیریابی انگولار چیست ؟

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

ماژول ngRoute برنامه شما را به صفحات مختلف بدون بارگذاری کل برنامه هدایت می کند.برای درک بهتر این موضوع به مثال زیر توجه کنید:

در مثال بالا فایل هایی را برای هدایت کردن دکمه ها به صفحه ی اصلی اضافه کردیم که با کلیک بر روی هر دکمه عمل خاصی در مکان خاصی از صفحه بدون بارگذاری مجدد انجام میشود.

به چه چیز نیاز داریم ؟

برای اجرا شدن مسیریابی در انگولار ابتدا باید فایل js مربوط به این عمل را از کتابخانه های انگولار به پروژه ی خود اضافه کنید :

سپس باید ngRoute را به عنوان یک وابستگی در ماژول برنامه اضافه کنید:

حال برنامه ی شما به مسیر دسترسی دارد که $ngProvider ان را تامین میکند:

مسیریابی چگونه هدایت میشود ؟

حال برنامه ی شما نیاز به یک نگهدارنده برای قرار دادن محتوا ارائه شده توسط مسیریاب دارد. نگهدارنده همان ng-view می باشد. راه های مختلفی برای افزودن دستورالعمل ng-view وجود دارد که در زیر به انها خواهیم پرداخت.

روش اول

روش دوم

روش سوم

برنامه های کاربردی تنها می توانند یک دستورالعمل Ng-view داشته باشند و این خواهد بود که برای همه دیدگاه های ارائه شده از مسیر، نگهداری می شود.

$routeProvider

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

$routeProvider را با استفاده از روش پیکربندی برنامه خود تعریف کنید. کار هنگام ثبت نام در روش پیکربندی زمانی که برنامه بارگذاری می شود انجام می شود. اینکه را هم به یاد داشته باشید که کتابخانه ی مسیریاب را حتما اضافه کنید.

کنترل کننده ی مسیریاب

با استفاده از $routeProvider شما میتوانید یک کنترل کننده برای “view” در نظر بگیرید.

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

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

فایل هایی به شکل زیر :

ساختار

در نمونه های قبلی ما از property templateUrl در روش $routeProvider.when استفاده کردیم.

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

متد otherwise

در مثال قبل از از when در ماژول $routerProvider استفاده کرده ایم. شما همچنین می توانید از روش otherwise استفاده کنید، که مسیر پیش فرض است، زمانی که هیچ یک از دیگران یک بازی دریافت نمی کنند.

لازم به تذکر دوباره است که برای اجرا شدن کدهای فوق نیاز است تا حتما کتابخانه ی مسیریاب اضافه شود ، شاید برای استفاده از ظاهر بهتر نیاز به خواندن مقاله نصف بوت استرپ داشته باشید .

امیدوارم این اموزش برای شما عزیزان مفید واقع شده باشد ، برای مطالعه مقالات بیشتر میتوانید به سایت w3schools مراجعه فرمایید.

موفق و پیروز باشید.

مرتضی افضلی

مرتضی افضلی

این روزها دیگر نیاز نیست کلی هزینه‌ی اجاره‌ی مغازه بدهید. با دنیای کسب‌وکار اینترنتی و دیجیتال مارکتینگ می‌توانیم کسب درامد داشته باشیم و من در مجموعه‌ی کدپز در این راه همراه شما هستم.

تا کنون 264 نفر در کدپز ثبت نام کرده اند.

دیدگاهتان را بنویسید