Latest web development tutorials

นำทางไอออนิก

นำทางไอออนิก

ไอออน NAV-มุมมอง

เมื่อผู้ใช้เรียกดูแอปของคุณเมื่ออิออนสามารถตรวจสอบประวัติการเข้าชม โดยการตรวจสอบประวัติการเข้าชมปัดไปทางซ้ายหรือขวาเพื่อให้บรรลุเมื่อต้องแปลงมุมมอง

โดยใช้การเชื่อมต่อโมดูลเราเตอร์ AngularUI และโปรแกรมอื่น ๆ สามารถแบ่งออกเป็น $ รัฐที่แตกต่างกัน (รัฐ) หลักเชิงมุมสำหรับการกำหนดเส้นทางบริการ URL ที่สามารถนำมาใช้ในการควบคุมมุมมอง

เส้นทาง 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 queries URL เพื่อดูว่ารัฐตรงกับค่าดัชนีแล้วโหลด index.html ที่ <ไอออน NAV-View>

โหลดหน้า URL ที่ผ่านการกำหนดค่า สร้างแม่แบบของวิธีที่ง่ายที่สุดคือการเชิงมุมโดยตรงทำให้เขาอยู่ในแฟ้มแม่แบบ HTML และใช้ <ชนิดสคริปต์ = "text / NG-แม่"> มี

ดังนั้นนี้เป็นวิธีที่จะ home.html เพิ่ม app ของเราในอดีตที่ผ่านมา: 

<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>

ลอง»

นี้เป็นวิธีที่ดีเพราะแม่แบบจะโหลดได้อย่างรวดเร็วและแคชที่แตกต่างกันไปผ่านการโหลดเครือข่าย

แคช

ภายใต้สถานการณ์ปกติมุมมองที่จะถูกเก็บไว้สามารถปรับปรุงประสิทธิภาพ เมื่อออกจากมุมมององค์ประกอบของเขาจะถูกเก็บไว้ในพระและขอบเขตของยังถูกลบออกจาก $ นาฬิกา

เมื่อเรากระโดดได้รับมุมมองแคชมุมมองจะเปิดใช้งานขอบเขตของมันจะถูกเชื่อม, Dom ยังบันทึกองค์ประกอบของเขา นอกจากนี้ยังช่วยในการรักษาตำแหน่งเลื่อนมุมมองก่อนหน้า

แคชยังสามารถเป็นหลายวิธีที่จะเปิดและปิด จำนวนสูงสุดเริ่มต้นของอิออนแคชหน้าคือ 10 และเรื่องนี้ไม่ได้เป็นเพียงการปรับแต่งแอพลิเคชันอย่างชัดเจนสามารถตั้งค่าสถานะในมุมมองไม่ควรเก็บไว้

โปรดทราบว่าเนื่องจากเรากำลังแคชมุมมองเหล่านี้เราไม่ได้ทำลายขอบเขต แต่ก็ยังถูกลบออกจากขอบเขตของ $ นาฬิกา

เพราะขอบเขตการรับชมต่อไปยังไม่ได้รับการทำลายและสร้างใหม่ควบคุมไม่โหลดอีกครั้ง ถ้า app / ควบคุมจำเป็นต้องรู้เมื่อเข้าหรือออกจากมุมมองแล้วดูเหตุการณ์จากปัญหาการกระทำ 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

คุณสมบัติ ชนิด รายละเอียด
ชื่อ
(อุปกรณ์เสริม)
字符串

ชื่อของมุมมอง ชื่อนี้ควรจะเป็นเพียงมุมมองอื่น ๆ ในรัฐเดียวกัน คุณสามารถมีมุมมองที่มีชื่อเดียวกันในรัฐที่แตกต่างกัน สำหรับข้อมูลเพิ่มเติมดู UI เตอร์ เอกสาร UI-มุมมอง

ไอออนมุมมอง

เครือ 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 ซ่อนปุ่มย้อนกลับ

ซ่อน NAV บาร์
(อุปกรณ์เสริม)
布尔值

โดยค่าเริ่มต้นหากคุณซ่อนผู้ปกครอง ionNavBar

ไอออน NAV บาร์

