Ionic學習筆記4_ionic路由(頁面切換)

時間 2019-11-12

標籤 ionic 學習筆記路由頁面切換欄目系統網絡简体版

原文原文鏈接

1.1. ionic路由機制: 狀態html

1.2. ion-nav-viewios

<body ng-controller="firstCtrl">app

<a class="button" ui-sref="map">map</a> 框架

<a class="button" ui-sref="music">music</a>ionic

<a class="button" ui-sref="class">class</a>ide

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

<script>firefox

var app = angular.module("myApp", ["ionic"]);htm

app.config(function($stateProvider) {

$stateProvider

.state("map", {

templateUrl: "templates/map.html"

})

.state("music", {

templateUrl: "templates/music.html"

}) .state("class", {

templateUrl: "class.html"

});

}).controller('firstCtrl',function($scope,$state){

$state.go('music');

})

</script>

</body>

觸發狀態遷移

² 調用$state.go()方法，這是一個高級的便利方法；

² 點擊包含ui-sref指令的連接 <a ui-sref="state1">Go State 1</a>

² 導航到與狀態相關聯的 url。

1.3. ionic中內聯模板

單頁面實現多模塊，

AngularJS在編譯時會將內聯模板的id屬性值和其內容,分別做爲key 和value,存入$templateCache管理的hash表中:

常見的有幾種狀況。

n 使用ng-include指令 <div ng-include="'a.html'"></div>

n 使用$templateCache服務 var partial = $templateCache.get("a.html");

n 使用$http服務 $http.get("a.html",{cache:$templateCache}) .success(function(d,s){..}) .error(function(d,s){...});

1.4. 模板視圖 : ion-view

定製標題:ion-nav-title,特定按鈕:ion-nav-buttons,切換方式:nav-transition,切換方向: nav-direction

<ion-view view-title="Home111">

<ion-nav-title>

</ion-nav-title>

<ion-nav-buttons side="right">

<button class="button" ng-click="doSomething()"> register </button>

</ion-nav-buttons>

<ion-content>

<ion-list type="list-inset">

<ion-item ui-sref="music" class="item-icon-right">

map

</ion-item>

<ion-item ui-sref="music" class="item-icon-right" nav-transition="ios"> 定製視圖切換方式ios模擬

Go to music page!

</ion-item>

<ion-item ui-sref="music" class="item-icon-right" nav-direction="swap"> 視圖轉場時的切換方向

Go to music page!

</ion-item>

</ion-list>

</ion-content>

</ion-view>

1.5. 導航欄: ion-nav-bar

回退按鈕 : ion-nav-back-button

<ion-nav-bar align-title="center" class="bar-positive">

<ion-nav-back-button></ion-nav-back-button>

</ion-nav-bar>

1.6. 腳本接口 : $ionicNavBarDelegate

1.7. 訪問歷史 : $ionicHistory

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。