Why does my AngularJS home page not load when linked from itself

Question

This is my home-index.js file

var homeIndexModule = angular.module("homeIndex", ["ngRoute"]);

homeIndexModule.config(["$routeProvider", function ($routeProvider) {

    $routeProvider.when("/", {
        templateUrl: "/templates/topicsView.html",
        controller: topicsController
    })
    .when("/newmessage", {
        templateUrl: "/templates/newTopicView.html",
        controller: newTopicController
    })
    .when("/message/:id", {
        templateUrl: "/templates/singleTopicView.html",
        controller: singleTopicController
    })
    .otherwise({ redirectTo: "/" });

}]);

I have a base html page which links to four pages.

<ul>
    <li>@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("My Messages", "MyMessages", "Home")</li>
</ul>

When the site loads it goes to "http:/localhost:51264/#/", which loads the home page and everything works fine (the "/templates/topicsView.html" page). But if (from that page) I click the Home link again, it goes to "http://localhost:51264/#", without the slash and the topicsView.html isn't loaded. If I put the slash back it loads fine.

If I access the home page from the contacts page it properly loads "http:/localhost:51264/#/"

if "/#/" is the right spot for the homepage that's fine, as long as I could ensure if someone accesses "/#" it redirects there.

Possible duplicate of http://stackoverflow.com/questions/29074401/route-to-different-viewuse-html-actionlink-and-ng-view-in-view-in-asp-net-mvc — maurycy, Nov 26 '16 at 18:09

score 0 · Answer 1 · answered Nov 24 '16 at 07:44

Please add <base> tag in your <head> tag of page

<head>
  <base href="/">
  //Note:- But when you go live replace above line by "sub-context" of your Application URL
  //e.g Your application is running on www.example.com/testApp/ 
  //then change above <base> tag to <base href="/testApp/">
  ...
</head>

Additional, if you want to get rid of '#' from URL then please Use following code

app.config(['$locationProvider', function ($locationProvider) {        

    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });  
}])

Link for reference: https://docs.angularjs.org/error/$location/nobase

Hope this solution help you to resolve your issue

score 0 · Answer 2 · edited May 23 '17 at 12:01

Maybe part 1 & 2 of my answer HERE guide you to handle routes and ...

1) Removing # from url

app.config(['$locationProvider', function ($locationProvider) {

    $routeProvider.when('/any_route', {
        templateUrl: 'view.html',
        controller: 'Controller'
    })

    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });

}]);

2) Review your MVC Routing

Till now maybe you had one HomeController for returning index.cshtml and booting up your Angular App.
After removing # from Angular routing, you have to set MapRoute for all of your routes.
Because in this situation the first time you try to visit routes like www.site.com/any_route Angular App not loaded yet so it tries to get page from MVC Routing. But after that $routeProvider do its duties.

routes.MapRoute(
    name: "any_route",
    url: "any_route",
    defaults: new {
        controller = "Home",
        action = "Index",
        id = UrlParameter.Optional
    }
);

score 0 · Answer 3 · edited May 23 '17 at 12:07

I have several idea's

Manually configure route for empty location

The different is the last slash in URL. When I click "#/" for the first time, angular redirect the URL to #//, and load ng-view. when I click it second time, because the current URL is #//, it's not equal to the URL in the config("#/") I clicked, so Angular triggers the location change method and reloads the ng-view, in addition Angular redirects the URL to #// again. next time I click the URL, angular does the same thing again.

In this case we needs to add another one configuration for empty URL, like

$routeProvider.when("", {
        templateUrl: "/templates/topicsView.html",
        controller: topicsController
    })

Now if this URL is empty or with a slash, then it's will be going to the proper location.

You go to force reload the URL

Otherwise: you should use $route.reload() to force the reload. But it's make to load the page

And please take a look at this discussions

score -1 · Answer 4 · answered Nov 24 '16 at 07:45

I have not tested it myself but I think this change will work:

<ul>
    <li>@Html.ActionLink("Home", "#/", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("My Messages", "MyMessages", "Home")</li>
</ul>

Only change in above code is "Index" became "#/", so that your angular route can work properly.

Why does my AngularJS home page not load when linked from itself

4 Answers4