Angular UI Router new view, same URL

Question

I have the following state defined in my Angular app and I'm wondering if it's possible to inject a template from another state into the current state?

In my .catch() below I have: $state.go('error404'); which will trigger the error404 state and redirect the user to /404. However what I'd like to happen is that the user stays on the same URL that triggered the 404 and the 404 template is just injected on to the page. (so no redirect). Is this possible?

.state('error404', {
        url: '/404',
        template: '<p style="color:white;">404 NOT FOUND</p>'
    })

.state('publicUserProfile', {
        url: '/:username',
        templateUrl: 'views/public-profile.html',
        controller: 'publicProfileController',
        resolve: {
            userData: ['$http', 'API_URL', '$stateParams', '$state', function ($http, API_URL, $stateParams, $state) {
                return $http
                .get(API_URL + '/users/' + $stateParams.username)
                .catch(function () {
                    $state.go('error404'); <-- HERE
                })
            }]
        }
    });

Mik378 · Accepted Answer · 2014-08-10 16:25:28Z

2

You should remove the url attribute in this case:

.state('error404', {
        template: '<p style="color:white;">404 NOT FOUND</p>'
    })

answered Aug 10, 2014 at 16:25

Mik378

22.2k15 gold badges94 silver badges191 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

leaksterrr Over a year ago

Wow, how did I miss that? Thanks!

Collectives™ on Stack Overflow

Angular UI Router new view, same URL

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related