สร้างแถบเครื่องมือที่ด้านบนเมื่อโปรแกรมปรับปรุงเปลี่ยนสถานะ

การใช้ 

<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 ระบุแถบนำทาง

จัดชื่อ
(อุปกรณ์เสริม)
字符串

แถบนำทางชื่อตำแหน่งชิด ที่มีจำหน่าย: 'ซ้าย', 'สิทธิ', 'ศูนย์' เริ่มต้นเป็น 'ศูนย์'

ไอออน NAV ปุ่ม

เครือ 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 ตำแหน่งตำแหน่งปุ่ม ที่มีจำหน่าย: 'ซ้าย' หรือ 'ถูกต้อง'

ไอออน NAV-Back-ปุ่ม

ปุ่มสร้างใน 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-ชัดเจน

แอตทริบิวต์ NAV-ชัดเจนใช้คำสั่งเมื่อคุณคลิกที่มุมมององค์ประกอบเช่นเมื่อ <a href> หรือ <ปุ่ม UI-sref>

เมื่อคลิก NAV-ชัดเจนจะมีผลในองค์ประกอบที่เป็นสิ่งต้องห้ามภายใต้การหมุนเวียนของมุมมอง คำสั่งนี้จะเป็นประโยชน์เช่นการเชื่อมโยงเมนูแถบด้านข้าง

การใช้

นี่คือเมนูแถบด้านข้างเพื่อเพิ่มลิงค์ไปยัง NAV-ชัดเจนการเรียนการสอน คลิกที่ลิงค์จะปิดการใช้ภาพเคลื่อนไหวใด ๆ ระหว่างมุมมอง 

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

ไอออน NAV-ชื่อ

ไอออน NAV-ชื่อไอออนดูเทมเพลทใช้ในการตั้งชื่อ

การใช้ 

<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>

NAV-เปลี่ยนแปลง

กำหนดชนิดของการเปลี่ยนแปลงที่อาจจะใช้: iOS, Android และไม่มีใคร

การใช้ 

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

NAV-ทิศทาง

ตั้ง Nav มุมมองการเปลี่ยนทิศทางการเคลื่อนไหวอย่างใดอย่างหนึ่งไปข้างหน้า, หลัง, เข้าออกแลกเปลี่ยน

การใช้ 

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

$ IonicNavBarDelegate

การควบคุมสิทธิคำแนะนำไอออน NAV บาร์

การใช้ 

<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)

ได้รับหรือการตั้งค่าไอออน NAV บาร์จะปรากฏ

พารามิเตอร์ ชนิด รายละเอียด
แสดง 布尔值

แถบนำทางจะปรากฏ

ค่าตอบแทน: แถบนำทางแบบบูลจะปรากฏ

showBackButton([show])

ได้รับหรือการตั้งค่าที่ NAV-ปุ่มย้อนกลับไอออนจะปรากฏ

พารามิเตอร์ ชนิด รายละเอียด
แสดง
(อุปกรณ์เสริม)
布尔值

ว่าจะแสดงปุ่มย้อนกลับ 

title(title)

ตั้งคำอธิบายภาพไอออน NAV-บาร์

พารามิเตอร์ ชนิด รายละเอียด
ชื่อเรื่อง 字符串

แสดงชื่อใหม่

$ IonicHistory

$ IonicHistory ใช้ในการติดตามประวัติการท่องเว็บของผู้ใช้ภายใน app

ทาง 

viewHistory()

สำหรับประวัติดู 

currentView()

มุมมองปัจจุบันของ app 

currentHistoryId()
ประวัติความเป็นมาสแต็ค ID เป็นคอนเทนเนอร์หลักของมุมมองปัจจุบัน 

currentTitle([val])

ได้รับหรือการตั้งชื่อของมุมมองปัจจุบัน 

backView()

กลับสู่มุมมองที่ดูล่าสุด 

backTitle()

ได้รับชื่อมุมมองการเรียกดูล่าสุด 

forwardView()

มุมมองย้อนกลับไปในมุมมองทางประวัติศาสตร์ของสแต็คในปัจจุบัน 

currentStateName()

ส่งชื่อรัฐในปัจจุบัน 

goBack([backCount])

App มุมมองย้อนกลับถ้าย้อนกลับของมุมมองที่มีอยู่