<!DOCTYPE html>
<html ng-app="myApp" ng-controller="myController">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/ionic.css" />
<script src="js/ionic.bundle.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<!--在页面上加载导航栏-->
<ion-nav-bar align-title="center" class="bar-positive">
</ion-nav-bar>
<!--在页面上加载导航视图 用于加载不同的子页面-->
<ion-nav-view>
</ion-nav-view>
<script>
var myApp = angular.module("myApp", ['ionic']);
/**
* 2、注入组件$stateProvider,$urlRouterProvider
*/
myApp.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
$ionicConfigProvider.platform.ios.tabs.style('standard');
$ionicConfigProvider.platform.ios.tabs.position('bottom');
$ionicConfigProvider.platform.android.tabs.style('standard');
$ionicConfigProvider.platform.android.tabs.position('bottom');
$ionicConfigProvider.platform.ios.navBar.alignTitle('center');
$ionicConfigProvider.platform.android.navBar.alignTitle('left');
$ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');
$ionicConfigProvider.platform.ios.views.transition('ios');
$ionicConfigProvider.platform.android.views.transition('android');
$ionicConfigProvider.scrolling.jsScrolling(true);//<ion-content overflow-scroll=”true”>消除右边滚动条
/**
* 3、配置
* 1、配置父模板的路由信息
* 2、配置两个子模板的路由信息
*/
$stateProvider.state("tabs", {
templateUrl: "templates/tabs.html",
abstract: true,
url: "/tab"
});
$stateProvider.state("tabs.home", {
url: "/home",
views: {
"home-tab": {
templateUrl: "templates/home.html"
}
}
});
$stateProvider.state("tabs.about", {
url: "/about",
views: {
"about-tab": {
templateUrl: "templates/about.html"
}
}
});
$stateProvider.state("tabs.menu", {
url: "/menu",
views: {
"menu-tab": {
templateUrl: "templates/menu.html"
}
}
});
$stateProvider.state("tabs.my", {
url: "/my",
views: {
"my-tab": {
templateUrl: "templates/my.html"
}
}
});
$urlRouterProvider.otherwise("/tab/home");
});
myApp.controller("myController", function($scope) {
})
</script>
<!--4、制作模板-->
<!--1、制作父模板-->
<script type="text/ng-template" id="templates/tabs.html">
<ion-tabs class="tabs-icon-top tabs-stable tabs-color-active-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
<!--其中的name是指对应子模块的view的名字-->
</ion-tab>
<ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Menu" icon="ion-beer" href="#/tab/menu">
<ion-nav-view name="menu-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="My" icon="ion-person" href="#/tab/my">
<ion-nav-view name="my-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<!--2、制作子模板-->
<script type="text/ng-template" id="templates/home.html">
<ion-view view-title="home">
<!--设置导航栏标题-->
<!--设置子页面主体内容-->
<ion-content class="has-header has-footer">
<!--<div ng-include="'home.html'"></div>-->
<h1>home</h1>
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="templates/about.html">
<ion-view view-title="about">
<!--设置导航栏标题-->
<!--设置子页面主体内容-->
<ion-content class="has-header has-footer">
<!--<div ng-include="'xxx.html'"></div>-->
<h1>about</h1>
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="templates/menu.html">
<ion-view view-title="menu">
<!--设置导航栏标题-->
<!--设置子页面主体内容-->
<ion-content class="has-header has-footer">
<!--<div ng-include="'xxx.html'"></div>-->
<h1>menu</h1>
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="templates/my.html">
<ion-view view-title="my">
<!--设置导航栏标题-->
<!--设置子页面主体内容-->
<ion-content class="has-header has-footer">
<!--<div ng-include="'xxx.html'"></div>-->
<h1>my</h1>
</ion-content>
</ion-view>
</script>
</body>
</html>
转载于:https://my.oschina.net/u/3382800/blog/881142
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
