angularjs单一页面内设置跳转路由

喜欢ヅ旅行 2022-09-23 03:57 155阅读 0赞

## 单一页面内设置跳转路由 ##

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

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

## 直接上代码 ##

1.  声明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>

1.  在页面中全部加载所有view

<body ng-app="ngRouteWxCtb" class="ng-scope">
    
    <script type="text/ng-template" id="0.html"> <div> 页面0 </div> </script>
    
    
    
    <script type="text/ng-template" id="1.html"> <div> 页面1 </div> </script>
    
    
    
    <script type="text/ng-template" id="2.html"> <div> 页面2 </div> </script>
    
    
    <script type="text/ng-template" id="3.html"> <div> 页面3 </div> </script>
    
    
    
    <script type="text/ng-template" id="4.html"> <div> 页面4 </div> </script>
    
    
    <script type="text/ng-template" id="5.html"> <div> 页面5 </div> </script>
    
    <audio controls="controls" style="display: none;"></audio>

1.  然后通过路由进行跳转

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

发表评论取消回复

表情：

评论列表（有 0 条评论，155人围观）

还没有评论，来说两句吧...

相关阅读

相关 1.Vue之路由页面跳转

demo地址:链接：https://pan.baidu.com/s/1eWmQElwK0AYskR6O5Ith-A 提取码：zsq6 1.功能,根据点击实现页面底

淡淡的烟草味﹌/ 2023年03月01日 13:27/ 0 赞/ 13 阅读

相关 uni-app 路由/页面跳转

路由/页面跳转 > [uni-app 官网路由][uni-app _] 简要示范下`uni.navigateTo()` // 不带参数

今天药忘吃喽~/ 2023年02月12日 05:42/ 0 赞/ 23 阅读

相关 Vue 路由及路由跳转

让根组件自动的挂载其它组件，而不是手动挂载。 1. 安装： > cnpm install vue-router --save 1. 在main.js中引入并使用v

朴灿烈づ我的快乐病毒、/ 2022年12月22日 14:29/ 0 赞/ 295 阅读

相关 vue ElementUI 路由跳转新页面

页面效果从产品成本核算配置管理Tab页跳转核算配置信息Tab页 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

淡淡的烟草味﹌/ 2022年12月15日 03:44/ 0 赞/ 485 阅读

相关 angularjs单一页面内设置跳转路由

单一页面内设置跳转路由鉴于现在很多应用的应用功能以及场景都非常简单，如果还按照以前的思路，每个页面做一个html，通过路由进行跳转，不仅在时间上会有延迟，在某些特殊的浏

喜欢ヅ旅行/ 2022年09月23日 03:57/ 0 赞/ 156 阅读

相关 vue 路由页面改变路由跳转页面参数或者叫公共页面

我不想知道原理，能实现就行日常中有很多页面公用一个头部，用来切换，我习惯于用父子路由的方式写，像这样 ![在这里插入图片描述][watermark_type_Z

古城微笑少年丶/ 2022年09月10日 01:16/ 0 赞/ 223 阅读

相关 AngularJS路由之ui-router（四）$state.go页面跳转

路由是这么定义的： $stateProvider .state('page1', { url: '/page1',

布满荆棘的人生/ 2022年06月13日 02:28/ 0 赞/ 133 阅读

相关 angular路由跳转页面地址栏跳转但是页面没有变化

angular路由跳转页面地址栏跳转但是页面没有变化出现这个问题基本就是路由配置错误 ng路由跳转需要在app.module.ts里面配置相对应的路由 ng gener

「爱情、让人受尽委屈。」/ 2022年05月08日 07:34/ 0 赞/ 759 阅读

相关 AngularJs ui-router路由跳转传参

1、在跳转a标签中通过跳转指令设置 ui-sref='state名称({键值对1,键值对2})' 其中,值如果是变量会自动解析,如果是字符串需

妖狐艹你老母/ 2021年07月25日 01:52/ 0 赞/ 432 阅读

相关 AngularJs ui-router动态跳转路由

1、在包含路由的控制器中,注入$state 2、跳转 $state.go('state的第一个自定义名称') 代码示例: <html ng

矫情吗；*/ 2021年07月24日 16:13/ 0 赞/ 416 阅读