ASP.NET MVC 和 AngularJs 路由合并问题

Question

我正在尝试合并 asp.net MVC 和 angularjs 路由，但遇到问题。 我会一一解释我是如何做的步骤

1. 我在 Visual Studio 上创建了一个 asp.net mvc 项目。
2. 删除了about 和contact 控制器和视图。只保留了home 控制器和视图。

3. 在home/index 视图内，即index.cshtml 我有以下代码：

   <div>Hello Home from MVC</div>
   
   <div>
      {{title}}
       <div ng-view></div>
   </div>
   

我还定义了一个角度应用程序和几个控制器。控制器只包含带有控制器名称的$scope.title。我还配置了我的 Angular 应用程序和路由，如下所示：

var app = angular.module('app', ['ngRoute','ui.router' ]);

app.config(function ($routeProvider, $urlRouterProvider, $locationProvider) {
    $routeProvider.when('/', {
        templateUrl: '/Templates/Home.html',
        controller: 'homeViewCtrl'
    });
    $routeProvider.when('/custList', {
        templateUrl: '/Templates/CustomerList.html',
        controller: 'customerListViewCtrl'
    });
    $routeProvider.when('/custDetail', {
        templateUrl: '/Templates/CustomerDetail.html',
        controller: 'customerDetailViewCtrl'
    });
    $routeProvider.otherwise({ redirectTo: '/' });
    $locationProvider.html5mode({
        enabled: true,
        requireBase: false
    });
})

我在模板文件夹中有三个视图。

home.html:

<h2>{{title}}</h2>
Hello from home
<br/>
<br/>
<a href="#/custList">Go to customer list view</a>
<br />
<a href="#/custDetail">Go to customer detail view</a>

customerList.html 和 customerDetail.html 分别在 div 中包含 customerList 和 customerDetail。

当我运行代码时，它会显示由 asp.net 创建的布局页面以及索引页面，并在控制台中显示错误提示

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
TypeError: $locationProvider.html5mode is not a function

我试图解决它，但无法解决。后来我评论了$locationProvider 行，然后我的代码开始工作。模板文件夹内的home.html 已加载，我还可以看到customerList 和details 视图的这两个链接。但是当我点击它时，不会加载视图，也不会显示任何错误，而是在浏览器地址栏上显示：

http://localhost:57407/#!/#%2FcustList

http://localhost:57407/#!/#%2FcustDetail

有没有办法克服这个错误并加载视图？非常感谢您的帮助。 此外，homeViewCtrl、customerListViewCtrl、customerDetailViewCtrl 在另一个文件中声明，该文件仅包含 $scope.title 包含控制器的标题。

这是ctrl1.js 文件：

app.controller('Ctrl',['$scope', function ($scope) {
    $scope.title = "Hello World!";
}])

app.controller('homeViewCtrl', function ($scope) {
    $scope.title = "Hello from home angular";
})

app.controller('customerListViewCtrl', function ($scope) {
    $scope.title = "customer List View Controller";
})

app.controller('customerDetailViewCtrl', function ($scope) {
    $scope.title = "customer detail View Controller";
})

Answer 1

试试这个

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

 $routeProvider.when('/', {
    templateUrl: '/Templates/Home.html',
    controller: 'homeViewCtrl'
});
$routeProvider.when('/custList', {
    templateUrl: '/Templates/CustomerList.html',
    controller: 'customerListViewCtrl'
});
$routeProvider.when('/custDetail', {
    templateUrl: '/Templates/CustomerDetail.html',
    controller: 'customerDetailViewCtrl'
});
$routeProvider.otherwise({ redirectTo: '/' });
$locationProvider.html5mode({
    enabled: true,
    requireBase: false
});

}]);

另外你必须在index.html页面上添加<base href="/">标签

Answer 2

您正在混淆 ngRoute 和 ui-router，使用其中任何一种，在您的情况下，以下应该可以解决问题，

var app = angular.module('app', ['ngRoute']);