03 ionic+angular开发webapp笔记

最新推荐文章于 2022-05-10 15:28:29 发布

暮志未晚NAN

最新推荐文章于 2022-05-10 15:28:29 发布

阅读量820

点赞数

本文链接：https://blog.csdn.net/qq_30100043/article/details/53526148

版权

angular 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

ionic路由

这是一个超级简单的ui-route路由，因为ionic用的是ui-route，而不是angular的ng-router，第三个属于内联模块

<!DOCTYPE html>
<html ng-app="myapp">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height" />
		<link rel="stylesheet" type="text/css" href="lib/ionic/css/ionic.min.css"/>
		<script src="lib/ionic/js/ionic.bundle.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body ng-controller="mycontroller">
		<button class="button" ui-sref="first">first</button>
		<button class="button" ui-sref="second">second</button>
		<button class="button" ui-sref="third">third</button>
		<div ui-view></div>
		<script type="text/ng-template" id="third.html">
			<h1>this is third html</h1>
		</script>
	</body>
	<script type="text/javascript">
		var app = angular.module("myapp",["ionic"]);
		app.config(function($stateProvider){
			$stateProvider.state("first",{
				templateUrl:"first.html"
			}).state("second",{
				templateUrl:"second.html"
			}).state("third",{
				templateUrl:"third.html"
			});
		});
		app.controller("mycontroller",function($scope,$state){
			$state.go("first");
		});
	</script>
</html>

ionic对ui-route进行了封装，

将

<div ui-view></div>

修改为

<ion-nav-view></ion-nav-view>

尽管在模板视图中可以随便写 HTML，但是，在 ionic 中，我们总是使用指令 ion- -w view 来作
为模板视图内容的容器，这是为了与 ionic 的导航框架保持兼容：

<script id="..." type="text/ng-template">
<ion-view>
<!--模板视图内容-->
</ion-view>
</script>

ion- view 指令有一些可选的属性：
view- title - 视图标题文字
模板被载入导航视图 ion- nav-view 显示时，这个属性值将显示在导航栏 ion- - nav- -r bar 中
cache-view - 是否对这个模板视图进行缓存
允许值为：true | false，默认为 true
hide-back-button -是否隐藏导航栏中的返回按钮
当模板被载入导航视图时，如果之前有其他的模板，那么在导航栏 ion-nav-bar 上默认会自动显示返回按钮（使用指令 ion-nav-back-button 定义）。点击该按钮将返回前一个模板。

hide-back-button 的允许值为：true | false ，默认为 false
注意：：必须在导航栏中显式地声明返回按钮，否则即使将hide-back-button属性设为false，
这个按钮也不会出现:-)

hide-nav-bar - 是否隐藏导航栏
允许值为：true | false ,默认为 false

上面属性都是设置ion-nav-bar的，这个是放在容器外面专门显示头部导航栏的

ion-nav-bar 指令用来声明一个居于屏幕顶端的导航栏，它的内容随导航视图的状态变化
而自动同步变化：

<ion-nav-bar></ion-nav-bar>

ion-nav-bar 有以下可选的属性：
 align-title 标题对齐方式
允许值为： left | right | center。默认为 center，居中对齐
 no-tap-scroll - 点击导航栏时是否将内容滚动到顶部。
允许值为：true | false。默认为 true，这意味着如果视图中的内容下拉很长，那么在任
何时刻点击导航栏都可以立刻回到内容的开头部分。

回退按钮 : ion-nav-back-button
ionic 的指令 ion-nav-back-button 指令可以自动地让你回退到前一个视图：

<ion-nav-bar>
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>

当视图切换时，回退按钮会自动出现在导航条中，并显示前一个视图的标题。点击回退按
钮将返回前一个视图。
ion-nav-back-button 定制样式
我们可以定制回退按钮的图标、文本和样式。

现在，我们就可以改成这样~~~~

<!DOCTYPE html>
<html ng-app="myapp">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height" />
		<link rel="stylesheet" type="text/css" href="lib/ionic/css/ionic.min.css" />
		<script src="lib/ionic/js/ionic.bundle.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>

	<body ng-controller="mycontroller">

		<!--导航框架之导航栏-->
		<ion-nav-bar class="bar-positive" align-title="center">
			<!--添加下面的标签，切换页面后会有左上角的返回键-->
			<ion-nav-back-button></ion-nav-back-button>
		</ion-nav-bar>
		
		
		<!--导航框架之导航视图-->
		<ion-nav-view></ion-nav-view>
		
		
		
		
		<!--内联模板：home.html-->
		<script id="home.html" type="text/ng-template">
			<!-- 导航框架之模板视图 -->
			<ion-view view-title="Home">
				<!--模板视图内容-->
				<ion-content>
					<ion-list type="list-inset">
						<ion-item ui-sref="music" class="item-icon-right">
							Go to music page!
							<i class="icon ion-ios-arrow-right"></i>
						</ion-item>
					</ion-list>
				</ion-content>
			</ion-view>
		</script>
		
		
		
		<!--内联模板：music.html-->
		<script id="music.html" type="text/ng-template">
			<!-- ion-view 的title 属性值将显示在导航栏中 -->
			<ion-view view-title="Music">
				<!--模板视图内容-->
				<ion-content class="padding">
					<a class="button ion ion-home" ui-sref="home"> go home</a>
				</ion-content>
			</ion-view>
		</script>
		
		
	</body>
	<script type="text/javascript">
		var app = angular.module("myapp", ["ionic"]);
		app.config(function($stateProvider) {
			$stateProvider.state("home", {
				templateUrl: "home.html"
			}).state("music", {
				templateUrl: "music.html"
			});
		});
		app.controller("mycontroller", function($scope, $state) {
			$state.go("home");
		});
	</script>

</html>

暮志未晚NAN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
03 ionic+angular开发webapp笔记

ionic路由这是一个超级简单的ui-route路由，因为ionic用的是ui-route，而不是angular的ng-router，第三个属于内联模块 first second third this is third html var app = angular.module("myapp",["
复制链接

扫一扫