Angularjs Client-Side Routing with ui-router

Question

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?

@PankajParkar, I tried, menu works well in both varients. My issue about navigation from address bar. — Dmitry
– Dmitry, Commented Feb 2, 2016 at 13:39

Jordy van Eijk · Accepted Answer · 2016-02-02 13:37:08Z

1

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

edited Feb 2, 2016 at 13:37

answered Feb 2, 2016 at 13:33

Jordy van Eijk

2,7862 gold badges20 silver badges37 bronze badges

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

2 Comments

Dmitry Over a year ago

And try to use routes with '#'?

Jordy van Eijk Over a year ago

Yes and use the hashbang method. If this is not what you want you need to do something on your webserver to make sure it not returning 404s or something else

Collectives™ on Stack Overflow

Angularjs Client-Side Routing with ui-router

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related