Browser address will not be displayed correctly in ui-route

Question

I am using the following example :

http://angular-ui.github.io/ui-router/sample/#/

Default Page URL in the example above :

 http://angular-ui.github.io/ui-router/sample/#/

But for me it is like this:

 http://localhost:25768/Admin#/

why ?

Should be like this:

 http://localhost:25768/Admin/#/

note : Admin is Controller in MVC.

my codes :

app.js :

angular.module('uiRouterApp', [
        'uiRouterApp.home',
        'ui.router',
        'ngAnimate'
    ])
    .run(
        [
            '$rootScope', '$state', '$stateParams',
            function($rootScope, $state, $stateParams) {
                $rootScope.$state = $state;
                $rootScope.$stateParams = $stateParams;
            }
        ]
    )
    .config(
        [
            '$stateProvider', '$urlRouterProvider',
            function($stateProvider, $urlRouterProvider) {
                $urlRouterProvider
                    .when('/c?id', '/contacts/:id')
                    .when('/user/:id', '/contacts/:id')
                    .otherwise('/');
            }
        ]
    );

home.js :

angular.module('uiRouterApp.home', [
        'ui.router'
    ])
    .config(
        [
            '$stateProvider', '$urlRouterProvider',
            function($stateProvider, $urlRouterProvider) {
                $stateProvider
                    .state('home', {
                        url: '/',
                        templateUrl: 'Scripts/ui-route/home/home.html',
                    });
            }
        ]
    );

layout :

<!DOCTYPE html>

<html ng-app="uiRouterApp">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    <title ng-bind="$state.current.name + ' - ui-router'">@ViewBag.Title</title>

</head>
<body class="container adminBackground">
    <div class="min1170px">
        <div class="adminHeader">
            <img class="adminLeftLogoHeader" src="/Images/juventusLogo.png" />
            <img class="adminRightLogoHeader" src="/Images/apkAndroid.png" />
            <div class="adminTitleHeader">

            </div>
        </div>
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="navbar-header">
                <a class="navbar-brand" ui-sref="home">Main</a>
            </div>
            <div id="navbarMenuHeader">
                <ul class="nav navbar-nav">
                    <li><a href="#">Exit</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-left">
                    <li><a href="#"> @User.Identity.Name</a></li>
                </ul>
            </div>
        </nav>
        <div id="body">
            @RenderSection("featured", required: false)
            <section>
                @RenderBody()
            </section>
        </div>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/angularJs")
    @RenderSection("scripts", required: false)
</body>
</html>

Index page in Admin Controller :

@{
    ViewBag.Title = "Manager";
    Layout = "../Shared/_AdminLayout.cshtml";
}

Update :

when url is : http://localhost:25768/Admin

enter image description here

and url change to :

http://localhost:25768/Admin#/

no error and it works. but url is http://localhost:25768/Admin#/ !!!! not good

when url is : localhost:25768/Admin/

enter image description here

so url change to :

http://localhost:25768/Admin/#/

error in angular :

GET http://localhost:25768/Admin/Scripts/ui-route/home/home.html 404 (Not Found)

score 1 · Answer 1 · edited May 23 '17 at 11:59

1

The issue is on the ASP.NET MVC side... we have to be sure, that

browser will be using the trailing slash
or redirect it, if not...

This should be the content of your Index action

public ActionResult Index()
{
    var root = VirtualPathUtility.ToAbsolute("~/");
    var applicationPath = Request.ApplicationPath;
    var path = Request.Path;

    var hasTraillingSlash = 
          root.Equals(applicationPath, StringComparison.InvariantCultureIgnoreCase)
       || !applicationPath.Equals(path, StringComparison.InvariantCultureIgnoreCase);

    if (!hasTraillingSlash)
    {
        return Redirect(root + "#");
    }

    return View();
}

Check this Q & A:

Workaround for MVC misbehaviour with missing trailing slash

edited May 23 '17 at 11:59

Community

1
1

answered Jul 28 '14 at 05:37

Radim Köhler

122,561
47
239
335

I've been using your code. But it did not work. when url= 'http://localhost:25768/Admin#/' => root ="/" and applicationPath ="/" and path ="/Admin". so hasTraillingSlash = true. – Football-Is-My-Life Jul 28 '14 at 10:22
Well, the url is `localhost:25768/Admin` or `localhost:25768/Admin/` no hash at the end... browser never sends the part after the hash to the server. So your url with or without trailing slash is what will reach the server... This code is working for me (us) ... other words: I am saying, that if you apply my snippet properly, it will correctly redirect to /Admin/ ... always – Radim Köhler Jul 28 '14 at 10:38
So, the issue was of a different kind... all the time I was *wrongly* expecting that the `Admin` is virtual applicaiton... **not** a controller. If that would be this way, all the above would be enough. But because Admin is Controller, it brings another deepth in the url.. not needed one. You should for sure use the `localhost:25768/` for your index action. I.e. it should be Home Controller and its action Index... or just change the url routing setting (that default is Admin not Home)... These two thinkg (relative path and url routing for MVC) cannot work together... – Radim Köhler Jul 28 '14 at 11:06
This answer worked for me. It was working on localhost fine, but when pushed to our server, it stopped working. Working fine now with this answer. Thanks so much!! – Timothy Nov 25 '14 at 16:32

score 1 · Accepted Answer · answered Jul 28 '14 at 11:07

First, I'm change the templateUrl to

 templateUrl: '/Scripts/ui-route/home/home.html',

Then, I changed the code as follows:

      public ActionResult Index()
        {
            var path = Request.Path;

            if (path == "/Admin")
            {
                return Redirect("/Admin/");
            }

            return View();
        }

It works.

Browser address will not be displayed correctly in ui-route

2 Answers2

Linked