AngularJs轻松入门（七）多视图切换

在AngularJs应用中，我们可以將html碎片写在一个单独的文件中，然后在其他页面中將该段碎片加载进来。如果有多个碎片文件，我们还可以在控制器中根据用户的操作动态的加载不同的碎片，从而达到切换视图的效果。

先来看看笔者写好的一个案例吧：

这两首词实际上是两个html碎片，分别写在page1.html和page2.html。下面是这两个文件的内容：

<!--page1.html内容-->
<div><p>《南乡子·登京口北固亭有怀》</p><p>何处望神州？满眼风光北固楼。千古兴亡多少事，悠悠，不尽长江滚滚流。</p><p>年少万兜鍪，坐断东南战未休。天下英雄谁敌手，曹刘。生子当如孙仲谋。</p>
</div>

<!--page2.html内容-->
<div><p>《蝶恋花》</p><p>伫倚危楼风细细，望极春愁，黯黯生天际。草色烟光残照里，无言谁会凭阑意。</p><p>拟把疏狂图一醉，对酒当歌，强乐还无味。衣带渐宽终不悔，为伊消得人憔悴。</p>
</div>

接下来我们看看如何实现这两个碎片的切换。

<!DOCTYPE html>
<html ng-app="routeMod">
<head lang="en"><meta charset="UTF-8"><script type="text/javascript" src="angular-1.3.0.14/angular.js"></script><script type="text/javascript" src="angular-1.3.0.14/angular-route.js"></script><link type="text/css" href="css/tutorial07.css" rel="stylesheet"><title>tutorial07.html</title>
</head>
<body><header>Header</header><div id="content" ng-controller="MultiViewController"><div  id="myView" ng-view="myView" ng-init="init()"></div><div id="btnDiv"><button ng-click="prePage()">上一页</button><button ng-click="nextPage()">下一页</button></div></div><footer>Copyright:Rongbo_J</footer><script>var routeMod = angular.module('routeMod', ['ngRoute']);routeMod.config(['$routeProvider',function($routeProvider){$routeProvider.when('/1',{templateUrl:'tutorial07/page1.html',controller:'MultiViewController'}).when('/2',{templateUrl:'tutorial07/page2.html',controller:'MultiViewController'})}])routeMod.controller("MultiViewController",function($scope,$log,$location){$scope.init = function () {$location.path("/1");}$scope.prePage = function () {$log.info("prePage");$location.path("/1");};$scope.nextPage = function () {$log.info("nextPage");$location.path("/2");};});</script>
</body>
</html>

这里我们需要用到AngularJs的路由模块ngRoute，模块代码封装在angular-route.js文件，和上节一样我们我们需要引入它。

<script type="text/javascript" src="angular-1.3.0.14/angular-route.js"></script>

然后将它注入到我们的模块中，代码如下：

var routeMod = angular.module('routeMod', ['ngRoute']);

接下来的工作是配置html碎片的访问路径，我们需要调用模块的config方法来对$routeProvider服务进行配置，代码如下：

 routeMod.config(['$routeProvider',function($routeProvider){$routeProvider.when('/1',{templateUrl:'tutorial07/page1.html',controller:'MultiViewController'}).when('/2',{templateUrl:'tutorial07/page2.html',controller:'MultiViewController'})}])

我们通过ng-view指令定义了一个视口，在控制器中调用$location.path()方法来指定在该视口中加载哪一个碎片。

源码地址：https://github.com/rongbo-j/angularjs

AngularJs轻松入门（七）多视图切换相关推荐

四、vue前端路由（轻松入门vue）
轻松入门vue系列 Vue前端路由七.Vue前端路由 1. 路由的基本概念与原理后端路由前端路由实现简单的前端路由 vue-router基本概念 2. vue-router的基本使用基本使用 ...
tableau必知必会之使用参数操作在同一视图切换指标
前言我们之前分享过两个"在同一视图切换图表"的例子:如何在同一视图中切换不同图表和使用计算实现同一视图切换相同分析维度的图表. 前者利用容器的方式,可以实现图表在视图物理位置的切 ...
asp.net core轻松入门之MVC中Options读取配置文件
接上一篇中讲到利用Bind方法读取配置文件 ASP.NET Core轻松入门Bind读取配置文件到C#实例那么在这篇文章中,我将在上一篇文章的基础上,利用Options方法读取配置文件首先注册MV ...
日语输入法电脑版_日语轻松入门小百科
如果你一直以来都对日语抱有强烈的兴趣,那么就赶紧跟我一起轻松入门吧~ 科普之一:日语五十音图什么是假名?什么是五十音图? 日语的字母叫做假名,每个假名代表一个音节.假名有两种书写方式,即平假名和片假 ...
统一建模语言UML轻松入门（1）――基本概念
统一建模语言UML轻松入门(1)――基本概念 --------------------------------------------------------------------- 宋宝华 ema ...
用Angular制作单页应用视图切换动画
视图,动画单页应用(Single Page Web Application)往往有一个基本的要点,那就是把多个视图集成到一个网页内,然后去控制这些视图的显示和隐藏.此外,视图的切换动作几乎都会引入动 ...
AI轻松入门，AI零基础入门，AI初级教学，
2020的下半年已经开启了,大家还记得美剧<疑犯追踪>(Person of Interest)中贯穿全剧的机器宝宝么?从开始的训练学习,进化到可以自我更新.自我维护.自我修复,乃至最终进化 ...
1、Canopen 轻松入门
Canopen 轻松入门--笔记 1.Canopen在ISO层级中的位置 2.CANopen 的预定义报文 ID 分类 2.1 网络管理(NMT)与特殊协议(Special protocols)报文 ...
scrum看板视图切换时间线视图做项目管理
企业需要开发一个项目,可以制作时间线进行管理,以便参与者和管理者了解项目的时间进度.项目进行到哪一步,参与者有哪些,责任人是谁,这些都可以通过时间线进行展示. 「时间线视图」是一种比甘特图更轻量.更实 ...

AngularJs轻松入门（七）多视图切换

AngularJs轻松入门（七）多视图切换相关推荐

最新文章

热门文章