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

Question

I am having an issue where once the templateUrl is added into the ui-router child state, the application will no longer perform the routing to the state. It works fine when it's just a template.

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
            });

}]);

UPDATE

If I add a ui-sref="user.reg" to my initial pages I can navigate to the state/page fine, with the templateUrl and template . So its just an issue when I try to use state.go('user.reg');

This means a work around is using the $location provider to change the path. Has the same effect but does seem rather wrong

Answer 1

The problem is with your relative paths.

Look at this code:

$locationProvider.html5Mode(true);

You have html5 mode enabled, and for that to work, you have your base ref set in your html, which probably looks like this:

<base href="/">

Your issue is likely that the route for your template isn't "yoursite.com/app/Users/User.login.html."

See this Plunker for a working version of your code. Then go into the html code and uncomment out the base tag, and notice that it will break.