Angular ui-router：添加templateUrl中斷路由

Question

我遇到一個問題，一旦將templateUrl添加到ui-router子狀態，應用程序將不再執行到該狀態的路由。 當它只是模板時，它可以正常工作。

app.js ：

app.config(['$stateProvider', '$locationProvider', '$urlMatcherFactoryProvider', '$urlRouterProvider',
    function ($stateProvider, $locationProvider, $urlMatcherFactoryProvider, $urlRouterProvider) {

        $urlMatcherFactoryProvider.caseInsensitive(true);
        $urlMatcherFactoryProvider.strictMode(false);

        $urlRouterProvider.otherwise('/page-not-found');

        $stateProvider
                .state('dashboard', {
                    url: '/',
                    views: {
                        'header': {
                            template: 'header'
                        },
                        'nav': {
                            template: 'nav'
                        },
                        main: {
                            template: 'You are on the homepage'
                        }
                    }
                });

        $locationProvider.html5Mode(true);
    }]);

app.run(['$rootScope', 'userService', '$state', function ($rootScope, user, $state) {

    $rootScope.$on("$stateChangeError", console.log.bind(console));

    if (!user.exists) {
        $state.go('user.reg');
    }
}]);

User.states.js ：

.config(['$stateProvider', function ($stateProvider) {

    $stateProvider
            .state('user', {
                url: '/users',
                abstract: true,
                views: {
                    'header': {},
                    'nav': {},
                    'main': {
                        template: '<ui-view/>'
                    }
                }
            })
            .state('user.reg', {
                url: '/register',
                //template: 'This will show fine',
                templateUrl: '/app/Users/User.login.html' // this will break
            });

}]);

更新

如果我將ui-sref="user.reg"到初始頁面，則可以使用templateUrl和template導航到狀態/頁面正常。 因此，當我嘗試使用state.go('user.reg');時，這只是一個問題state.go('user.reg');

這意味着解決方法是使用$location提供程序來更改路徑。 具有相同的效果，但看起來確實是錯誤的

Answer 1

問題出在你的相對路徑上。

看這段代碼：

$locationProvider.html5Mode(true);

您啟用了html5模式，為了使其正常工作，您在html中設置了基本引用，它可能看起來像這樣：

<base href="/">

您的問題可能是模板的路由不是“ yoursite.com/app/Users/User.login.html”。

有關此代碼的有效版本， 請參見此Plunker 。 然后進入html代碼並取消注釋基本標記，並注意它將破壞。