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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ASP.NET MVC和AngularJs路由合并问题相关的知识,希望对你有一定的参考价值。

我正在尝试合并asp.net MVC和angularjs路由,但面临问题。我将逐一解释我如何做的步骤

  1. 我在visual studio上创建了一个asp.net mvc项目。
  2. 删除了aboutcontact控制器和视图。只是保留了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.htmlcustomerDetail.html分别在div中包含customerListcustomerDetail

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

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

我试图解决它,但不能。后来我评论了$locationProvider线,然后我的代码开始工作。模板文件夹中的home.html已加载,我也可以看到customerListdetails视图的这两个链接。但是当我点击它时,不加载视图也不显示任何错误,而是在浏览器地址栏上显示:

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

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

有没有办法克服此错误并加载视图?非常感谢帮助。此外,homeViewCtrlcustomerListViewCtrlcustomerDetailViewCtrl在另一个文件中声明,只有$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']);

以上是关于ASP.NET MVC和AngularJs路由合并问题的主要内容,如果未能解决你的问题,请参考以下文章

如何在 ASP.NET MVC 中集成 AngularJS

ASP.NET MVC 和 Angularjs 与 ASP.NET MVC 和 Reactjs

ASP.NET MVC和EF集成AngularJS开发

如何在 ASP.NET MVC 中集成 AngularJS

AngularJS + ASP.NET Web API + ASP.NET MVC 身份验证

ASP.NET MVC下使用AngularJs语言:Hello your name