Browser address will not be displayed correctly in

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

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/

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)

回答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

回答2:

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.