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

 更新时间:2017年06月28日 09:51:17   作者:小魏的马仔  
这篇文章主要介绍了AngularJS实现单一页面内设置跳转路由的方法,结合实例形式分析了AngularJS路由操作相关设置与使用技巧,需要的朋友可以参考下

本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结

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

相关文章

  • 详谈AngularJs 控制器、数据绑定、作用域

    详谈AngularJs 控制器、数据绑定、作用域

    下面小编就为大家带来一篇详谈AngularJs 控制器、数据绑定、作用域。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • angular4+百分比进度显示插件用法示例

    angular4+百分比进度显示插件用法示例

    这篇文章主要介绍了angular4+百分比进度显示插件用法,结合实例形式分析了Angular4安装及使用百分比进度显示插件相关步骤与操作技巧,需要的朋友可以参考下
    2019-05-05
  • angularjs中的$eval方法详解

    angularjs中的$eval方法详解

    下面小编就为大家带来一篇angularjs中的$eval方法详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • Angular2  NgModule 模块详解

    Angular2 NgModule 模块详解

    这篇文章主要介绍了Angular2 NgModule 模块详解的相关资料,并附简单实例,需要的朋友可以参考下
    2016-10-10
  • AngularJS实现使用路由切换视图的方法

    AngularJS实现使用路由切换视图的方法

    这篇文章主要介绍了AngularJS实现使用路由切换视图的方法,结合学生信息管理系统为例分析了使用controllers.js控制器来切换视图的具体步骤与相关操作技巧,需要的朋友可以参考下
    2017-01-01
  • angular4强制刷新视图的方法

    angular4强制刷新视图的方法

    今天小编就为大家分享一篇angular4强制刷新视图的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • Angularjs基础知识及示例汇总

    Angularjs基础知识及示例汇总

    本文给大家总结了一些angularjs的基础知识及相关示例,分享给大家,希望能对大家有所帮助。
    2015-01-01
  • 详解在AngularJS的controller外部直接获取$scope

    详解在AngularJS的controller外部直接获取$scope

    本篇文章主要介绍了详解在AngularJS的controller外部直接获取$scope ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • AngularJs  E2E Testing 详解

    AngularJs E2E Testing 详解

    本文主要介绍AngularJs E2E Testing的资料,这里整理了详细的资料,及简单代码示例,有兴趣的小伙伴可以参考下
    2016-09-09
  • Ionic + Angular.js实现图片轮播的方法示例

    Ionic + Angular.js实现图片轮播的方法示例

    图片轮播在我们日常开发中是再熟悉不过的了,下面这篇文章主要给大家介绍了Ionic + Angular实现图片轮播的方法,文中给出了详细的示例代码供大家参考学习,需要的朋友们下面来一起看看吧。
    2017-05-05

最新评论