Question

这是我的home-index.js文件

if($_SERVER["REQUEST_METHOD"] == "HEAD"){
    // response 404 or using header method to redirect 
    exit;
}

我有一个基本的html页面，链接到四页。

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: "/" });

}]);

当网站加载时，它会转到＆＃34; http：/ localhost：51264 /＃/＆＃34;，它会加载主页，一切正常（＆＃34; /templates/topicsView.html&# 34;页面）。但是，如果（从该页面）我再次单击“主页”链接，则会转到＆＃34; http://localhost:51264/#＆＃34;，没有斜杠，且主题View.html未加载。如果我把斜线放回去，那就很好。

如果我从联系人页面访问主页，它会正确加载＆＃34; http：/ localhost：51264 /＃/＆＃34;

如果＆＃34; /＃/＆＃34;主页的正确位置是好的，只要我能确保有人访问＆＃34; /＃＆＃34;它重定向到那里。

Answer 1

请在页面的<base>标记中添加<head>标记

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

另外，如果您想从URL中删除“＃”，请使用以下代码

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

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

参考链接：https://docs.angularjs.org/error/$location/nobase

希望此解决方案可以帮助您解决问题

Answer 2

也许第1部分＆amp;我的回答中有2个HERE指导您处理路线和......

1）从网址中删除#

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

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

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

}]);

2）查看您的MVC路由

直到现在，也许你有一个HomeController可以返回index.cshtml并启动你的Angular App。
从Angular路由中删除#后，您必须为所有路由设置MapRoute 因为在这种情况下你第一次尝试访问www.site.com/any_route Angular App尚未加载的路由，所以它试图从MVC路由获取页面。但在那之后$routeProvider履行职责。

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

Answer 3

我有几个想法

手动配置空位置的路线

不同的是URL中的最后一个斜杠。当我第一次单击“＃/”时，angular将URL重定向到＃//，并加载ng-view。当我第二次点击它时，因为当前的URL是＃//，它不等于我点击的配置中的URL（“＃/”），所以Angular会触发位置更改方法并重新加载ng-view，另外Angular将URL重定向到＃//。下次我点击URL时，angular再次做同样的事情。

在这种情况下，我们需要为空URL添加另一个配置，例如

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

现在，如果此URL为空或带有斜杠，那么它将转到正确的位置。

您强制重新加载网址

否则：您应该使用$route.reload()强制重新加载。但它是加载页面

请看一下这个discussions

Answer 4

我自己没有测试过，但我认为这种改变会起作用：

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

只有上述代码的更改"Index"变为"#/"，因此您的角度路线才能正常工作。

为什么我的AngularJS主页在链接时没有加载

4 个答案: