CODEWITHSUNDEEP
angularjsangular-ui-router
not a Programmer
not a Programmer

Reputation: 185

Manual navigation doesn't work in ui-router for AngularJS 1.7

I have the following state configuration:

function stateConfig($stateProvider) {
    $stateProvider
        .state("home", {
            url: "/",
            templateUrl: "/app/home/template/home.html",
            controller: "HomeController as homeController"
        });
        .state("user", {
            abstract: true,
            url: "/user",
            template: "<ui-view/>"
        })
        .state("user.list", {
            url: "/list",
            templateUrl: "/app/user/template/user.list.html",
            controller: "UserListController as userListController"
        });
}

user.list.html contains a table of users, home.html constains the link to the user.list.html:

<a class="btn btn-primary" ui-sref="user.list" role="button">View All Users</a>

When I start the application and go to the localhost:8080, it displays me home.html. Then, when I click on the button "View All Users", it displays me user.list.html and I see a table of users. Evething works fine, but the problem starts when I try to reload the page (pressing F5) or when I manually navigate to the localhost:8080/user/list. It displays me 404 error page. My question is: why this is happening?

Upvotes: 0

Views: 173

Answers (1)

Adrian Brand
Adrian Brand

Reputation: 21638

This has nothing to do with AngularJS but your web server. You need to configure the server you are using to route 404 errors to your home.html. When you request localhost:8080/user/list your server does not find a resource for /user/list.

Think of what happens when you load localhost:8080. You get home.html and your AngularJS app is initialised. When your change the route from localhost:8080 to localhost:8080/user/list the route handler from ui-router fires. No http request is sent to the web server. When you manually type the route or hit F5 you send a http request to the web server looking for the resource /user/list which does not exist on the server so you get a 404 not found error. You need to configure 404 errors to load home.html which will load up the AngularJS app.

Upvotes: 1

Related Questions