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 相关文章推荐
js获得鼠标的坐标值的方法
Mar 13 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
JavaScript中的DSL元编程介绍
Mar 15 Javascript
基于jquery编写分页插件
Mar 07 Javascript
简单的分页代码js实现
May 17 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
vue实现组件之间传值功能示例
Jul 13 Javascript
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 Javascript
JavaScript实现显示和隐藏图片
Apr 29 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封装的page分页类完整实例
2016/10/18 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
六年级学生评语
2014/04/22 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL