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

Posted 2021-04-25

我正在尝试合并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。我还配置了我的角度应用程序和路由，如下所示：

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

答案

试试这个

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
});

}]);

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

另一答案

你正在与ngRoute和ui-router混合，使用其中任何一个，在你的情况下应该做的伎俩，

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