الملاحة الأيونية

الملاحة الأيونية

---

ايون الملاحة الرؤية

عند استعراض المستخدمين إلى التطبيق الخاص بك عندما الأيونية قادرة على الكشف عن تاريخ التصفح. عن طريق الكشف عن تاريخ التصفح، مرر لليسار أو اليمين لتحقيق عند تحويلها وجهات النظر بشكل صحيح.

باستخدام واجهات وحدة التوجيه AngularUI وغيرها من التطبيقات يمكن تقسيمها إلى دولة $ مختلفة (ولاية). جوهر الزاوي لتوجيه الخدمات، وعناوين المواقع يمكن أن تستخدم للسيطرة على الرأي.

يوفر AngularUI توجيه إدارة الدولة أكثر قوة، أن الدولة يمكن تسمية، متداخلة، والاندماج للعرض، للسماح أكثر من قالب واحد قدم على نفس الصفحة.

وبالإضافة إلى ذلك، كل دولة لا تحتاج إلى أن تكون ملزمة لعنوان URL، ويمكن للبيانات أن يكون أكثر مرونة لدفع كل دولة.

في المثال التالي، سوف نقوم إنشاء تطبيق عرض الملاحة يحتوي على ولايات مختلفة.

اختيارنا ionNavView العلامة كما في القيادة العليا. عرض رأس العمود نحن ionNavBar تعليمات عبر التحديث الملاحة.

المقبل، ونحن بحاجة إلى تعيين لدينا تقديم قيمة الدولة.

var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
  $stateProvider
  .state('index', {
    url: '/',
    templateUrl: 'home.html'
  })
  .state('music', {
    url: '/music',
    templateUrl: 'music.html'
  });
});

ثم فتح التطبيق، $ stateProvider الاستعلامات رابط، لمعرفة ما إذا كانت الدولة يطابق قيمة المؤشر، ومن ثم تحميل index.html و ل<ايون الملاحة الرؤية>.

تحميل الصفحة من خلال عناوين تكوين. إنشاء قالب من أكثر الطرق بسيطة هو الزاوي مباشرة وضعه في ملف القالب أتش تي أم أل واستخدام <النصي نوع = "نص / نانوغرام قالب"> يحتوي عليها.

لذلك هذا هو وسيلة لصفحة home.html إضافة إلى التطبيق لدينا في الماضي:

<script id="home" type="text/ng-template">
  <!--  ion-view 标题将显示在 navbar 中 -->
  <ion-view view-title="Home">
    <ion-content ng-controller="HomeCtrl">
      <!-- The content of the page -->
      <a href="#/music">Go to music page!</a>
    </ion-content>
  </ion-view>
</script>

محاولة »

هذا هو وسيلة جيدة، لأن القالب سوف تحميل بسرعة وذاكرة التخزين المؤقت مختلفة للذهاب من خلال تحميل الشبكة.

---

التخزين المؤقت

في ظل الظروف العادية، يتم مؤقتا آراء يمكن تحسين الأداء. عند الخروج من العرض، يتم الاحتفاظ عنصر له في دوم، وتتم إزالة نطاقه أيضا من ساعة $.

عندما نقفز كانت وجهة نظر مؤقتا، سيتم تفعيل العرض، يتم توصيلها نطاقه، كما أنقذ دوم عنصر له. وهذا يسمح أيضا للحفاظ على موقف الرأي التمرير السابق.

التخزين المؤقت ويمكن أيضا أن يكون العديد من الطرق لتشغيل وإيقاف. الأيونية الحد الأقصى الافتراضي لصفحات ذاكرة التخزين المؤقت 10، وهذه ليست فقط للتخصيص، ويجب أن لا يكون مؤقتا التطبيق يمكن أن يحدد بشكل واضح حالة العرض.

لاحظ أنه بما أننا التخزين المؤقت هذه الآراء، ونحن لا تدمر النطاق. بدلا من ذلك، يتم إزالته أيضا من نطاق المراقبة $.

لأنه لم يتم تدمير نطاق العرض القادم وإعادة بنائها، لم يتم تحميل وحدة تحكم مرة أخرى. إذا كان التطبيق / وحدة تحكم بحاجة إلى معرفة عند الدخول أو الخروج من العرض، ثم عرض الحدث من قضية العمل ionView، مثل $ ionicView.enter، قد يكون من المفيد.

التخزين المؤقت تعطيل العالمي

