在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. HDU 5416 CRB and Tree （2015多校第10场）

    欢迎參加--每周六晚的BestCoder(有米!) CRB and Tree Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 65536 ...

  2. UVA 11077 Find the Permutations 递推置换

                               Find the Permutations Sorting is one of the most used operations in real ...

  3. JAVA设计模式之【职责链模式】

    职责链模式 专门处理请求链式传递的模式 角色 Handler抽象处理者 ConcreteHandler具体处理者 在职责链模式中,很多对象由每一个对象对其下家的引用而连接成一条链,请求在这条链上传递, ...

  4. zzulioj--1705--小明在工作(模拟水题)

    1705: 小明在工作 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 179  Solved: 59 SubmitStatusWeb Board De ...

  5. 修改DNS

    解决方案一: 修改/etc/resolv.conf,添加 nameserver 8.8.8.8 nameserver 8.8.4.4 然后停用NetworkManager,service Networ ...

  6. hihocoder1415 重复旋律3

    思路: 扫一遍height 判一下即可 //By SiriusRen #include <cstdio> #include <cstring> #include <alg ...

  7. Android 设置AlertDialog的大小 .

    AlertDialog dialog = builder.setTitle("消息列表") .setView(layout) .create(); dialog.show(); / ...

  8. 51nod 1101 换零钱 完全背包的变型 动态规划

    题目: 思路: ;i < ; i++){ for(int j = a[i];j <= n; j++){ dp[j] = (dp[j] + dp[j-a[i]])%mod; } } a[i] ...

  9. MySQL学习(六)——自定义连接池

    1.连接池概念 用池来管理Connection,这样可以重复使用Connection.有了池,我们就不用自己来创建Connection,而是通过池来获取Connection对象.当使用完Connect ...

  10. BootStrap学习(二)——重写首页之topbar

    1.布局容器 帮助文档:http://v3.bootcss.com/css/#overview-container BootStrap需要为页面内容和栅栏系统包裹一个.container容器.提供的两 ...