gpt4 book ai didi

javascript - 无法进行 AngularJS 路由

转载 作者:行者123 更新时间:2023-11-28 19:27:40 24 4
gpt4 key购买 nike

这是我第一次使用 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

在我看来一切都很好。任何人都可以指出我在这里做错了什么吗?

我的完整应用程序:http://plnkr.co/edit/0f14nrITRb9ioXunEdot

最佳答案

实际上,控制台有很多错误。那么让我们开始吧

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-appbody不是head
  • 您必须使用ng-href指令应该是这样的:

    <a ng-href='#/ShipmentDetails'>Details</a>

  • 而你没有RateRequestCtrl - 检查 App.js。

    固定示例:http://plnkr.co/edit/beRwB2gAccPDcgRsicjU?p=preview

    关于javascript - 无法进行 AngularJS 路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27523137/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com