Angular JS 路由在 ASP.NET MVC 和 Web API 项目中不起作用

Question

我有两个主要的 ASP.NET MVC 控制器：

Home

和

User

。

Home

有一个

Index

方法，返回一个

Index

视图，该视图是在 ng-view 中加载部分页面（用户详细信息、设施、登录页面）的主页面。此外，索引视图不使用 MVC 布局。我的解决方案资源管理器看起来像这样

问题是，当我运行应用程序时，部分页面未在 ng-View 中加载，并且 URL 未正确形成。

我的

Module.js

看起来像这样

/// <reference path="../scripts/angular.js" />
var app = angular.module('ApplicationModule', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    //alert('Im Config');
    $routeProvider.when('/Login',
        {
            templateUrl: 'User/Login',
            controller: 'LoginController'
        })
        .when('/Profile',
            {
                templateUrl: 'User/UserDetail',
                controller: 'ProfileController'
            })
        .when('/Facility',
            {
                templateUrl: 'User/Facility',
                controller: 'FacilityController'
            })
        .otherwise(
            {
            redirectTo: 'User/UserDetail'
            });

    $locationProvider.html5Mode(true).hashPrefix('!');
}]);

我的

Controller.js

看起来像这样：

/// <reference path="../scripts/angular.js" />
/// <reference path="module.js" />

app.controller("LoginController", function ($scope, $http) {
    alert("Login Controller Called");
}); 
app.controller("ProfileController",  function ($scope, $http) {
    alert("profile Controller Called");
});

app.controller("FacilityController",  function ($scope, $http) {
    alert("Facility controller called");
});

Index.cshtml

看起来像这样

<div>
    <h1>header</h1>
</div>

<div class="main container" ng-view>
    <div>
        <a href="#/Login">Login</a>
        <a href="#/Profile">Profile</a>
        <a href="#/Facility">Facility</a>
    </div>

</div>

<footer class="footer py-4 bg-dark text-light">
    <h1>Footer</h1>
</footer>

输出如下：

登录、个人资料和设施部分视图未加载。

Answer 1

在 AngularJS 1.6 版本中，他们更改了 URL hash-bang 的哈希前缀。链接现在有

#!

而不是

#

。

所以尝试一下这个

<div>
  <a href="#!Login">Login</a>
  <a href="#!Profile">Profile</a>
  <a href="#!Facility">Facility</a>
</div>

或者，如果您想删除哈希前缀（

!

），您需要您的配置具有以下代码：

$locationProvider.hashPrefix('');

更多信息：commit-aa077e8