<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Title</title>
<link rel="stylesheet" href="lib/css/ionic.css">
<link rel="stylesheet" href="css/style.css">
<script src="lib/js/ionic.bundle.min.js"></script>
<script src="js/index.js"></script>
<script src="pages/tour/tour.js"></script>
<script src="pages/yd/yd.js"></script>
<script src="pages/tq/tq.js"></script>
</head>
<body ng-app="myapp">
<!--头部-->
<ion-nav-bar class="bar-assertive">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> 后退
</ion-nav-back-button>
</ion-nav-bar>
<!--视图部分-->
<ion-nav-view animation="slide-left-right">
<!-- 中间内容 -->
</ion-nav-view>
</body>
</html>
js方法
var myapp=angular.module("myapp",["ionic"]);
myapp.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('tour', {
url: '/tour',
templateUrl: 'pages/tour/tour.html',
controller:"tourCtrl"
})
.state('home', {
url: '/home',
templateUrl: 'pages/home/home.html'
})
.state('yd', {
url: '/yd',
templateUrl: 'pages/yd/yd.html',
controller:"ydCtrl"
})
.state('tq', {
url: '/tq',
templateUrl: 'pages/tq/tq.html',
controller:"tqCtrl"
})
.state('jd', {
url: '/jd',
templateUrl: 'pages/jd/jd.html'
})
;
$urlRouterProvider.otherwise("/tour");
});
css方法
.slider,.scroll{
height: 100%;
}
.box{
color: red;
text-align: center;
font-size: 200px;
line-height: 450px;
}