Ionic - Điều hướng Javascript

Điều hướng là một trong những thành phần cốt lõi của mọi ứng dụng. Ionic đang sử dụngAngularJS UI Router để xử lý điều hướng.

Sử dụng Điều hướng

Điều hướng có thể được định cấu hình trong app.jstập tin. Nếu bạn đang sử dụng một trong các mẫu Ionic, bạn sẽ nhận thấy$stateProvider dịch vụ được đưa vào ứng dụng config. Cách đơn giản nhất để tạo trạng thái cho ứng dụng được trình bày trong ví dụ sau.

Các $stateProvider dịch vụ sẽ quét URL, tìm trạng thái tương ứng và tải tệp mà chúng tôi đã xác định trong app.config.

Mã 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',});
});

Trạng thái sẽ được tải vào ion-nav-view phần tử này có thể được đặt trong index.html thân hình.

index.html Mã

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

Khi chúng tôi tạo các trạng thái trong ví dụ được đề cập ở trên, chúng tôi đang sử dụng templateUrl, vì vậy khi trạng thái được tải, nó sẽ tìm kiếm tệp mẫu phù hợp. Bây giờ, chúng tôi sẽ mởtemplates thư mục và tạo một tệp mới state1.html, sẽ được tải khi URL ứng dụng được thay đổi thành /state1.

state1.html Code

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

Tạo menu điều hướng

Bạn có thể thêm thanh điều hướng vào ứng dụng của mình trong index.html cơ thể bằng cách thêm “ion-nav-bar”thành phần. Bên trong thanh điều hướng, chúng tôi sẽ thêmion-nav-back-buttonvới một biểu tượng. Điều này sẽ được sử dụng để trở lại trạng thái trước đó. Nút sẽ tự động xuất hiện khi trạng thái được thay đổi. Chúng tôi sẽ chỉ địnhgoBack() , sẽ sử dụng $ionicHistorydịch vụ xử lý chức năng này. Do đó, khi người dùng rời khỏi trạng thái chính và đi đếnstate1, nút quay lại sẽ xuất hiện, nút này có thể được nhấn vào, nếu người dùng muốn quay lại trạng thái chính.

index.html Mã

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

Mã điều khiển

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

Thêm yếu tố điều hướng

Các nút có thể được thêm vào thanh điều hướng bằng cách sử dụng ion-nav-buttons. Phần tử này nên được đặt bên trongion-nav-bar hoặc là ion-view. Chúng tôi có thể chỉ địnhsidethuộc tính với bốn giá trị tùy chọn. Cácprimary và secondarygiá trị sẽ đặt các nút theo nền tảng được sử dụng. Đôi khi bạn muốn các nút ở một bên bất kể đó là IOS hay Android. Nếu đúng như vậy, bạn có thể sử dụngleft hoặc là right các thuộc tính thay thế.

Chúng tôi cũng có thể thêm ion-nav-titlevào thanh điều hướng. Tất cả mã sẽ được đặt trongindex.html cơ thể, vì vậy nó có thể được sử dụng ở mọi nơi.

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

Nó sẽ tạo ra màn hình sau:

Các thuộc tính điều hướng khác

Bảng sau đây cho thấy một số chức năng khác, có thể được sử dụng với điều hướng Ionic.

Thuộc tính điều hướng

Thuộc tính	Tùy chọn	Chi tiết
chuyển đổi nav	không có, iOS, Android	Được sử dụng để đặt hoạt ảnh sẽ được áp dụng khi quá trình chuyển đổi xảy ra.
hướng điều hướng	chuyển tiếp, quay lại, nhập, thoát, hoán đổi	Được sử dụng để đặt hướng của hoạt ảnh khi quá trình chuyển đổi xảy ra.
phần cứngBackButtonClose	Boolean	Nó sẽ cho phép đóng phương thức khi nhấp vào nút quay lại phần cứng. Giá trị mặc định là true.

Bộ nhớ đệm

