Angularjs次のページへのルーティングが機能していません

私はメインページで作業しています。リンクをクリックすると、次のページにルーティングされます。動作していないと私はどこに間違っているのか理解できません。ここでAngularjs次のページへのルーティングが機能していません

は、このためにplunkrある[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>

出典

2017-01-18 beginner

を指すために使用することができ、すでに定義されたモジュールのためのゲッター構文、ありますまだコントローラを定義していないからです。 – Laazo

次はエラー

あなたにはdecがあります複数のモジュールを購入しました。
Header.htmlには必要のないHTMLのbodyタグがあります。
index.htmlでブートストラップされたメインコントローラは存在しません。

angular.module（ 'scotchApp'）は、それが失敗しているモジュール

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

出典

2017-01-18 07:08:26 Aravind

魅力的な作品...ありがとうございます:) – beginner

お楽しみください。楽しんで:) :) P – Aravind

Angularjs次のページへのルーティングが機能していません

答えて

関連する問題