在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轻松入门(七)多视图切换的更多相关文章

  1. AngularJs轻松入门

    AngularJs轻松入门系列博文:http://blog.csdn.net/column/details/angular.html AngularJs轻松入门(一)创建第一个应用 AngularJs ...

  2. AngularJs轻松入门(九)与服务器交互

    AngularJs从Web服务器请求资源都是通过Ajax来完成,所有的操作封装在$http服务中,$http服务是只能接收一个参数的函数,这个参数是一个对象,用来完成HTTP请求的一些配置,函数返回一 ...

  3. AngularJs轻松入门(三)MVC架构

    MVC应用程序架构最早于1970年起源于Smalltalk语言,后来在桌面应用程序开发中使用较为广泛,如今在WEB开发中也非常流行.MVC的核心思想是將数据的管理(Model).业务逻辑控制(Cont ...

  4. AngularJs轻松入门(八)Cookies读写

    虽然使用JavaScript创建和获取Cookie很简单,AngularJs还是把它作为一个单独的模块进行了封装,模块名为ngCookies,和前面的教程中做法一样,先引入angular-cookie ...

  5. AngularJs轻松入门(六)表单校验

    表单数据的校验对于提高WEB安全性意义不大,因为服务器接收到的请求不一定来自我们的前端页面,有可能来自别的站点,黑客可以自己做一个表单,把数据提交到我们的服务器(即跨站伪造请求),这样就绕过了前端页面 ...

  6. AngularJs轻松入门(五)过滤器

    在前面几节里我们已经接触过AngularJs的表达式,表达式的作用是向视图中输出字面量或$scope对象中的属性值.在输出之前我们可以通过过滤器来格式化输出的数据. 过滤器的使用非常简单,我们看一下下 ...

  7. AngularJs轻松入门(四)模块化

    在前面几节教程中,代码比较少,为了方便说明问题笔者將控制器代码都写在了HTML页面中,实际上这并不是什么好的编程习惯,而且可维护性差.通常的做法都是將处理业务逻辑的代码写在一个单独的JS文件中,然后在 ...

  8. AngularJs轻松入门(二)数据绑定

    数据绑定是AngularJs中非常重要的特性,我们看一下下面的例子: <!DOCTYPE html> <html ng-app> <head lang="en& ...

  9. AngularJs轻松入门(一)创建第一个应用

    AngularJs是Google工程师研发的一款JS框架,官方文档中对它的描述是,它是完全使用JavaScript编写的客户端技术,同其他历史悠久的Web技术(HTML,CSS等)配合使用,使得Web ...

随机推荐

  1. Java 7之传统I/O - 字符类 StringReader和StringWriter

    转自:https://www.xuebuyuan.com/2015312.html 这两个类将String类适配到了Reader和Writer接口,在StringWriter类实现的过程中,真正使用的 ...

  2. Resolving Problems installing the Java JCE Unlimited Strength Jurisdiction Policy Files package--转

    原文地址:https://www.ca.com/us/services-support/ca-support/ca-support-online/knowledge-base-articles.tec ...

  3. JqGrid 查询时未设置初始页码导致的问题

    本文所述问题发生在查询的数据有至少2页数据时的情况下.本例中的产品质量查询就是这样. 第一步:查询该时间段内的数据,结果为13页的数据内容,显示当前页第1页.如下图所示: 第二步:点击翻页按钮,打开第 ...

  4. Android 手势

    GestureDetector:手势监听类,通常在View的setOnTouchListener方法中设置TouchListener,在TouchListener的onTouch函数中把MotionE ...

  5. (转载) Android RecyclerView 使用完全解析 体验艺术般的控件

    Android RecyclerView 使用完全解析 体验艺术般的控件 标签: Recyclerviewpager瀑布流 2015-04-16 09:07 721474人阅读 评论(458) 收藏  ...

  6. TLCL

    参考阅读:http://billie66.github.io/TLCL/book/chap04.html 绝对路径 An absolute pathname begins with the root ...

  7. SPOJ 1029 Matrix Summation【 二维树状数组 】

    题意:二维树状数组,更改值的时候有一点不一样, 是将a[x][y]设置为一个值,所以add的时候要将它和以前的值作差一下 #include<iostream> #include<cs ...

  8. HDU 1587 Flowers【贪心】

    题意:给出n种花的价钱,和总的金额m,问最多能够买到多少朵花.先排序,然后就是便宜的花在能够买的范围内能够多买就多买 #include<iostream> #include<cstd ...

  9. TP5 分页类,自定义样式

    结合X-admin 后台框架 在做项目,为了保持分页风格的一致,所以需要自定义 一个分页类. 一.在项目的 extend 目录,创建 cus 目录 二.创建 Page 分页类,代码如下 <?ph ...

  10. PyQuery使用

    PyQuery库是一个非常强大的网页解析库,如果你有前端开发经验的,都应该接触过jQuery,那么PyQuery就是你非常绝佳的选择,PyQuery 是 Python 仿照 jQuery 的严格实现. ...