html - Angularjs 到下一页的路由不起作用

我正在主页上工作。当我单击链接时，它应该路由到下一页。它不起作用，我无法理解我哪里出错了。

这是这个 [ https://plnkr.co/edit/TA71EqoDX8Yu0WyIcgPn?p=preview]

我的路由代码在这里:

// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);

// configure our routes
scotchApp.config(function ($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/Header', {
            templateUrl: '/Header.html',
            controller: 'mainController'
        })

        // route for the about page
        .when('/about', {
            templateUrl: 'pages/about.html',
            controller: 'aboutController'
        })

        // route for the contact page
        .when('/contact', {
            templateUrl: 'pages/contact.html',
            controller: 'contactController'
        });
});

index.html代码:

<!DOCTYPE html>
<html ng-app="scotchApp">
<head>
    <title></title>
    <meta charset="utf-8" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <link href="index.css" rel="stylesheet" />
    <script src="app.js"></script>

    <link href="font.css" rel="stylesheet" />
</head>
<body ng-controller="mainController">

    <div class="navbar navbar-inverse navbar-fixed-left">
        <p>
            <br />
            <br />
        </p>



        <b><a class="navbar-brand" href="#" style="color:white">Administrator</a></b>
        <ul class="nav navbar-nav">

            <li><a href="#Header">Header Details</a></li>
            <li><a href="#ReportDetails">Report Details</a></li>
            <li><a href="#ProjectIDCreation">Project ID Creation</a></li>
            <li><a href="#">Display all submission for verify</a></li>
        </ul>

        <b><a class="navbar-brand" href="#" style="color:white">User</a></b>
        <ul class="nav navbar-nav">

            <li><a href="#">Timesheet Information</a></li>

        </ul>
    </div>

    <div class="navbar navbar-inverse navbar-fixed-top">



                <ul id="login_signup">
                    <li><a href="#" id="login_link">Login <span>&#x25c0;</span></a></li>
                    <li><a href="#" id="sign_link">SignUp <span>&#x25c0;</span></a></li>
                </ul>
            </div>

    <div class="pull-right" style="margin-right:30px;margin-top:50px">

        <div ng-view></div>


    </div>



</body>
</html>

最佳答案

以下是错误

您已经声明了多个模块。
Header.html 包含不需要的 html 和 body 标签。
在 index.html 中引导的主 Controller 不存在。

angular.module('scotchApp') 是对已定义模块的getter语法，可用于引用模块

var app = angular.module('scotchApp');
app.controller('mainController', function ($scope){
  console.log('main controller');

});
app.controller('headerCtrl', function ($scope) {
    $scope.headerData = {};
    $scope.headerData.Result = [];
    $scope.clear = function () {
        $scope.headerData.Result = [];
    }
    $scope.Save = function () {


        $scope.headerData.Result.push({
            "Header": $scope.header,
            "Status": $scope.status

        });

    };

    $scope.clear = function() {
        console.log($scope.header);
        console.log($scope.status);
        $scope.header = "";
        $scope.status = "";


    };


});

Updated plunk

关于html - Angularjs 到下一页的路由不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41713120/

html - Angularjs 到下一页的路由不起作用

上一篇：html - 多列样式输入和文本区域(无 div)

下一篇：javascript - 如何在 Cl-Editor 中添加更多字体？