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

Question

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

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

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

<div>Hello Home from MVC</div>

<div>
   {{title}}
    <div ng-view></div>
</div>

我还定义了一个 angular 应用程序和几个控制器。控制器只包含 $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

您混淆了 ngRoute 和 ui-router，请使用其中之一，在您的情况下，以下内容应该可以解决问题，

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

Answer 2

试试这个

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="/"> 标签

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

ASP.NET MVC and AngularJs Routing Merge issue

angularjs

asp.net-mvc

html

routing

views