Search code examples
javascriptangularjsangular-ui-routerangularjs-routing

Angularjs Client-Side Routing with ui-router

I use ui-router (states) for my routing:

$urlRouterProvider.otherwise('/Home');

$stateProvider
    .state('home', {
        url: '/Home',
        templateUrl: '/Home/Home',
        controller: 'MainCtrl'
    })
    .state('posts', {
        url: '/Posts',
        templateUrl: '/Home/Posts',
        controller: 'PostCtrl'
    });

$locationProvider.html5Mode(true);

In html I have something like this:

<html>

<head>
    <base href="/" />
    <!--render scripts -->
    <title>My Angular App!</title>
</head>

<body ng-app="flapperNews" ngcloak>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <ul>
                <li><a ui-sref="home">Home</a></li>
                <li><a ui-sref="posts">Posts</a></li>
            </ul>
            <ui-view></ui-view>
        </div>
    </div>
</body>
</html>

When I use my menu links (Home, Posts) the app works fine and updates my view in <ui-view></ui-view> as needed. When I use the address bar after the first download to change the url to localhost:port/Posts, the app refreshes the page.

Keep in mind that I removed # from links.

Why does angular not know about my routes?

Or how can I set client-side menu with angular?

Solution

  • Angular Knows about your route but you webserver may thinks he need to show the index.html page in the map posts

    Try to set your html5Mode to false and see if it still happens the this link and look at the part about Hashbang and HTML5 modes

    and especially the last row requires server-side configuration: Yes