这是我第一次使用 AngularJS Routing，我制作了一个像这样的主 HTML 文件
<!DOCTYPE html>
<html lang="en">
<head ng-app="RateRequestApp">
<title> - Shipment Details</title>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="Angular/App.js"></script>
<script src="Angular/Controllers.js"></script>
</head>
<body ng-controller="ReadOnlyController">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#ShipmentDetails"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#rate-request"><i class="fa fa-shield"></i> About</a></li>
</ul>
</div>
</nav>
<div id="main">
<span>data need to come here</span>
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
</body>
</html>
和app.js
var RateRequestApp = angular.module('RateRequestApp', [
'RateRequestApp.controllers',
'ngRoute'
]);
RateRequestApp.config(function ($routeProvider) {
$routeProvider
.when('/ShipmentDetails', {
templateUrl: 'ShipmentDetails.html',
controller: 'ReadOnlyController'
})
.when('/rate-request', {
templateUrl: 'rate-request.html',
controller: 'RateRequestCtrl'
});
});
Controller .js
angular.module('RateRequestApp.controllers', []).controller('ReadOnlyController', [
'$scope',
function ($scope) {
$scope.message = "Success";
}
]);
我在控制台中看不到任何错误。该应用程序根本无法运行。 我的网址是这样的
http://localhost:61919/home.html#ShipmentDetails
在我看来一切都很好。任何人都可以指出我在这里做错了什么吗？
最佳答案
实际上，控制台有很多错误。 那么让我们开始吧
1.您没有 Angular 目录
<script src="Angular/App.js"></script>
<script src="Angular/Controllers.js"></script>
应该是
<script src="App.js"></script>
<script src="Controllers.js"></script>
ng-app上body不是head 您必须使用ng-href指令应该是这样的:
<a ng-href='#/ShipmentDetails'>Details</a>
而你没有RateRequestCtrl - 检查 App.js。
关于javascript - 无法进行 AngularJS 路由，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27523137/