在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. sap abap 对字符串的操作

    替换字段内容 REPLACE [FIRST /ALL OCCURRENCES OF]<STR1>INTO <STR> WITH <STR2>   DATA STR ...

  2. mysql的查询练习1

    1.多表查询

  3. HDFS HA架构以及源代码引导

    HA体系架构 相关知识介绍 HDFS master/slave架构,HDFS节点分为NameNode节点和DataNode节点. NameNode存有HDFS的元数据:主要由FSImage和EditL ...

  4. UVA 11971 - Polygon 数学概率

                                        Polygon  John has been given a segment of lenght N, however he n ...

  5. bzoj5106: [CodePlus2017]汀博尔（二分答案）

    5106: [CodePlus2017]汀博尔 题目:传送门 题解: 百题纪念!!! 原谅一下第一百题刷了到水题... 直接二分月份然后判断(注意上界大小) 代码: #include<cstdi ...

  6. POJ 1182 食物链 （并查集解法）（详细注释）

    食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 78510   Accepted: 23396 Description ...

  7. vb常用的内部函数（二）：字符串函数

    len(string):计算字符串长度函数.返回字符串string中字符的个数.一个汉字为一个字符,空格也为一个字符,空字符串的长度为0. Ltrim(string).Rtrim(string).Tr ...

  8. ES 新增字符串方法

    话不多说,直接开鲁 1. startsWith() 作用: 检测字符串以什么开头 实例: let str = "www.qjzzj.top"; console.log(str.st ...

  9. 洛谷1345 [Usaco5.4]奶牛的电信

    题目描述 农夫约翰的奶牛们喜欢通过电邮保持联系,于是她们建立了一个奶牛电脑网络,以便互相交流.这些机器用如下的方式发送电邮:如果存在一个由c台电脑组成的序列a1,a2,...,a(c),且a1与a2相 ...

  10. BZOJ 5394 [Ynoi2016]炸脖龙 (线段树+拓展欧拉定理)

    题目大意:给你一个序列,需要支持区间修改,以及查询一段区间$a_{i}^{a_{i+1}^{a_{i+2}...}}mod\;p$的值,每次询问的$p$的值不同 对于区间修改,由线段树完成,没什么好说 ...