مخبأ $ IonicConfigProvider يمكن استخدامها لتعيين الحد الأقصى المسموح به عدد من وجهات النظر من خلال وضع إلى 0 لتعطيل كافة مخابئ.

$ionicConfigProvider.views.maxCache(0);

تعطيل التخزين المؤقت في الدولة الموردة

$stateProvider.state('myState', {
   cache: false,
   url : '/myUrl',
   templateUrl : 'my-template.html'
})

تعطيل ذاكرة التخزين المؤقت من خلال الخاصية

<ion-view cache-view="false" view-title="My Title!">
  ...
</ion-view>

AngularUI الطريق

زيارة مستندات AngularUI جهاز التوجيه لأكثر من ذلك.

API

ممتلكات	نوع	التفاصيل
اسم (اختياري)	字符串	واسم طريقة العرض. وينبغي أن يكون هذا الاسم على وجهات النظر الأخرى الوحيدة في دولة واحدة. هل يمكن أن يكون الرأي الذي يحمل نفس الاسم في دولة مختلفة. لمزيد من المعلومات، عرض واجهة المستخدم، جهاز التوجيه وثيقة واجهة المستخدم للرؤية .

---

ايون عرض

تابع ionNavView. محتويات الحاوية لمشاهدة العرض أو المعلومات الملاحية.

هنا هو شريط التنقل مع "صفحتي" يتجه لتحميل الصفحة عينة.

<ion-nav-bar></ion-nav-bar>
<ion-nav-view class="slide-left-right">
  <ion-view title="我的页面">
    <ion-content>
      你好!
    </ion-content>
  </ion-view>
</ion-nav-view>

API

ممتلكات	نوع	التفاصيل
لقب (اختياري)	字符串	يتم عرضه في الأصل ionNavBar اللقب.
إخفاء الظهر على زر (اختياري)	布尔值	افتراضيا، إذا كان الوالد ionNavBar إخفاء زر الخلفي.
إخفاء الملاحة بار (اختياري)	布尔值	افتراضيا، إذا قمت بإخفاء الوالد ionNavBar .

---

ايون الملاحة بار

إنشاء شريط أدوات في الأعلى، عند تحديث برنامج تغيير الوضع.

استعمال

<body ng-app="starter">
  <!-- 当我们浏览时，导航栏会随之更新。 -->
  <ion-nav-bar class="bar-positive nav-title-slide-ios7">
  </ion-nav-bar>

  <!-- 初始化时渲染视图模板 -->
  <ion-nav-view></ion-nav-view>
</body>

API

ممتلكات	نوع	التفاصيل
مندوب مقبض (اختياري)	字符串	المقبض مع $ionicNavBarDelegate يحدد شريط التنقل.
محاذاة-لقب (اختياري)	字符串	محاذاة عنوان شريط التنقل الموقف. المتوفر "اليسار"، "الحق"، "مركز". الافتراضي هو "مركز".

---

ايون الملاحة أزرار

تابع ionNavView

على ionNavBar ionView الداخل مع زر ionNavButtons إعدادات.

سيتم وضعها على أي زر تقوم بتعيينها في الموقف المناسب من شريط التنقل، عندما يغادر المستخدم وسيتم تدمير وجهة نظر الوالدين.

استعمال

<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
  <ion-view>
    <ion-nav-buttons side="left">
      <button class="button" ng-click="doSomething()">
        我是一个在导航栏左侧的按钮！
      </button>
    </ion-nav-buttons>
    <ion-content>
      这里是一些内容！
    </ion-content>
  </ion-view>
</ion-nav-view>

API

ممتلكات	نوع	التفاصيل
جانب	字符串	الوالد ionNavBar زر موقف التنسيب. المتوفر "اليسار" أو "حق".

---

ايون الملاحة ظهر على زر

إنشاء زر في ionNavBar في.

عندما لا يمكن للمستخدم التنقل في الركود الحالي، سيتم عرض الزر الخلفي.

استعمال

عمل زر افتراضي:

<ion-nav-bar>
  <ion-nav-back-button class="button-clear">
    <i class="ion-arrow-left-c"></i> 后退
  </ion-nav-back-button>
</ion-nav-bar>

العرف فوق العمل، مع $ ionicNavBarDelegate:

<ion-nav-bar ng-controller="MyCtrl">
  <ion-nav-back-button class="button-clear"
    ng-click="canGoBack && goBack()">
    <i class="ion-arrow-left-c"></i> 后退
  </ion-nav-back-button>