Ionic có khả năng lưu vào bộ nhớ đệm lên đến mười lượt xem để cải thiện hiệu suất. Nó cũng cung cấp một cách để xử lý bộ nhớ đệm theo cách thủ công. Vì chỉ các chế độ xem lùi được lưu vào bộ nhớ cache và các chế độ xem chuyển tiếp đang tải mỗi khi người dùng truy cập chúng, chúng tôi có thể dễ dàng đặt để lưu các chế độ xem chuyển tiếp vào bộ nhớ cache bằng cách sử dụng mã sau.

$ionicCinfigProvider.views.forwardCache(true);

Chúng tôi cũng có thể đặt bao nhiêu trạng thái sẽ được lưu vào bộ nhớ cache. Nếu chúng ta muốn ba chế độ xem được lưu vào bộ nhớ đệm, chúng ta có thể sử dụng đoạn mã sau.

$ionicConfigProvider.views.maxCache(3);

Bộ nhớ đệm có thể bị tắt bên trong $stateProvider hoặc bằng cách đặt thuộc tính thành ion-view. Cả hai ví dụ dưới đây.

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

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

Kiểm soát Thanh điều hướng

Chúng tôi có thể kiểm soát hoạt động của thanh điều hướng bằng cách sử dụng $ionicNavBarDelegatedịch vụ. Dịch vụ này cần được đưa vào bộ điều khiển của chúng tôi.

Mã HTML

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

Mã điều khiển

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

Các $ionicNavBarDelegatedịch vụ có các phương pháp hữu ích khác. Một số phương pháp này được liệt kê trong bảng sau.

Phương thức cho $ ionicNavBarDelegate

phương pháp	Tham số	Kiểu	Chi tiết
căn chỉnh (tham số)	trung tâm, trái, phải	chuỗi	Dùng để căn chỉnh tiêu đề.
showBackButton (tham số)	chỉ	Boolean	Được sử dụng để hiển thị hoặc ẩn nút quay lại.
tiêu đề (tham số)	tiêu đề	chuỗi	Được sử dụng để hiển thị tiêu đề mới.

Lịch sử theo dõi

Bạn có thể theo dõi lịch sử của các chế độ xem trước đó, hiện tại và chuyển tiếp bằng cách sử dụng $ionicHistorydịch vụ. Bảng sau đây cho thấy tất cả các phương pháp của dịch vụ này.

Phương thức cho $ ionicHistory

phương pháp	Tham số	Kiểu	Chi tiết
xem lịch sử	/	vật	Trả về dữ liệu lịch sử xem ứng dụng.
currentView ()	/	vật	Trả về chế độ xem hiện tại.
tiêu đề (tham số)	tiêu đề	chuỗi	Trả về ID của chế độ xem là cha của chế độ xem hiện tại.
currentTitle (tham số)	val	chuỗi	Trả về tiêu đề của dạng xem hiện tại. Nó có thể được cập nhật bằng cách thiết lập mớival giá trị.
backView ()	/	chuỗi	Trả về chế độ xem lại cuối cùng.
backTitle ()	/	chuỗi	Trả về tiêu đề của lần xem lại cuối cùng.
forwardView ()	/	vật	Trả về chế độ xem chuyển tiếp cuối cùng.
currentStateName ()	/	chuỗi	Trả về tên trạng thái hiện tại.
quay lại()	backCount	con số	Được sử dụng để đặt bao nhiêu chế độ xem để quay lại. Số phải là số âm. Nếu nó là số dương hoặc số không, nó sẽ không có tác dụng.
xóa lịch sử()	/	/	Được sử dụng để xóa toàn bộ lịch sử xem.
clearCache ()	/	lời hứa	Được sử dụng để xóa tất cả các chế độ xem được lưu trong bộ nhớ cache.
nextViewOptions ()	/	vật	Đặt các tùy chọn của chế độ xem tiếp theo. Bạn có thể xem ví dụ sau để biết thêm thông tin.

Các nextViewOptions() phương pháp có sẵn ba tùy chọn sau.

disableAnimate được sử dụng để tắt hoạt ảnh của lần thay đổi chế độ xem tiếp theo.
disableBack sẽ đặt chế độ xem mặt sau thành null.
historyRoot sẽ đặt chế độ xem tiếp theo làm chế độ xem gốc.

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