ionic综合+首页右上角点击进入包含一个轮播+进入后显示选项左上角有一个后退按钮每个选项包含内容

css包创建style.css

*{
margin: 0;
padding:0;
}
.box{
font-size: 150px;
text-align: center;
padding-top: 100px;
color: red;
}
.slider{
height: 100%;
}
.scroll{
height: 100%;
}

js包创建app.js

var myapp=angular.module("myapp",["ionic"]);
myapp.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('tour', {
url: '/',
templateUrl: 'pages/tour/tour.html',
controller:"tourCtrl"
})
.state('home', {
url: '/home',
templateUrl: 'pages/home/home.html'
}).state('reservation', {
url: '/reservation',
templateUrl: 'pages/reservation/reservation.html',
controller:"reservationCtrl"
}).state('restaurant', {
url: '/restaurant',
templateUrl: 'pages/restaurant/restaurant.html',
controller:"restaurantCtrl"

}).state('weather', {
url: '/weather',
templateUrl: 'pages/weather/weather.html',
controller:"weatherCtrl"
});
$urlRouterProvider.otherwise('/')
});
pages包里创建home reservation restaurant tour weather包
home包里创建home.html

<!-- ion-view的标题会在导航栏显示 -->
<ion-view title="选项">
<ion-content>
<ion-list>
<ion-item ui-sref="reservation"><i class="icon ion-clock"></i><span>我的预定</span></ion-item>
<ion-item ui-sref="restaurant"><i class="icon ion-clock"></i><span>附近餐馆</span></ion-item>
<ion-item ui-sref="weather"><i class="icon ion-clock"></i><span>天气查询</span></ion-item>

</ion-list>

</ion-content>
</ion-view>

reservation包里创建reservation.html和reservation.js
reservation.html

<ion-view title="我的预定">
<ion-content>
<div class="list">

<a class="item item-icon-left">
<i class="icon ion-document-text calm"></i><span>{{data.room}}</span>
</a>
<a class="item item-icon-left">
<i class="icon ion-android-sunny"></i><span>{{data.checkin|date:"yyyy-MM-dd"}}</span>
</a>
<a class="item item-icon-left">
<i class="icon ion-fork"></i><span>{{data.checkout|date:"yyyy-MM-dd"}}</span>
</a>
<a class="item item-icon-left">
<i class="icon ion-fork"></i><span>{{data.wifi}}</span>
</a>
<a class="item item-icon-left">
<i class="icon ion-fork"></i><span>{{data.price|currency:"$"}}</span>
</a>
<a class="item item-icon-left">
<i class="icon ion-fork"></i><span>{{data.price*7|currency:"$"}}</span>
</a>
</div>
</ion-content>
</ion-view>

reservation.js

angular.module("myapp")
.controller("reservationCtrl", function ($scope) {
// 准备预订数据-实际中应该从服务器端请求
$scope.data = {
room:"3302",
checkin:new Date(),
checkout:new Date(Date.now() + 7*24*60*60*1000),
wifi:"hello123",
price:268.00
};
});

restaurant包里创建restaurant.html和restaurant.js

restaurant.html

<ion-view title="附近餐馆">
<ion-content>
<ion-list>
<ion-item ng-repeat="item in data">
<h2>{{item.city}}</h2>
<img ng-src="{{item.image_url}}" style="width: 100%;height: auto">
<p>{{item.name}}</p>
</ion-item>
<ion-infinite-scroll
on-infinite="loadMore()"
distance="1%">
</ion-infinite-scroll>
</ion-list>

</ion-content>
</ion-view>

restaurant.js

