ionic页面
丌官招
<!DOCTYPE html>
<html ng-app="TravelApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js" type="text/javascript"></script>
<title>旅行计划</title>
<script type="text/javascript">
var TravelApp = angular.module("TravelApp", ["ionic"]);
TravelApp.constant("WEATHER_URL", "https://free-api.heweather.com/v5/weather?city=beijing&key=545d63e185fc48169a43cbabba6e74d2");
TravelApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("home", {
url: "/home",
views: {
"view-home": {
templateUrl: "home.html"
}
}
}).state("add", {
url: "/add",
views: {
"view-add": {
templateUrl: "add.html"
}
}
}).state("weather", {
url: "/weather",
views: {
"view-weather": {
templateUrl: "weather.html"
}
}
});
});
TravelApp.factory("Weather", function ($http, $q, WEATHER_URL) {
return function () {
return $http.get(WEATHER_URL).then(function (response) {
var data = response.data.HeWeather5[0];
var result = {city: data.basic.city, txt: data.now.cond.txt, hours: [], days: []};
for (var i in data.hourly_forecast) {
result.hours.push({
time: data.hourly_forecast[i].date,
txt: data.hourly_forecast[i].cond.txt
});
}
for (var i in data.daily_forecast) {
result.days.push({
date: data.daily_forecast[i].date,
txt: data.daily_forecast[i].cond.txt_d
});
}
return result;
}, function (response) {
return $q.reject(response.status);
});
}
});
TravelApp.controller("TravelCtrl", function ($scope, $ionicSideMenuDelegate, Weather) {
$scope.toggleLeft = function () {
$ionicSideMenuDelegate.toggleLeft();
};
Weather().then(function (data) {
$scope.weather = data;
}, function (status) {
console.log(status);
});
});
</script>
</head>
<body ng-controller="TravelCtrl">
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-view name="view-add"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">我的行程</h1>
<button class="icon ion-ios-arrow-back" ng-click="toggleLeft()"></button>
</header>
<ion-content class="has-header">
<div class="list card">
<div class="item item-avatar">
<img src="img/Holland.jpeg"/>
<h2>荷兰</h2>
<p>2017-10-01 | 4天</p>
</div>
<div class="item item-avatar">
<img src="img/Japan.jpeg"/>
<h2>日本</h2>
<p>2017-10-01 | 4天</p>
</div>
<div class="item item-avatar">
<img src="img/India.jpeg"/>
<h2>印度</h2>
<p>2017-10-01 | 4天</p>
</div>
<div class="item item-avatar">
<img src="img/Ireland.jpeg"/>
<h2>爱尔兰</h2>
<p>2017-10-01 | 4天</p>
</div>
<div class="item item-avatar">
<img src="img/Korea.jpeg"/>
<h2>韩国</h2>
<p>2017-10-01 | 4天</p>
</div>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<ion-tabs class="tabs-positive tabs-icon-top">
<ion-tab title="我的行程" icon-on="ion-ios-paper" icon-off="ion-ios-paper-outline" ui-sref="home">
<ion-nav-view name="view-home"></ion-nav-view>
</ion-tab>
<ion-tab title="新目的地" icon-on="ion-ios-plus" icon-off="ion-ios-plus-outline" ui-sref="add">
</ion-tab>
<ion-tab title="天气" icon-on="ion-ios-cloud" icon-off="ion-ios-cloud-outline" ui-sref="weather">
<ion-nav-view name="view-weather"></ion-nav-view>
</ion-tab>
</ion-tabs>
<script id="home.html" type="text/ng-template">
<ion-header-bar class="bar-positive">
<h1 class="title">我的行程</h1>
</ion-header-bar>
<ion-content class="has-header ionic-pseudo">
<div class="list card">
<div class="item item-avatar">
<img src="img/Holland.jpeg"/>
<h2>荷兰</h2>
<p>2017-10-01 | 4天</p>
</div>
<div class="item item-image">
<img src="img/Holland.jpeg"/>
</div>
</div>
<div class="list card">
<div class="item item-avatar">
<img src="img/Japan.jpeg"/>
<h2>日本</h2>
<p>2017-10-01 | 4天</p>
</div>
<div class="item item-image">
<img src="img/Japan.jpeg"/>
</div>
</div>
<div class="list card">
<div class="item item-avatar">
<img src="img/India.jpeg"/>
<h2>印度</h2>
<p>2017-10-01 | 4天</p>
</div>
<div class="item item-image">
<img src="img/India.jpeg"/>
</div>
</div>
<div class="list card">
<div class="item item-avatar">
<img src="img/Ireland.jpeg"/>
<h2>爱尔兰</h2>
<p>2017-10-01 | 4天</p>
</div>
<div class="item item-image">
<img src="img/Ireland.jpeg"/>
</div>
</div>
<div class="list card">
<div class="item item-avatar">
<img src="img/Korea.jpeg"/>
<h2>韩国</h2>
<p>2017-10-01 | 4天</p>
</div>
<div class="item item-image">
<img src="img/Korea.jpeg"/>
</div>
</div>
</ion-content>
</script>
<script id="add.html" type="text/ng-template">
<ion-header-bar class="bar-positive">
<button class="button button-icon ion-ios-more" ng-click="toggleLeft()"></button>
<h1 class="title">新目的地</h1>
<button class="button button-assertive">保存</button>
</ion-header-bar>
<ion-content class="has-header">
<div class="list">
<div class="item item-input item-select">
<div class="input-label">
新目的地：
</div>
<select>
<option>荷兰</option>
<option>日本</option>
<option>印度</option>
<option>爱尔兰</option>
<option>韩国</option>
</select>
</div>
<label class="item item-input">
<span class="input-label">出发时间：</span>
<input type="date"/>
</label>
<label class="item item-input">
<span class="input-label">返回时间：</span>
<input type="date"/>
</label>
<label class="item item-input">
<span class="input-label">想去品味下......</span>
</label>
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox"/>
</label>
异域风情
</li>
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox"/>
</label>
繁华都市
</li>
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox"/>
</label>
宁静山村
</li>
</ul>
</div>
</ion-content>
</script>
<script id="weather.html" type="text/ng-template">
<ion-header-bar class="bar-positive">
<h1 class="title">天气</h1>
</ion-header-bar>
<ion-content class="has-header">
<div class="list">
<div class="item item-divider">
今天天气：
</div>
<a class="item">
{{ weather.city }} : {{ weather.txt }}
</a>
<div class="item item-divider">
未来几小时：
</div>
<a class="item" ng-repeat="value in weather.hours">
{{ value.time }} : {{ value.txt }}
</a>
<div class="item item-divider">
未来三天：
</div>
<a class="item" ng-repeat="value in weather.days">
{{ value.date }} : {{ value.txt }}
</a>
</div>
</ion-content>
</script>
</body>
<html ng-app="TravelApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js" type="text/javascript"></script>
<title>旅行计划</title>
<script type="text/javascript">
var TravelApp = angular.module("TravelApp", ["ionic"]);
TravelApp.constant("WEATHER_URL", "https://free-api.heweather.com/v5/weather?city=beijing&key=545d63e185fc48169a43cbabba6e74d2");
TravelApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("home", {
url: "/home",
views: {
"view-home": {
templateUrl: "home.html"
}
}
}).state("add", {
url: "/add",
views: {
"view-add": {
templateUrl: "add.html"
}
}
}).state("weather", {
url: "/weather",
views: {
"view-weather": {
templateUrl: "weather.html"
}
}
});
});
TravelApp.factory("Weather", function ($http, $q, WEATHER_URL) {
return function () {
return $http.get(WEATHER_URL).then(function (response) {
var data = response.data.HeWeather5[0];
var result = {city: data.basic.city, txt: data.now.cond.txt, hours: [], days: []};
for (var i in data.hourly_forecast) {
result.hours.push({
time: data.hourly_forecast[i].date,
txt: data.hourly_forecast[i].cond.txt
});
}
for (var i in data.daily_forecast) {
result.days.push({
date: data.daily_forecast[i].date,
txt: data.daily_forecast[i].cond.txt_d
});
}
return result;
}, function (response) {
return $q.reject(response.status);
});
}
});
TravelApp.controller("TravelCtrl", function ($scope, $ionicSideMenuDelegate, Weather) {
$scope.toggleLeft = function () {
$ionicSideMenuDelegate.toggleLeft();
};
Weather().then(function (data) {
$scope.weather = data;
}, function (status) {
console.log(status);
});
});
</script>
</head>
<body ng-controller="TravelCtrl">
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-view name="view-add"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">我的行程</h1>
<button class="icon ion-ios-arrow-back" ng-click="toggleLeft()"></button>
</header>
<ion-content class="has-header">
<div class="list card">
<div class="item item-avatar">
<img src="img/Holland.jpeg"/>
<h2>荷兰</h2>
<p>2017-10-01 | 4天</p>
</div>
<div class="item item-avatar">
<img src="img/Japan.jpeg"/>
<h2>日本</h2>
<p>2017-10-01 | 4天</p>
</div>
<div class="item item-avatar">
<img src="img/India.jpeg"/>
<h2>印度</h2>
<p>2017-10-01 | 4天</p>
</div>
<div class="item item-avatar">
<img src="img/Ireland.jpeg"/>
<h2>爱尔兰</h2>
<p>2017-10-01 | 4天</p>
</div>
<div class="item item-avatar">
<img src="img/Korea.jpeg"/>
<h2>韩国</h2>
<p>2017-10-01 | 4天</p>
</div>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<ion-tabs class="tabs-positive tabs-icon-top">
<ion-tab title="我的行程" icon-on="ion-ios-paper" icon-off="ion-ios-paper-outline" ui-sref="home">
<ion-nav-view name="view-home"></ion-nav-view>
</ion-tab>
<ion-tab title="新目的地" icon-on="ion-ios-plus" icon-off="ion-ios-plus-outline" ui-sref="add">
</ion-tab>
<ion-tab title="天气" icon-on="ion-ios-cloud" icon-off="ion-ios-cloud-outline" ui-sref="weather">
<ion-nav-view name="view-weather"></ion-nav-view>
</ion-tab>
</ion-tabs>
<script id="home.html" type="text/ng-template">
<ion-header-bar class="bar-positive">
<h1 class="title">我的行程</h1>
</ion-header-bar>
<ion-content class="has-header ionic-pseudo">
<div class="list card">
<div class="item item-avatar">
<img src="img/Holland.jpeg"/>
<h2>荷兰</h2>
<p>2017-10-01 | 4天</p>
</div>
<div class="item item-image">
<img src="img/Holland.jpeg"/>
</div>
</div>
<div class="list card">
<div class="item item-avatar">
<img src="img/Japan.jpeg"/>
<h2>日本</h2>
<p>2017-10-01 | 4天</p>
</div>
<div class="item item-image">
<img src="img/Japan.jpeg"/>
</div>
</div>
<div class="list card">
<div class="item item-avatar">
<img src="img/India.jpeg"/>
<h2>印度</h2>
<p>2017-10-01 | 4天</p>
</div>
<div class="item item-image">
<img src="img/India.jpeg"/>
</div>
</div>
<div class="list card">
<div class="item item-avatar">
<img src="img/Ireland.jpeg"/>
<h2>爱尔兰</h2>
<p>2017-10-01 | 4天</p>
</div>
<div class="item item-image">
<img src="img/Ireland.jpeg"/>
</div>
</div>
<div class="list card">
<div class="item item-avatar">
<img src="img/Korea.jpeg"/>
<h2>韩国</h2>
<p>2017-10-01 | 4天</p>
</div>
<div class="item item-image">
<img src="img/Korea.jpeg"/>
</div>
</div>
</ion-content>
</script>
<script id="add.html" type="text/ng-template">
<ion-header-bar class="bar-positive">
<button class="button button-icon ion-ios-more" ng-click="toggleLeft()"></button>
<h1 class="title">新目的地</h1>
<button class="button button-assertive">保存</button>
</ion-header-bar>
<ion-content class="has-header">
<div class="list">
<div class="item item-input item-select">
<div class="input-label">
新目的地：
</div>
<select>
<option>荷兰</option>
<option>日本</option>
<option>印度</option>
<option>爱尔兰</option>
<option>韩国</option>
</select>
</div>
<label class="item item-input">
<span class="input-label">出发时间：</span>
<input type="date"/>
</label>
<label class="item item-input">
<span class="input-label">返回时间：</span>
<input type="date"/>
</label>
<label class="item item-input">
<span class="input-label">想去品味下......</span>
</label>
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox"/>
</label>
异域风情
</li>
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox"/>
</label>
繁华都市
</li>
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox"/>
</label>
宁静山村
</li>
</ul>
</div>
</ion-content>
</script>
<script id="weather.html" type="text/ng-template">
<ion-header-bar class="bar-positive">
<h1 class="title">天气</h1>
</ion-header-bar>
<ion-content class="has-header">
<div class="list">
<div class="item item-divider">
今天天气：
</div>
<a class="item">
{{ weather.city }} : {{ weather.txt }}
</a>
<div class="item item-divider">
未来几小时：
</div>
<a class="item" ng-repeat="value in weather.hours">
{{ value.time }} : {{ value.txt }}
</a>
<div class="item item-divider">
未来三天：
</div>
<a class="item" ng-repeat="value in weather.days">
{{ value.date }} : {{ value.txt }}
</a>
</div>
</ion-content>
</script>
</body>
</html>
//代码复制就可以运行
类似资料：