AngularJS入门教程之多视图切换用法示例


Posted in Javascript onNovember 02, 2016

本文实例讲述了AngularJS多视图切换用法。分享给大家供大家参考,具体如下:

在AngularJS应用中,我们可以??tml碎片写在一个单独的文件中,然后在其他页面中?⒏枚嗡槠?釉亟?础H绻?卸喔鏊槠?募??颐腔箍梢栽诳刂破髦懈?萦没У牟僮鞫??募釉夭煌?乃槠??佣?锏角谢皇油嫉男Ч??/p>

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

AngularJS入门教程之多视图切换用法示例

这两首词实际上是两个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()方法来指定在该视图中加载哪一个碎片

AngularJS源码可点击此处本站下载

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
JavaScript实现Sleep函数的代码
Mar 04 Javascript
js实现的网页颜色代码表全集
Jul 17 Javascript
JQuery优缺点分析说明
Apr 10 Javascript
javascript浏览器兼容教程之事件处理
Jun 09 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
在vue中axios设置timeout超时的操作
Sep 04 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 #Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 #Javascript
快速解决js中window.location.href不工作的问题
Nov 02 #Javascript
javascript创建对象的3种方法
Nov 02 #Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 #Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 #Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 #Javascript
You might like
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
JS实现密码框效果
2020/09/10 Javascript
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
python中字符串前面加r的作用
2015/06/04 Python
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
python 实现UTC时间加减的方法
2018/12/31 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
车间组长岗位职责
2013/12/20 职场文书
校三好学生主要事迹
2014/01/11 职场文书
在校硕士自我鉴定
2014/01/23 职场文书
白岩松演讲
2014/05/21 职场文书
英语辞职信怎么写
2015/02/28 职场文书
祝寿主持词
2015/07/02 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书