ASP.NET MVC 및 AngularJs 라우팅 병합 문제

Question

asp.net MVC 및 angularjs 라우팅을 병합하려고하지만 문제가 발생했습니다. 내가 한

1. 에 의해 내가 일을 어떻게했는지의 단계를 설명 할 것이다 나는 비주얼 스튜디오에 asp.net MVC 프로젝트를 만들었습니다.
2. about 및 contact 컨트롤러 및보기를 삭제했습니다. 그냥 컨트롤러와 뷰 home 유지했다.

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

   : 나는 다음과 같은 코드가 index.cshtmlhome/index보기 즉 내부

나는 또한 각 응용 프로그램도 몇 컨트롤러를 정의했습니다. 컨트롤러에는 컨트롤러 이름이 포함 된 $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

: 그냥 customerList 및 customerDetail 각각 내부의 div가 포함되어

<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.

내가

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

내가 그것을 해결하기 위해 시도했지만 할 수 없었다 말은 인덱스 페이지와 함께 나에게 asp.net에 의해 생성 된 레이아웃 페이지를 표시하고 콘솔에서 오류가 발생합니다 코드를 실행

. 나중에 나는 $locationProvider 줄을 주석 처리하고 코드가 작동하기 시작했다. 템플릿 폴더 안에 home.html이로드되었고 customerList 및 details 개의 두 링크를 볼 수있었습니다. 나는 그것을 클릭 때, 뷰를로드하거나 오류 대신 브라우저의 주소 표시 줄에 표시됩니다 표시되지 않습니다 :보기를이 오류를 극복하고로드 할 수있는 방법이

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

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

있습니까? 도움을 많이 주시면 감사하겠습니다. homeViewCtrl, customerListViewCtrl, customerDetailViewCtrl은 컨트롤러의 제목이 포함 된 $scope.title 만있는 다른 파일에서 선언됩니다.

이

은 ctrl1.js 파일입니다 : 당신은 ngRoute 및 UI 라우터, 트릭을해야 다음 귀하의 경우에는, 두 사람 중 하나를 사용하여 함께 혼합되어

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

,

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

}]); 

또한 <base href="/"> 태그를 t에 추가해야합니다. 나는 여전히 같은 오류를 형식 오류 받고 있어요 제거 할 경우에도 페이지