CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerangularjs-routing
Dmitry
Dmitry

Reputation: 477

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?

Upvotes: 3

Views: 516

Answers (1)

Jordy van Eijk
Jordy van Eijk

Reputation: 2766

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

Upvotes: 1

Related Questions