快乐学习 Ionic Framework+PhoneGap 手册1-3 {面板切换}
编程的快乐和乐趣，来自于能成功运行程序并运用到项目中,会在后面案例，实际运用到项目当中与数据更新一起说明
从面板切换开始，请看效果图和代码，这只是一个面板切换的效果
Index HTML Code
<!DOCTYPE html>
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
--> <!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script> <!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-controller="FaceCtrl"> <ion-nav-bar class="nav-title-slide-ios7 bar-positive">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar> <ion-nav-view animation="slide-left-right"></ion-nav-view> <script id="tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive"> <ion-tab title="首页" icon="ion-home" href="#/tab/home" badge="badges.home" badge-style="badge-assertive">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab> <ion-tab title="最新动态" icon="ion-ios7-information" href="#/tab/about" badge="5" badge-style="badge-assertive">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab> <ion-tab title="关于" icon="ion-ios7-world" ui-sref="tabs.contact" badge="badges.contact" badge-style="badge-assertive">
<ion-nav-view name="contact-tab"></ion-nav-view>
</ion-tab> </ion-tabs>
</script> <script id="home.html" type="text/ng-template">
<ion-view title="首页">
<ion-content class="padding">
<p>全栈工程师，也叫全端工程师，英文Full Stack developer。是指掌握多种技能，并能利用多种技能独立完成产品的人。</p>
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts">最新动态</a>
</p>
</ion-content>
</ion-view>
</script> <script id="facts.html" type="text/ng-template">
<ion-view title="最新动态" class="padding">
<ion-content>
<p>你现在的借口是阻碍你成功的绊脚石。 MarkFan</p>
<p>你现在的借口是阻碍你成功的绊脚石。 MarkFan</p>
<p>你现在的借口是阻碍你成功的绊脚石。 MarkFan</p>
<p>你现在的借口是阻碍你成功的绊脚石。 MarkFan</p>
<p>
<a class="button icon ion-home" href="#/tab/home"> 首页</a>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts2">关于</a>
</p>
</ion-content>
</ion-view>
</script> <script id="facts2.html" type="text/ng-template">
<ion-view title="最新动态">
<ion-content class="padding">
<p>不要别人的负能量击倒你的正能量。MarkFan</p>
<p>不要别人的负能量击倒你的正能量。MarkFan</p>
<p>
<a class="button icon ion-home" href="#/tab/home"> 首页</a>
<a class="button icon ion-chevron-left" href="#/tab/facts"> 最新动态</a>
</p>
</ion-content>
</ion-view>
</script> <script id="about.html" type="text/ng-template">
<ion-view title="最新动态">
<ion-content class="padding">
<h3>如果你比你身边的绝大多数人都强，那你该换朋友圈了</h3>
<p>若非青春苦短，谁会想来日方长</p>
<p>若非青春苦短，谁会想来日方长</p>
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/navstack">关于</a>
</p>
</ion-content>
</ion-view>
</script> <script id="nav-stack.html" type="text/ng-template">
<ion-view title="关于">
<ion-content class="padding">
<p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
</ion-content>
</ion-view>
</script> <script id="contact.html" type="text/ng-template">
<ion-view title="关于">
<ion-content>
<p>放弃是经线，坚持是纬线</p>
<p>没有一个谷底不可逾越</p>
</ion-content>
</ion-view>
</script> </body>
</html>
JS Code
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.facts', {
url: "/facts",
views: {
'home-tab': {
templateUrl: "facts.html"
}
}
})
.state('tabs.facts2', {
url: "/facts2",
views: {
'home-tab': {
templateUrl: "facts2.html"
}
}
})
.state('tabs.about', {
url: "/about",
views: {
'about-tab': {
templateUrl: "about.html"
}
}
})
.state('tabs.navstack', {
url: "/navstack",
views: {
'about-tab': {
templateUrl: "nav-stack.html"
}
}
})
.state('tabs.contact', {
url: "/contact",
views: {
'contact-tab': {
templateUrl: "contact.html"
}
}
});
$urlRouterProvider.otherwise("/tab/home");
})
.controller('HomeTabCtrl', function($scope) {
})
.controller('FaceCtrl', function($scope) {
console.log('FaceCtrl');
$scope.badges = {
home : 10,
contact : 3
};
console.log($scope.badges.home);
});
快乐学习 Ionic Framework+PhoneGap 手册1-3 {面板切换}的更多相关文章
- 快乐学习 Ionic Framework+PhoneGap 手册1-1{创建APP项目}
快乐学习 Ionic Framework+PhoneGap 手册1-1 * 前提必须安装 Node.js,安装PhoneGap,搭建Android开发环境,建议使用真机调试 {1.1}= 创建APP项 ...
- 快乐学习 Ionic Framework+PhoneGap 手册1-4 {登录页面}
编程的快乐和乐趣,来自于能成功运行程序并运用到项目中 有了面板然后加个登录页面,请看效果图和代码 Index HTML Code <!DOCTYPE html> <html ng-a ...
- 快乐学习 Ionic Framework+PhoneGap 手册1-5 {IO开关}
当然,即使努力了也没做成,至少你也有收获,因为你知道自己以后可以避开这个坑. 这是一个"IO"开关,请看效果图和代码,下一节,说明,数据交换 Index HTML Code < ...
- 快乐学习 Ionic Framework+PhoneGap 手册1-2{介绍Header,Content,Footer的使用}
*先运行第一个简单的APP,介绍Header,Content,Footer的使用 {2.1}运行一个简单的APP,效果如下 {2.2}Header代码 <ion-header-bar class ...
- 案例:1 Ionic Framework+AngularJS+ASP.NET MVC WebApi Jsonp 移动开发
落叶的庭院扫的一干二净之后,还要轻轻把树摇一下,抖落几片叶子,这才是Wabi Sabi的境界. 介绍:Ionic是移动框架,angularjs这就不用说了,ASP.Net MVC WebApi提供数据 ...
- 170多个Ionic Framework学习资源（转载）
在Ionic官网找到的学习资源:http://blog.ionic.io/learning-ionic-in-your-living-room/ 网上的文章比较多,但是很多时候我们很难找到自己需要的. ...
- Wijmo 5 + Ionic Framework之：费用跟踪 App
Wijmo 5 + Ionic Framework之:费用跟踪 App 费用跟踪应用采用了Wijmo5和Ionic Framework创建,目的是构建一个hybird app. 我们基于<Mob ...
- Mobile first! Wijmo 5 + Ionic Framework之：费用跟踪 App
费用跟踪应用采用了Wijmo5和Ionic Framework创建,目的是构建一个hybird app. 我们基于<Mobile first! Wijmo 5 + Ionic Framework ...
- Ionic Framework 4 介绍
Ionic Framework 4是一个开源UI工具包,用于使用Web技术(HTML,CSS和JavaScript)构建高性能的高质量移动和桌面应用程序.Ionic Framework专注于前端用户体 ...
随机推荐
- pycharm2018.1.4激活破解方法与汉化包-2018年6月19日
记录下来备用,顺便分享给大家,有能力的还是希望能够支持正版!支持正版!支持正版! 方法1:激活服务器,最简单快速(截止2018年6月19日可用) 在激活Jetbrains旗下任意产品的时候选择激活服务 ...
- Python Theano TypeError: Cannot convert Type TensorType(float64, vector) (of Variable Subtensor{int64:int64:}.0) into Type TensorType(float64, matrix)
参考: https://groups.google.com/forum/#!topic/theano-users/teA-07wOFpE 这个问题出现的原因是,我在读文件的时候,应该Train_X读成 ...
- CodeIgniter框架——源码分析之CodeIgniter.php
CodeIgniter.php可以说是CI的核心,大部分MVC的流程都是在这个文件夹中处理的,其中加载了很多外部文件,完成CI的一次完整流程. 首先是定义了CI的版本(此处为CI 2.2.0),接下来 ...
- 三维空间直线最近点对hdu4741
//求两条直线之间的关系(三维) //输入:两条不为点的直线 //输出:相交返回XIANGJIAO和交点p,平行返回PINGXING,共线返回GONGXIAN int LineAndLine(Line ...
- Uvalive6885(最短路)
题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=129723 题目大意:n个点,m条边,求出从0到n的最短距离,输出途 ...
- js获取滚动条的位置
页面具有 DTD,或者说指定了 DOCTYPE 时,使用 document.documentElement. 页面不具有 DTD,或者说没有指定了 DOCTYPE,时,使用 document.body ...
- RabbitMQ中Queue详细介绍
新建队列 新建Queue时有很多参数,都代表什么含义,在这里解释一下: 前述:Rabbit版本为3.7.6 ErLang 版本为 21.0.1 Name 必填项,队列的名字,建议格式可以为多个字段,表 ...
- 巨蟒python全栈开发linux之centos6 第二篇
1. .nginx负载均衡的实现 .准备三台机器,准备3台虚拟机,或者和俩同桌交流一下 192.168.226.128 是nginx资源服务器,返回页面的 192.168.226.129 用作ngin ...
- AJAX 异步传数组时候，后台接收不到！
呵呵,那么问题又来了! 这是为啥呢!! var ids= []; $.ajax({ url: 'xxxx.do', data: { ids: ids}, dataType: "json&qu ...
- KVM WEB管理工具webvirtmgr安装和使用
生产环境的KVM宿主机越来越多,需要对宿主机的状态进行调控.这里用webvirtmgr进行管理.图形化的WEB,让人能更方便的查看kvm 宿主机的情况和操作 1 安装支持的软件源 yum -y ins ...