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

最新推荐文章于 2024-06-24 14:04:44 发布

小魏的马仔

最新推荐文章于 2024-06-24 14:04:44 发布

阅读量1.1w

点赞数 1

分类专栏： angularJS 文章标签： angularjs 路由 ngRoute

本文链接：https://blog.csdn.net/xuexiiphone/article/details/51822922

版权

angularJS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

单一页面内设置跳转路由

鉴于现在很多应用的应用功能以及场景都非常简单，如果还按照以前的思路，每个页面做一个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;
    }

})