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 相关文章推荐
JavaScript用Number方法实现string转int
May 13 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
BOM系列第二篇之定时器requestAnimationFrame
Aug 17 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 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
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
详解Node.js异步处理的各种写法
2019/06/09 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
Python3访问并下载网页内容的方法
2015/07/28 Python
Python数据类型详解(一)字符串
2016/05/08 Python
老生常谈Python基础之字符编码
2017/06/14 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
会计电算化专业自荐信
2014/03/15 职场文书
销售员试用期自我评价
2014/09/15 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
刑事申诉状范文
2015/05/20 职场文书
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript