Angularjs 使用ngRoute和获取404错误
好吧，我在看书。 并尝试让示例针对我的IIS工作。当我单击页面中的链接时。chrome的地址将更改如下 当我试图通过点击地址栏中的Angularjs 使用ngRoute和获取404错误,angularjs,angularjs-routing,Angularjs,Angularjs Routing,好吧，我在看书。 并尝试让示例针对我的IIS工作。当我单击页面中的链接时。chrome的地址将更改如下 当我试图通过点击地址栏中的enter键来重新加载页面时。我想它会为Moby重新加载页面内容。但是我得到了一个错误404。我不知道这是否是ngRoute的最佳实践。为什么我有404错误 我不想在jsfiddle或plunker中演示它。因为我认为它与在IIS中部署它会有所不同。所以我把代码贴在下面。谢谢 TestRoute.html <html ng-app="ngRouteExamp
enterMoby404<html ng-app="ngRouteExample">
<head>
<title>Angualar js test</title>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script>
var routeApp=angular.module('ngRouteExample', ['ngRoute']);
routeApp.controller('MainController', function($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
}).controller('BookController', function($scope, $routeParams) {
$scope.name = "BookController";
$scope.params = $routeParams;
}).controller('ChapterController', function($scope, $routeParams) {
$scope.name = "ChapterController";
$scope.params = $routeParams;
});
routeApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookController',
resolve: {
// I will cause a 1 second delay
delay: function($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
})
.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
controller: 'ChapterController'
});
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
});
</script>
<script type="text/ng-template" id="book.html">
controller: {{name}}<br />
Book Id: {{params.bookId}}<br />
</script>
<script type="text/ng-template" id="chapter.html">
controller: {{name}}<br />
Book Id: {{params.bookId}}<br />
Chapter Id: {{params.chapterId}}
</script>
</head>
<body>
<div ng-controller="MainController">
Choose:
<a href="Book/Moby">Moby</a> |
<a href="Book/Moby/ch/1">Moby: Ch1</a> |
<a href="Book/Gatsby">Gatsby</a> |
<a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
<a href="Book/Scarlet">Scarlet Letter</a><br/>
<div ng-view></div>
<hr />
<pre>$location.path() = {{$location.path()}}</pre>
<pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre>
<pre>$route.current.params = {{$route.current.params}}</pre>
<pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
<pre>$routeParams = {{$routeParams}}</pre>
</div>
<body>
安圭拉js试验
var routeApp=angular.module（'ngRouteExample'，['ngRoute']）；
routeApp.controller（'MainController'，函数（$scope、$route、$routeParams、$location）{
$scope.$route=$route；
$scope.$location=$location；
$scope.$routeParams=$routeParams；
}).controller（'BookController'，函数（$scope，$routeParams）{
$scope.name=“BookController”；
$scope.params=$routeParams；
}).controller（'ChapterController'，函数（$scope，$routeParams）{
$scope.name=“ChapterController”；
$scope.params=$routeParams；
});
routeApp.config（函数（$routeProvider，$locationProvider）{
$routeProvider
.when（“/Book/：bookId”{
templateUrl:'book.html'，
控制器：“BookController”，
决心：{
//我会造成1秒的延迟
延迟：函数（$q，$timeout）{
变量延迟=$q.defer（）；
$timeout（delay.resolve，1000）；
返回延迟。承诺；
}
}
})
.when（'/Book/：bookId/ch/：chapterId'{
templateUrl:'chapter.html'，
控制器：“ChapterController”
});
//配置html5使链接在JSFIDLE上工作
$locationProvider.html5Mode（true）；
});
控制器：{{name}}
图书Id:{{params.bookId}}
控制器：{{name}}
图书Id:{{params.bookId}}
章节Id:{{params.chapterId}
选择：
|
|
|
|
$location.path（）={{{$location.path（）}
$route.current.templateUrl={{{$route.current.templateUrl}}
$route.current.params={{{$route.current.params}
$route.current.scope.name={{{$route.current.scope.name}
$routeParams={{$routeParams}}
$locationProvider.html5Mode（true）
您的链接将更改为http://localhost:86/#/Book/Moby
，但服务器将能够在不进行任何额外更改的情况下处理地址
另一方面
如果您必须删除#
，则需要设置特定于堆栈的服务器端重定向，以便服务器知道页面的位置
如果您选择HTML5模式（true）
，您还应该在为当前不支持的浏览器初始化HTML5模式之前添加一个检查。然后根据设置的HTML5模式适当更新应用程序中的链接。是mvc项目吗？不是，只是普通的html页面。因此，您需要为IIS中的所有请求设置重定向到主页（index.html），因为在主页上的脚本开始执行之前，angular route不起作用。