AngularJS实现单一页面内设置跳转路由的方法


Posted in Javascript onJune 28, 2017

本文实例讲述了AngularJS实现单一页面内设置跳转路由的方法。分享给大家供大家参考,具体如下:

单一页面内设置跳转路由

鉴于现在很多应用的应用功能以及场景都非常简单,如果还按照以前的思路,每个页面做一个html,通过路由进行跳转,不仅在时间上会有延迟,在某些特殊的浏览器(最典型的如微信内置浏览器)中,跳转过程中会出现短暂的白页。

因此,我们在开发过程中,将页面逻辑封装到同一个html中。当系统第一次加载页面时,将所有页面全部加载进去,然后通过angularJS内置的路由进行加载。

直接上代码

声明app

<script type="text/javascript">
    var app = angular.module('ngRouteWxCtb', ['ngRoute','ngCookies'])
    .config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/0', {
          templateUrl: '0.html',
          controller: 'loginCtrl'
        }).when('/1', {
          templateUrl: '1.html',
          controller: '1Ctrl'
        }).when('/2', {
          templateUrl: '2.html',
          controller: '2Ctrl'
        }).when('/3', {
          templateUrl: '3.html',
          controller: '3Ctrl'
        }).when('/4', {
          templateUrl: '4.html',
          controller: '4Ctrl'
        }).when('/5', {
          templateUrl: '5.html',
//            controller: '5Ctrl'
        }).otherwise({redirectTo: '/login'});
      }]);
</script>

在页面中全部加载所有view

<body ng-app="ngRouteWxCtb" class="ng-scope">
<!--用户登录-start-->
<script type="text/ng-template" id="0.html">
  <div>
  页面0
  </div>
</script>
<!--用户登录-end-->
<!--加入校区-start-->
<script type="text/ng-template" id="1.html">
  <div>
  页面1
  </div>
</script>
<!--加入校区-end-->
<!--裁剪图片-start-->
<script type="text/ng-template" id="2.html">
  <div>
  页面2
  </div>
</script>
<!--开始上传图片 - start-->
<script type="text/ng-template" id="3.html">
  <div>
  页面3
  </div>
</script>
<!--开始上传图片-end-->
<!--上传图片-start-->
<script type="text/ng-template" id="4.html">
  <div>
  页面4
  </div>
</script>
<!--上传图片-end-->
<!--上传图片完成-start-->
<script type="text/ng-template" id="5.html">
  <div>
  页面5
  </div>
</script>
<audio controls="controls" style="display: none;"></audio>

然后通过路由进行跳转

app.controller('loginCtrl', function ($scope, $http, $interval, $cookies, $location, userService) {
  $scope.LoginSucessLocation = function () {
   var hre = './main#/1';
   location.href = hre;
  }
})

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

Javascript 相关文章推荐
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
JavaScript参数个数可变的函数举例说明
Oct 10 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 #Javascript
通过构造函数实例化对象的方法
Jun 28 #Javascript
JS之if语句对接事件动作逻辑(详解)
Jun 28 #Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 #Javascript
Node.js 8 中的重要新特性
Jun 28 #Javascript
Angular排序实例详解
Jun 28 #Javascript
基于JS对象创建常用方式及原理分析
Jun 28 #Javascript
You might like
XAMPP安装与使用方法详细解析
2013/11/27 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
Prototype ObjectRange对象学习
2009/07/19 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
微信小程序实现图片上传
2019/05/23 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
python自动生成证件号的方法示例
2021/01/14 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
医药销售求职信范文
2014/02/01 职场文书
安全标准化实施方案
2014/02/20 职场文书
小学一年级学生评语
2014/04/22 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
社团个人总结范文
2015/03/05 职场文书
施工安全员岗位职责
2015/04/11 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python