Question

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

Controllers.js

angular.module('RateRequestApp.controllers', []).controller('ReadOnlyController', [
    '$scope',
    function ($scope) {
        $scope.message = "Success";
    }
]);

我无法在控制台中看到任何错误。该应用程序根本无法正常工作。我的网址就像这样

http://localhost:61919/home.html#ShipmentDetails

一切看起来都不错。任何人都可以指出我在这里做错了吗？

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

Answer 1

实际上，控制台中存在很多错误。所以让我们开始吧

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。

修复示例：http://plnkr.co/edit/beRwB2gAccPDcgRsicjU?p=preview

无法进行AngularJS路由

1 个答案: