آموزش پیمایش جاوا اسکریپت در برنامه نویسی آیونیک

3 سال پیش

آموزش پیمایش جاوا اسکریپت در برنامه نویسی آیونیک

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

پیمایش یکی از مولفه های اصلی هر برنامه است. آیونیک از روتر AngularJS UI برای مدیریت پیمایش استفاده می کند.

استفاده از پیمایش

پیمایش را می توان در پرونده app.js پیکربندی کرد. اگر از یکی از الگوهای Ionic استفاده می کنید ، متوجه خواهید شد که سرویس $ stateProvider به پیکربندی برنامه تزریق شده است. ساده ترین روش ایجاد حالت برای برنامه در مثال زیر نشان داده شده است.

سرویس $ stateProvider URL را اسکن می کند ، وضعیت مربوطه را پیدا می کند و پرونده ای را که در app.config تعریف کردیم بارگیری می کند.

کد app.js

.config(function($stateProvider) {
   $stateProvider
   .state('index', { url: '/', templateUrl: 'templates/home.html'})
   .state('state1', {url: '/state1', templateUrl: 'templates/state1.html'})
   .state('state2', {url: '/state2', templateUrl: 'templates/state2.html',});
});

حالت در عنصر ion-nav-view بارگیری می شود که می تواند در بدنه index.html قرار گیرد.

کد index.html

<ion-nav-view> </ion-nav-view>

وقتی حالت هایی را در مثال فوق ایجاد کردیم ، از templateUrl استفاده می کردیم ، بنابراین وقتی دولت بارگیری می شود ، متناسب با فایل الگو را جستجو می کند. اکنون ، ما پوشه templates را باز کرده و یک پرونده جدید state1.html ایجاد می کنیم ، که با تغییر URL برنامه به / state1 بارگذاری می شود.

<ion-view>
   <ion-content>
      This is State 1 !!!
   </ion-content>
</ion-view>

Ionic Navigation State

با افزودن عنصر “ion-nav-bar” می توانید در متن index.html یک نوار پیمایش به برنامه خود اضافه کنید. در داخل نوار پیمایش، دکمه ion-nav-back-back را با یک آیکون اضافه خواهیم کرد. این برای بازگشت به حالت قبلی استفاده خواهد شد. با تغییر حالت، دکمه به طور خودکار ظاهر می شود. ما تابع ()goBack را اختصاص خواهیم داد که از سرویس ionicHistory$ برای مدیریت این قابلیت استفاده خواهد کرد. بنابراین، هنگامی که کاربر حالت خانه را ترک می کند و به حالت ۱ می رود ، اگر کاربر بخواهد به حالت اصلی برگردد ، دکمه برگشت ظاهر می شود که می توان آن را ضبط کرد.

کد index.html

<ion-nav-bar class = "bar-positive">
   <ion-nav-back-button class = "button-clear" ng-click = "goBack()">
      <i class = "icon ion-arrow-left-c"></i> Back
   </ion-nav-back-button>
</ion-nav-bar>

کد کنترل کننده

.MyCtrl($scope, $ionicHistory) {
   $scope.goBack = function() {
      $ionicHistory.goBack();
   };
}

افزودن عناصر ناوبری

با استفاده از دکمه های ion-navot می توان دکمه ها را به نوار پیمایش اضافه کرد. این عنصر باید در داخل میله یونی-یو یا نمای یونی قرار گیرد. ما می توانیم ویژگی جانبی را با چهار مقدار گزینه اختصاص دهیم. مقادیر اولیه و ثانویه دکمه ها را با توجه به پلت فرم مورد استفاده قرار می دهد گاهی اوقات می خواهید دکمه ها را در یک طرف صرف نظر از IOS یا Android بخواهید. در این صورت ، می توانید از ویژگی های چپ یا راست استفاده کنید.

همچنین می توانیم عنوان -ion-nav را به نوار پیمایش اضافه کنیم. همه کدها در متن index.html قرار می گیرند ، بنابراین می توان از آن در همه جا استفاده کرد.

<ion-nav-bar class = "bar-positive">
   <ion-nav-title>
      Title
   </ion-nav-title>
    
   <ion-nav-buttons side = "primary">
      <button class = "button">
         Button 1
      </button>
   </ion-nav-buttons>
</ion-nav-bar>

این صفحه زیر را تولید می کند –

Ionic Navigation Elements

سایر ویژگی های ناوبری

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

ویژگی های ناوبری

ویژگی	گزینه	جزئیات
nav-transition	none, iOS, Android	برای تنظیم انیمیشن استفاده می شود که باید هنگام وقوع انتقال استفاده شود
nav-direction	forward, back, enter, exit, swap	برای تنظیم جهت انیمیشن در هنگام انتقال استفاده می شود.
hardwareBackButtonClose	Boolean	با کلیک بر روی دکمه بازگشت سخت افزار ، بسته شدن حالت استاندارد را فعال می کند. مقدار پیش فرض درست است.

ذخیره سازی

آیونیک توانایی ذخیره حداکثر ده نمایش برای بهبود عملکرد را دارد. همچنین روشی برای مدیریت دستی حافظه پنهان ارائه می دهد. از آنجا که فقط بازدیدهای عقب ذخیره می شوند و هر بار که کاربران از آنها بازدید می کنند، نمایهای جلو بارگیری می شوند، ما می توانیم به راحتی با استفاده از کد زیر را برای ذخیره نمایهای جلو تنظیم کنیم.

$ionicCinfigProvider.views.forwardCache(true);

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

$ ionicConfigProvider.views.maxCache (3)؛

حافظه پنهان را می توان در stateProvider$ یا با تنظیم ویژگی به ion-view غیرفعال کرد. هر دو نمونه در زیر آمده است.

$stateProvider.state('state1', {
   cache: false,
   url : '/state1',
   templateUrl: 'templates/state1.html'
})

<ion-view cache-view = "false"></ion-view>

کنترل نوار پیمایش

با استفاده از سرویس ionicNavBarDelegate$ می توانیم رفتار نوار پیمایش را کنترل کنیم. این سرویس باید به کنترل کننده ما تزریق شود.

کد HTML

<ion-nav-bar>
   <button ng-click = "setNavTitle('title')">
      Set title to banana!
   </button>
</ion-nav-bar>

کد کنترل کننده

$scope.setNavTitle = function(title) {
   $ionicNavBarDelegate.title(title);
}

سرویس onicNavBarDelegate$ روشهای مفید دیگری نیز دارد. برخی از این روش ها در جدول زیر ذکر شده است.

متدهای ionicNavBarDelegate$

متد	پارامتر	نوع	جزئیات
align(parameter)	center, left, right	string	برای تراز کردن عنوان استفاده می شود.
showBackButton(parameter)	show	Boolean	برای نمایش یا پنهان کردن دکمه برگشت استفاده می شود.
title(parameter)	title	string	برای نشان دادن عنوان جدید استفاده می شود

پیگیری تاریخچه

با استفاده از سرویس ionicHistory$ می توانید تاریخچه نمایش های قبلی ، فعلی و آینده را ردیابی کنید. جدول زیر تمام روشهای این سرویس را نشان می دهد.

متد	پارامتر	نوع	جزئیات
viewHistory	/	object	داده های سابقه مشاهده برنامه را برمی گرداند.
currentView()	/	object	نمای فعلی را برمی گرداند.
title(parameter)	title	string	عنوان رشته شناسه نمای والد نمای فعلی را برمی گرداند.
currentTitle(parameter)	val	string	عنوان نمای فعلی را برمی گرداند. با تنظیم مقدار Val جدید می توان آن را به روز کرد.
backView()	/	string	آخرین نمای عقب را برمی گرداند.
backTitle()	/	string	آخرین نمای برگشت را برمی گرداند.
forwardView()	/	object	آخرین نمای رو به جلو را برمی گرداند.
currentStateName()	/	string	نام حالت فعلی را برمی گرداند.
goBack()	backCount	number	برای تنظیم تعداد بازدید به عقب استفاده می شود. تعداد باید منفی باشد. اگر مثبت یا صفر باشد تاثیری نخواهد داشت.
clearHistory()	/	/	برای پاک کردن کل تاریخچه مشاهده استفاده می شود.
clearCache()	/	promise	رای پاک کردن تمام نمایش های ذخیره شده استفاده می شود
nextViewOptions()	/	object	گزینه های نمای بعدی را تنظیم می کند. برای اطلاعات بیشتر می توانید به مثال زیر نگاه کنید.

متد ()nextViewOptions دارای سه گزینه زیر است.

disableAnimate برای غیرفعال کردن انیمیشن تغییر نمای بعدی استفاده می شود.
disableBack نمای عقب را خنثی می کند.
historyRoot نمای بعدی را به عنوان نمای اصلی تنظیم می کند.

$ionicHistory.nextViewOptions({
   disableAnimate: true,
   disableBack: true
});

منبع.

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

نویسنده مطلب erfan molaei

آموزش پیمایش جاوا اسکریپت در برنامه نویسی آیونیک

آموزش پیمایش جاوا اسکریپت در برنامه نویسی آیونیک

استفاده از پیمایش

کد app.js

کد index.html

کد index.html

کد کنترل کننده

افزودن عناصر ناوبری

سایر ویژگی های ناوبری

کنترل نوار پیمایش

کد HTML

کد کنترل کننده

متدهای ionicNavBarDelegate$

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

دیدگاه شما

بدون دیدگاه

آموزش پیمایش جاوا اسکریپت در برنامه نویسی آیونیک

استفاده از پیمایش

کد app.js

کد index.html

کد index.html

کد کنترل کننده

افزودن عناصر ناوبری

سایر ویژگی های ناوبری

کنترل نوار پیمایش

کد HTML

کد کنترل کننده

متدهای ionicNavBarDelegate$

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

دیدگاه شما

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

بدون دیدگاه