【写了ngRoute，不可以跳转页面 _angular router 】

写了ngRoute，不可以跳转页面

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(0)

angular router

详细描述

截图

代码

<body>
<div ng-controller="myCtrl">
    <ul>
        <li><a href="#/a">信息管理</a></li>
        <li><a href="#/b">用户管理</a></li>
        <li><a href="#/a">信息管理</a></li>
        <li><a href="#/b">用户管理</a></li>
        <li><a href="#/a">信息管理</a></li>
        <li><a href="#/b">用户管理</a></li>
        <li><a href="#/a">信息管理</a></li>
        <li><a href="#/b">用户管理</a></li>
    </ul>

    <ng-view></ng-view>
    <!-- <div ng-view ></div> -->
</div>
<script type="text/javascript">
    angular.module("myApp",["ngRoute"])
        .controller("aController",function($scope,$route){
            $scope.hello = "hello,a!";
        })
        .controller("bController",function($scope){
            $scope.hello = "hello,b!";
        })
        .controller("myCtrl",function($scope,$location){

            $scope.$on("$viewContentLoaded",function(){
                console.log("ng-view content loaded!");
            });

            $scope.$on("$routeChangeStart",function(event,next,current){
                //event.preventDefault(); //cancel url change
                console.log("route change start!");
            });
        })
        .config(function($routeProvider, $locationProvider) {
            $routeProvider
                .when('/a', {
                    templateUrl: 'index.html',
                    controller: 'aController'
                })
                .when('/b', {
                    templateUrl: 'index.html',
                    controller: 'bController',
                    resolve: {
                        // I will cause a 1 second delay
                        delay: function($q, $timeout) {
                            var delay = $q.defer();
                            $timeout(delay.resolve, 3000);
                            return delay.promise;
                        }
                    }
                })
                .otherwise({
                    redirectTo: '/a'
                });
        });
</script>
</body>

编辑于2024-05-13