</ion-nav-bar>

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

على زر العودة يعرض العنوان السابق، ولكن أيضا مع $ ionicNavBarDelegate.

<ion-nav-bar ng-controller="MyCtrl">
  <ion-nav-back-button class="button-icon">
    <i class="icon ion-arrow-left-c"></i>{{getPreviousTitle() || 'Back'}}
  </ion-nav-back-button>
</ion-nav-bar>

function MyCtrl($scope, $ionicNavBarDelegate) {
  $scope.getPreviousTitle = function() {
    return $ionicNavBarDelegate.getPreviousTitle();
  };
}

---

NAV-اضحة

استخدمت سمات الملاحة واضحة أمر عند النقر على وجهة النظر عنصر عند هذا <a href> أو <زر واجهة المستخدم sref>.

عند النقر عليها، الملاحة، واضح سيؤدي إلى عنصر معين محظور بموجب دوران من وجهة نظر. هذا الأمر مفيدا، على سبيل المثال، يربط القائمة الشريط الجانبي.

استعمال

هنا قائمة الشريط الجانبي لإضافة ارتباط إلى التنقل واضحة التعليمات. وبالضغط على الرابط تعطيل أي الرسوم المتحركة بين وجهات النظر.

<a nav-clear menu-close href="#/home" class="item">首页</a>

---

ايون الملاحة-لقب

يستخدم أيون-الملاحة-لقب قالب ايون بغية تعيين العنوان.

استعمال

<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
  <ion-view>
    <ion-nav-title>
      <img src="logo.svg">
    </ion-nav-title>
    <ion-content>
      Some super content here!
    </ion-content>
  </ion-view>
</ion-nav-view>

---

الملاحة المرحلة الانتقالية

تعيين نوع الانتقال المستخدمة قد تكون: دائرة الرقابة الداخلية، الروبوت، ولا شيء.

استعمال

<a nav-transition="none" href="#/home">Home</a>

---

الملاحة التوجيه

تعيين التنقل نظرا الانتقال الاتجاه الرسوم المتحركة، وإما إلى الأمام والخلف، دخول، خروج، المبادلة.

استعمال

<a nav-direction="forward" href="#/home">Home</a>

---

$ IonicNavBarDelegate

السيطرة استحقاق ايون الملاحة بار التعليمات.

استعمال

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

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

الطريق

align([direction])

مرة أخرى في تاريخ التصفح.

المعلمات	نوع	التفاصيل
حدث (اختياري)	DOMEvent	كائنات الحدث (مثل من الحدث نقرة)

align([direction])

اللقب مع أزرار الانحياز إلى الاتجاه المحدد.

المعلمات	نوع	التفاصيل
اتجاه (اختياري)	字符串	الاتجاه محاذاة النص العنوان. المتوفر "اليسار"، "الحق"، "مركز". الافتراضي: "مركز".

قيمة الإرجاع: يتم عرض زر القيمة مرة أخرى منطقي.

showBar(show)

يحصل أو تعيين يتم عرض ايون الملاحة بار.

المعلمات	نوع	التفاصيل
عرض	布尔值	يتم عرض شريط التنقل.

قيمة الإرجاع: يتم عرض شريط التنقل منطقية.

showBackButton([show])

يحصل أو تعيين يتم عرض ايون الملاحة ظهر على زر.

المعلمات	نوع	التفاصيل
عرض (اختياري)	布尔值	سواء لعرض زر العودة

title(title)

تعيين التسمية التوضيحية ايون الملاحة بار.

المعلمات	نوع	التفاصيل
لقب	字符串	عرض عنوان جديد.

---

$ IonicHistory

$ IonicHistory المستخدمة لتتبع تاريخ التصفح المستخدم داخل التطبيق.

الطريق

viewHistory()

لعرض التاريخ.

currentView()

العرض الحالي من التطبيق.

currentHistoryId()

تاريخ معرف كومة، هو الحاوية الأصل من العرض الحالي.

currentTitle([val])

يحصل أو تعيين عنوان العرض الحالي.

backView()

عودة إلى العرض الأخير عرضها.

backTitle()

الحصول على لقب رأي التصفح الماضي.

forwardView()

العودة عرض على وجهة نظر تاريخية من المكدس الحالي.

currentStateName()

يعود اسم الدولة الحالي.

goBack([backCount])

التطبيق عرض التراجع، إذا كان التراجع نظر موجودة.