Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 929
Dmitry Avatar asked Jun 03 '26 21:06

Dmitry


1 Answers

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

like image 51
Jordy van Eijk Avatar answered Jun 06 '26 10:06

Jordy van Eijk