ionic路由
这是一个超级简单的ui-route路由，因为ionic用的是ui-route，而不是angular的ng-router，第三个属于内联模块
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height" />
<link rel="stylesheet" type="text/css" href="lib/ionic/css/ionic.min.css"/>
<script src="lib/ionic/js/ionic.bundle.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body ng-controller="mycontroller">
<button class="button" ui-sref="first">first</button>
<button class="button" ui-sref="second">second</button>
<button class="button" ui-sref="third">third</button>
<p ui-view></p>
<script type="text/ng-template" id="third.html">
<h1>this is third html</h1>
</script>
</body>
<script type="text/javascript">
var app = angular.module("myapp",["ionic"]);
app.config(function($stateProvider){
$stateProvider.state("first",{
templateUrl:"first.html"
}).state("second",{
templateUrl:"second.html"
}).state("third",{
templateUrl:"third.html"
});
});
app.controller("mycontroller",function($scope,$state){
$state.go("first");
});
</script>
</html>
ionic对ui-route进行了封装，
将
<p ui-view></p>
修改为
<ion-nav-view></ion-nav-view>
尽管在模板视图中可以随便写 HTML，但是，在 ionic 中，我们总是使用指令 ion- -w view 来 作
为模板视图内容的容器，这是为了与 ionic 的导航框架保持兼容：
<script id="..." type="text/ng-template"> <ion-view> <!--模板视图内容--> </ion-view> </script>
ion- view 指令有一些可选的属性：
view- title - 视图标题文字
模板被载入导航视图 ion- nav-view 显示时，这个属性值将显示在导航栏 ion- - nav- -r bar 中
cache-view - 是否对这个模板视图进行缓存
允许值为：true | false，默认为 true
hide-back-button -是否隐藏导航栏中的返回按钮
当模板被载入导航视图时，如果之前有其他的模板，那么在导航栏 ion-nav-bar 上默认会自动显示返回按钮(使用指令 ion-nav-back-button 定义)。点击该按钮将返回前一个模板。
hide-back-button 的允许值为：true | false ，默认为 false
注意： ：必须在导航栏中显式地声明返回按钮，否则即使将hide-back-button属性设为false，
这个按钮也不会出现:-)
hide-nav-bar - 是否隐藏导航栏
允许值为：true | false ,默认为 false
上面属性都是设置ion-nav-bar的，这个是放在容器外面专门显示头部导航栏的
ion-nav-bar 指令用来声明一个居于屏幕顶端的导航栏，它的内容随导航视图 的状态变化
而自动同步变化：
<ion-nav-bar></ion-nav-bar>
ion-nav-bar 有以下可选的属性：
align-title 标题对齐方式
允许值为： left | right | center。默认为 center，居中对齐
no-tap-scroll - 点击导航栏时是否将内容滚动到顶部。
允许值为：true | false。默认为 true，这意味着如果视图中的内容下拉很长，那么在任
何时刻 点击导航栏都可以立刻回到内容的开头部分。
回退按钮 : ion-nav-back-button
ionic 的指令 ion-nav-back-button 指令可以自动地让你回退到前一个视图：
<ion-nav-bar> <ion-nav-back-button></ion-nav-back-button> </ion-nav-bar>
当视图切换时，回退按钮会自动出现在导航条中，并显示前一个视图 的标题。点击回退按
钮将返回前一个视图。
ion-nav-back-button 定制样式
我们可以定制回退按钮的图标、文本和样式。
现在，我们就可以改成这样~~~~
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height" />
<link rel="stylesheet" type="text/css" href="lib/ionic/css/ionic.min.css" />
<script src="lib/ionic/js/ionic.bundle.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body ng-controller="mycontroller">
<!--导航框架之导航栏-->
<ion-nav-bar class="bar-positive" align-title="center">
<!--添加下面的标签，切换页面后会有左上角的返回键-->
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<!--导航框架之导航视图-->
<ion-nav-view></ion-nav-view>
<!--内联模板：home.html-->
<script id="home.html" type="text/ng-template">
<!-- 导航框架之模板视图 -->
<ion-view view-title="Home">
<!--模板视图内容-->
<ion-content>
<ion-list type="list-inset">
<ion-item ui-sref="music" class="item-icon-right">
Go to music page!
<i class="icon ion-ios-arrow-right"></i>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
<!--内联模板：music.html-->
<script id="music.html" type="text/ng-template">
<!-- ion-view 的title 属性值将显示在导航栏中 -->
<ion-view view-title="Music">
<!--模板视图内容-->
<ion-content class="padding">
<a class="button ion ion-home" ui-sref="home"> go home</a>
</ion-content>
</ion-view>
</script>
</body>
<script type="text/javascript">
var app = angular.module("myapp", ["ionic"]);
app.config(function($stateProvider) {
$stateProvider.state("home", {
templateUrl: "home.html"
}).state("music", {
templateUrl: "music.html"
});
});
app.controller("mycontroller", function($scope, $state) {
$state.go("home");
});
</script>
</html>
