Ionic-자바 스크립트 탐색

탐색은 모든 앱의 핵심 구성 요소 중 하나입니다. Ionic은AngularJS UI Router 탐색을 처리합니다.

내비게이션 사용

탐색은 app.js파일. Ionic 템플릿 중 하나를 사용하는 경우$stateProvider 앱에 주입 된 서비스 config. 앱 상태를 만드는 가장 간단한 방법은 다음 예제에 나와 있습니다.

그만큼 $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.

state1.html Code

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

탐색 메뉴 생성

다음에서 앱에 탐색 모음을 추가 할 수 있습니다. index.html 추가하여 본문 “ion-nav-bar”요소. 내비게이션 바 안에ion-nav-back-button아이콘으로. 이전 상태로 돌아가는 데 사용됩니다. 상태가 변경되면 버튼이 자동으로 나타납니다. 우리는goBack() 함수를 사용합니다. $ionicHistory이 기능을 처리하기위한 서비스. 따라서 사용자가 홈 상태를 떠나state1, 사용자가 홈 상태로 돌아 가고자 할 경우 녹화 할 수있는 뒤로 버튼이 나타납니다.

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-nav-buttons. 이 요소는ion-nav-bar 아니면 그 ion-view. 우리는 할당 할 수 있습니다side4 개의 옵션 값이있는 속성. 그만큼primary 과 secondary값은 사용되는 플랫폼에 따라 버튼을 배치합니다. 때로는 IOS 또는 Android에 관계없이 한쪽에 버튼이 필요합니다. 이 경우 다음을 사용할 수 있습니다.left 아니면 그 right 대신 속성.

우리는 또한 ion-nav-title탐색 모음에. 모든 코드는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 내비게이션과 함께 사용할 수있는 몇 가지 다른 기능을 보여줍니다.

탐색 속성

속성	옵션	세부 묘사
탐색 전환	없음, iOS, Android	전환이 발생할 때 적용해야하는 애니메이션을 설정하는 데 사용됩니다.
탐색 방향	앞으로, 뒤로, 입력, 종료, 교체	전환이 발생할 때 애니메이션의 방향을 설정하는 데 사용됩니다.
hardwareBackButtonClose	부울	하드웨어 뒤로 버튼을 클릭하면 모달을 닫을 수 있습니다. 기본값은 true입니다.

캐싱

Ionic은 성능 향상을 위해 최대 10 개의 뷰를 캐싱 할 수 있습니다. 또한 캐싱을 수동으로 처리하는 방법도 제공합니다. 뒤로보기 만 캐시되고 사용자가 방문 할 때마다 앞으로보기 만로드되므로 다음 코드를 사용하여 손쉽게 앞으로보기를 캐시하도록 설정할 수 있습니다.

$ionicCinfigProvider.views.forwardCache(true);

캐시 할 상태 수를 설정할 수도 있습니다. 세 개의 뷰를 캐시하려면 다음 코드를 사용할 수 있습니다.

$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);
}

그만큼 $ionicNavBarDelegate서비스에는 다른 유용한 방법이 있습니다. 이러한 방법 중 일부는 다음 표에 나열되어 있습니다.

$ ionicNavBarDelegate의 메소드

방법	매개 변수	유형	세부 묘사
정렬 (매개 변수)	중앙, 왼쪽, 오른쪽	끈	제목을 정렬하는 데 사용됩니다.
showBackButton (매개 변수)	보여 주다	부울	뒤로 버튼을 표시하거나 숨기는 데 사용됩니다.
제목 (매개 변수)	표제	끈	새 제목을 표시하는 데 사용됩니다.

추적 기록

다음을 사용하여 이전보기, 현재보기 및 앞으로보기의 기록을 추적 할 수 있습니다. $ionicHistory서비스. 다음 표는이 서비스의 모든 방법을 보여줍니다.

$ ionicHistory의 방법

방법	매개 변수	유형	세부 묘사
viewHistory	/	목적	앱보기 기록 데이터를 반환합니다.
currentView ()	/	목적	현재보기를 반환합니다.
제목 (매개 변수)	표제	끈	현재보기의 부모 인보기의 ID를 반환합니다.
currentTitle (매개 변수)	발	끈	현재보기의 제목을 반환합니다. 새로운 설정으로 업데이트 할 수 있습니다.val 값.
backView ()	/	끈	마지막 후면보기를 반환합니다.
backTitle ()	/	끈	마지막 후면보기의 제목을 반환합니다.
forwardView ()	/	목적	마지막 앞으로보기를 반환합니다.
currentStateName ()	/	끈	현재 상태 이름을 반환합니다.
goBack ()	backCount	번호	되돌아 갈보기 수를 설정하는 데 사용됩니다. 숫자는 음수 여야합니다. 양수 또는 0이면 효과가 없습니다.
clearHistory ()	/	/	전체보기 기록을 지우는 데 사용됩니다.
clearCache ()	/	약속	캐시 된 모든 뷰를 지우는 데 사용됩니다.
nextViewOptions ()	/	목적	다음보기의 옵션을 설정합니다. 자세한 내용은 다음 예제를 참조하십시오.

그만큼 nextViewOptions() 메서드에는 다음 세 가지 옵션을 사용할 수 있습니다.

• disableAnimate 다음 뷰 변경 애니메이션을 비활성화하는 데 사용됩니다.

• disableBack 백 뷰를 null로 설정합니다.

• historyRoot 다음보기를 루트보기로 설정합니다.

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