Question

使用angular-ui-router，单击index.html中的链接view1和view2时出现以下错误。同样的例子与普通的角度路由器一起工作，代码中有什么我缺少的吗？谢谢。

TypeError: promise.catch is not a function
    at silenceUncaughtInPromise (angular-ui-router.js:1079)
    at silentRejection (angular-ui-router.js:1082)
    at angular-ui-router.js:1771
    at handleError (angular-ui-router.js:1614)
    at TransitionHook.invokeHook (angular-ui-router.js:1631)
    at Function.TransitionHook.invokeHooks (angular-ui-router.js:1729)
    at Transition.run (angular-ui-router.js:3475)
    at StateService.transitionTo (angular-ui-router.js:7015)
    at StateService.go (angular-ui-router.js:6911)
    at angular-ui-router.js:8862

app.js -

angular.module('app1',[
'ui.router',
'app.controller']).
config(function($stateProvider,$urlRouterProvider,$locationProvider) {
        $stateProvider.state('view1',{
            url: '/view1',
            controller: 'Controller1',
            templateUrl: '/partials/view1.html'
        }).state('view2',{
            url: '/view2/:firstname/:lastname',
            controller: 'Controller2',
            templateUrl: '/partials/view2.html',
            resolve: {
                names: function(){
                    return ['JavaScript','JQuery','Angular','Bootstrap'];
                }
            }
        });
        $urlRouterProvider.otherwise('/index');
        $locationProvider.html5Mode(true);
});

controller.js -

angular.module('app.controller',[]).
    controller('Controller1',function($scope,$location,$state){
        $scope.loadView2 = function(){      
                $state.go('view2', {
                        firstname: $scope.firstname,
                        lastname: $scope.lastname
                });
            //$location.path('/view2/'+$scope.firstname+'/'+$scope.lastname);
        }
    }).controller('Controller2',function($scope,$stateParams,names){
        $scope.firstname = $stateParams.firstname;
        $scope.lastname = $stateParams.lastname;
        $scope.names = names;
    });

index.html -

<!DOCTYPE html>
<html>
<head>
    <script src="/jquery/jquery.js"></script>
    <script src="/angular/angular.js"></script>
    <script src="/angular/angular-route-1.2.3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
    <script src="/bootstrap/js/bootstrap.js"></script>
    <script src="/js/app.js"></script>
    <script src="/js/controllers.js"></script>
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.css"/>
    <title>
        Angular App
    </title>
</head>
<body ng-app="app1">
    <div>
    <ul class="menu">
<li><a ui-sref="view1">view1</a></li>
<li><a ui-sref="view2">view2</a></li>
</ul>
        <ng-view></ng-view>
    </div>
</body>
</html>

Answer 1

更改1
您正在使用Angular UI-Router。

在index.html中，将<ng-view></ng-view>替换为<div ui-view></div>

如果您使用ng-view，则

ngRoute会有效。但是，因为在您的项目中，您使用的是ui.router，所以您应该使用<div ui-view></div>

更改2
由于您使用的是html5Mode，因此您需要在base href中设置index.html 在<base href="/">

的<head>内添加index.html标记

Angular1：TypeError：promise.catch不是函数

1 个答案: