私のangularjsアプリケーションでは、インデックスビューがコントローラにバインドされていません

Question

私の角型アプリケーションを定義する次のモジュールがあります。

     var ang = angular.module('mainapp', ['ngRoute']); 


        ang.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { 
         $routeProvider. 

           when("/home", { 
            templateUrl: "homepage.html", 
            controller: "homeController" 
           }). 
           when("/quiz", { 
            templateUrl: "quizpage.html", 
            controller: "quizController" 
           }). 

           when("/", { 
            templateUrl: "index.html", 
            controller: "indexController" 
           }); 
           //otherwise({ redirectTo: '/' }); 
        }]); 



        ang.controller('indexController', function ($scope) { 
         $scope.btn = "Welcome" 
         $scope.Login = function() { 
          alert("Thanks "); 
          $location.path("home"); 
         }; 
        }); 

        ang.controller('homeController', function ($scope) { 
         // initialize if you can 
         window.history.go(-1); 
         $scope.salutations = [{ name: "Mr", id: 1 }, { name: "Mrs", id: 2 }, { name: "Ms", id: 3 }, { name: "Jr", id: 4 }, { name: "Mister", id: 5 }, { name: "Dr", id: 6 }]; 

         $scope.profile = { 
          name: "", 
          email: "", 
          contact: "", 
          division: "", 
          feedback: "", 

         }; 

         $scope.submitInfo = function (profile) { 
          alert("Thanks " + profile.name + ". Lets get to the Quiz now."); 
          $location.path("quiz"); 
         }; 
        }); 

        ang.controller('quizController', function ($scope) { 
         //initialize if you can 
         window.history.go(-1); 
         $scope.questions = [ 
             { 
              "questionText": "Why is the sky blue?", "answers": [ 
              { "answerText": "blah blah 1", "correct": true }, 
              { "answerText": "blah blah 2", "correct": false }, 
              { "answerText": "blah blah 3", "correct": false } 
              ] 
             }, 
             { 
              "questionText": "Why is the meaning of life?", "answers": [ 
              { "answerText": "blah blah 1", "correct": true }, 
              { "answerText": "blah blah 2", "correct": false }, 
              { "answerText": "blah blah 3", "correct": false } 
              ] 
             }, 
             { 
              "questionText": "How many pennies are in $10.00?", "answers": [ 
              { "answerText": "1,000.", "correct": true }, 
              { "answerText": "10,000.", "correct": false }, 
              { "answerText": "A lot", "correct": false } 
              ] 
             }, 
             { 
              "questionText": "What is the default program?", "answers": [ 
              { "answerText": "Hello World.", "correct": true }, 
              { "answerText": "Hello Sunshine.", "correct": false }, 
              { "answerText": "Hello my ragtime gal.", "correct": false } 
              ] 
             } 
         ]; 

         $scope.answers = {}; 
         $scope.correctCount = 0; 
         $scope.showResult = function() { 
          $scope.correctCount = 0; 
          var qLength = $scope.questions.length; 
          for (var i = 0; i < qLength; i++) { 
           var answers = $scope.questions[i].answers; 
           $scope.questions[i].userAnswerCorrect = false; 
           $scope.questions[i].userAnswer = $scope.answers[i]; 
           for (var j = 0; j < answers.length; j++) { 
            answers[j].selected = "donno"; 
            if ($scope.questions[i].userAnswer === answers[j].answerText && answers[j].correct === true) { 
             $scope.questions[i].userAnswerCorrect = true; 
             answers[j].selected = "true"; 
             $scope.correctCount++; 
            } else if ($scope.questions[i].userAnswer === answers[j].answerText && answers[j].correct === false) { 
             answers[j].selected = "false"; 
            } 
           } 
          } 
          //console.log($scope.answers); 
         }; 
         $scope.submitQuiz = function (quiz) { 
          alert("Congrats."); 
          $location.path("index"); 
         }; 
        }); 

私は歓迎ボタンで、私はホームページにユーザーをしたいと、ユーザーがホームページ上の情報を記入するとき、それはクイズのページに移動する必要がありますクリックすると、インデックスページ上でユーザーに着陸したいと思います。

しかし、アプリケーションはコントローラをインデックスページにバインドしません。

 <!DOCTYPE html> 
    <html data-ng-app="mainapp"> 
    <head> 
     <title>WinPrizes</title> 
    </head> 
    <body > 

     <div data-ng-controller="indexController"> 
      <button ng-click="Login()">{{btn}}</button> 
     </div> 
     <script src="Scripts/angular.min.js"></script> 
     <script src="app/app.module.js"></script> 
     <script src="app/main.js"></script> 

    </body> 
    </html> 

インデックスページを開くと、{{btn}}というボタンテキストが表示されます。これらは部分テンプレートではありません。ナビゲーションユーザーが各ページのボタンをクリックすると、別のhtmlページに切り替えるだけです。

Answer 1

あなたはngRouteを使用していますが、angulat.min.jsの後にindex.htmlにプラグインライブラリを追加していません。バージョン1.2以降では、angular-route.jsを別途追加する必要があります。としょうかん。例えば

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-route.js"> 
</script> 

また、すべてのコントローラで$ locationサービスを使用していますので、コントローラ機能でそれを依存関係として渡す必要があります。

ルーティング作業を行うには、index.htmlでng-viewディレクティブが必要です。また、ビューが部分的なビュー（部分的なHTMLコードを含む）であることに注意してください。またコントローラの初期化にwindow.history.go(-1);を追加した理由は？常に前のページのオンロードコントローラに戻るためです。そのようなコードは、特定のアクション/イベントで呼び出す関数の中にだけ追加してください。ここでは、コードのバージョンにplunkerを働いて ：

https://plnkr.co/edit/ADWf012Q7mTVBR3svPYb?p=preview