angular.module("myapp")
.controller("restaurantCtrl", function ($scope,$http) {
$scope.data=[];
$http({
url:"../restaurant.json"
}).then(function(data){
$scope.data=data.data.restaurants;
//console.log($scope.data);
});
$scope.loadMore=function(){
$http.get('restaurant.json').success(function(items) {
//console.log(items.restaurants);
Array.prototype.push.apply($scope.data,items.restaurants);
//console.log($scope.data);
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
$scope.$on('stateChangeSuccess', function() {
$scope.loadMore();
});

});

tour包里创建tour.html和tourCtrl.js
tour.html

<!-- ion-view的标题会在导航栏显示 -->
<ion-view title="首页">
<ion-nav-buttons side="right">
<button class="button" ui-sref="home" ng-if="show">
进入
</button>
</ion-nav-buttons>
<ion-content >
<ion-slide-box on-slide-changed="slideChange(index)">
<ion-slide>
<div class="box blue">
<i class="icon ion-thermometer"></i><h2>{{name}}</h2>
</div>
</ion-slide>
<ion-slide>
<div class="box blue">
<i class="icon ion-cube"></i
><h2>我的预定</h2>
</div>
</ion-slide>
<ion-slide>
<div class="box blue">
<i class="icon ion-earth"></i
><h2>附近酒店</h2>
</div>
</ion-slide>
</ion-slide-box>

</ion-content>

</ion-view>

tourCtrl.js

angular.module("myapp").controller("tourCtrl",function ($scope) {
$scope.name="as";
$scope.show=false;
$scope.slideChange=function (index) {
console.log(index);
if(index==2){
$scope.show=true;
console.log($scope.show);
}else{
$scope.show=false;
console.log($scope.show);
}
}
})
weather包里创建weather.html和weather,js 

weather.html

<ion-view title="欢迎光临八维度假村">
<ion-content>
<div class="list">
<a class="item item-icon-left" >
<i class="icon ion-document-text calm"></i>天气预报
</a>
<a class="item item-icon-left" >
<i class="icon ion-android-sunny"></i><p>{{items.city}}</p>
</a>
<a class="item item-icon-left" >
<i class="icon ion-fork"></i><p>{{items.wendu}}</p>
</a>
<a class="item-icon-left" >
<i class="icon ion-fork"></i><p>{{items.ganmao}}</p>
</a>
</div>
</ion-content>
</ion-view>

weather,js

angular.module("myapp").controller("weatherCtrl",function($scope,$http){
$http.get("http://wthrcdn.etouch.cn/weather_mini?city=北京").success(function (data) {
$scope.items=data.data;
console.log(data.data);
})
});

restaurant.json

{
"totalPages": 30,
"currentPage": 1,
"restaurants": [
{
"id": 72253,
"name": "'Ulu Ocean Grill and Sushi Lounge",
"address": "72-100 Kaupulehu Dr.",
"city": "Kaupulehu",
"state": "HI",
"area": "Hawaii",
"postal_code": "96740",
"country": "US",
"phone": "8083258000x",
"lat": null,
"lng": null,
"price": null,
"reserve_url": "http://www.opentable.com/single.aspx?rid=72253",
"mobile_reserve_url": "http://mobile.opentable.com/opentable/?restId=72253",
"image_url": "https://www.opentable.com/img/restimages/72253.jpg"
},
{
"id": 49108,
"name": "12th Ave. Grill",
"address": "1120 12th Ave",
"city": "Honolulu",
"state": "HI",
"area": "Hawaii",
"postal_code": "96816",
"country": "US",
"phone": "8087329469",
"lat": null,
"lng": null,
"price": null,
"reserve_url": "http://www.opentable.com/single.aspx?rid=49108",
"mobile_reserve_url": "http://mobile.opentable.com/opentable/?restId=49108",
"image_url": "https://www.opentable.com/img/restimages/49108.jpg"
},
{
"id": 92827,
"name": "53 by the Sea",
"address": "53 Ahui Street",
"city": "Honolulu",
"state": "HI",
"area": "Hawaii",
"postal_code": "96813",
"country": "US",
"phone": "8085365353x",
"lat": null,
"lng": null,
"price": null,
"reserve_url": "http://www.opentable.com/single.aspx?rid=92827",
"mobile_reserve_url": "http://mobile.opentable.com/opentable/?restId=92827",
"image_url": "https://www.opentable.com/img/restimages/92827.jpg"
},
{
"id": 39541,
"name": "Alan Wong's Restaurant",
"address": "1857 S. King Street",
"city": "Honolulu",
"state": "HI",
"area": "Hawaii",
"postal_code": "96826",
"country": "US",
"phone": "8089492526x",
"lat": null,
"lng": null,
"price": null,
"reserve_url": "http://www.opentable.com/single.aspx?rid=39541",
"mobile_reserve_url": "http://mobile.opentable.com/opentable/?restId=39541",
"image_url": "https://www.opentable.com/img/restimages/39541.jpg"
},
{
"id": 102163,
"name": "Aloha Beer Co.",
"address": "580 N. Nimitz Hwy.",
"city": "Honolulu",
"state": "HI",
"area": "Hawaii",
"postal_code": "96817",
"country": "US",
"phone": "8085455959",
"lat": null,
"lng": null,
"price": null,
"reserve_url": "http://www.opentable.com/single.aspx?rid=102163",
"mobile_reserve_url": "http://mobile.opentable.com/opentable/?restId=102163",
"image_url": "https://www.opentable.com/img/restimages/102163.jpg"
},
{
"id": 76030,
"name": "Aulii Luau",
"address": "2440 Hoonani Road",
"city": "Koloa",
"state": "HI",
"area": "Hawaii",
"postal_code": "96756",
"country": "US",
"phone": "8086341499x",
"lat": null,
"lng": null,
"price": null,
"reserve_url": "http://www.opentable.com/single.aspx?rid=76030",
"mobile_reserve_url": "http://mobile.opentable.com/opentable/?restId=76030",
"image_url": "https://www.opentable.com/img/restimages/76030.jpg"
},
{
"id": 13885,
"name": "Azul",
"address": "92-1001 Olani Street",
"city": "Kapolei",
"state": "HI",
"area": "Hawaii",
"postal_code": "96707",
"country": "US",
"phone": "8086790079x",
"lat": null,
"lng": null,
"price": null,
"reserve_url": "http://www.opentable.com/single.aspx?rid=13885",
"mobile_reserve_url": "http://mobile.opentable.com/opentable/?restId=13885",
"image_url": "https://www.opentable.com/img/restimages/13885.jpg"
},
{
"id": 28060,
"name": "Azure - The Royal Hawaiian",
"address": "2259 Kalakaua Avenue",
"city": "Honolulu",
"state": "HI",
"area": "Hawaii",
"postal_code": "96815",
"country": "US",
"phone": "8089317440x",
"lat": null,
"lng": null,
"price": null,
"reserve_url": "http://www.opentable.com/single.aspx?rid=28060",
"mobile_reserve_url": "http://mobile.opentable.com/opentable/?restId=28060",
"image_url": "https://www.opentable.com/img/restimages/28060.jpg"
},
{
"id": 87352,
"name": "B's Bar & Grinds",
"address": "66-197 Kamehameha Hwy",
"city": "Haleiwa",
"state": "HI",
"area": "Hawaii",
"postal_code": "96712",
"country": "US",
"phone": "8087444125",
"lat": null,
"lng": null,
"price": null,
"reserve_url": "http://www.opentable.com/single.aspx?rid=87352",
"mobile_reserve_url": "http://mobile.opentable.com/opentable/?restId=87352",
"image_url": "https://www.opentable.com/img/restimages/87352.jpg"
},
{
"id": 56422,
"name": "Baci Bistro",
"address": "30 Aulike St.",
"city": "Kailua",
"state": "HI",
"area": "Hawaii",
"postal_code": "96734",
"country": "US",
"phone": "8082627555",
"lat": null,
"lng": null,
"price": null,
"reserve_url": "http://www.opentable.com/single.aspx?rid=56422",
"mobile_reserve_url": "http://mobile.opentable.com/opentable/?restId=56422",
"image_url": "https://www.opentable.com/img/restimages/56422.jpg"
}
]
}

index.html

<!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 href="../lib/css/ionic.css" rel="stylesheet">
<script src="../lib/js/ionic.bundle.min.js"></script>
<script src="js/app.js"></script>
<script src="pages/reservation/reservation.js"></script>
<script src="pages/restaurant/restaurant.js"></script>
<script src="pages/weather/weather.js"></script>
<script src="pages/tour/tourCtrl.js"></script>
<link href="css/style.css" rel="stylesheet">
</head>
<body ng-app="myapp">
<ion-nav-bar>
<ion-nav-back-button class="">
<i class="ion-arrow-left-c"></i> 后退
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view >
<!-- 中间内容 -->
</ion-nav-view>
</body>
</html>