Ionic学习笔记4_ionic路由(页面切换)
1.1. ionic路由机制: 状态
1.2. ion-nav-view
<body ng-controller="firstCtrl">
<a class="button" ui-sref="map">map</a>
<a class="button" ui-sref="music">music</a>
<a class="button" ui-sref="class">class</a>
<ion-nav-view></ion-nav-view>
<script type="text/ng-template" id="class.html"> Content of the template.class </script>
<script>
var app = angular.module("myApp", ["ionic"]);
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-buttons将被导航框架载入导航栏-->
<ion-nav-title>
<img src="img/firefox-logo.png" style="height:100%">
</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
<i class="icon ion-ios-arrow-right"></i>
</ion-item>
<ion-item ui-sref="music" class="item-icon-right" nav-transition="ios"> 定制视图切换方式ios模拟
Go to music page!
<i class="icon ion-ios-arrow-right"></i>
</ion-item>
<ion-item ui-sref="music" class="item-icon-right" nav-direction="swap"> 视图转场时的切换方向
Go to music page!
<i class="icon ion-ios-arrow-right"></i>
</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
