Indexansicht bindet nicht an den Controller in meiner angularjs App

Question

Ich habe folgendes Modul, das meine eckige App definiert.

     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"); 
         }; 
        }); 

Ich möchte Benutzer auf Indexseite mit Begrüßungs Taste landen und nach dem Klicken möchte ich Benutzer auf die Homepage nehmen und, wenn der Benutzer Informationen über Homepage füllt sollte es zu Quiz-Seite.

Aber die App bindet den Controller nicht an die Indexseite überhaupt.

Wenn die Indexseite geöffnet wird, wird der Schaltflächentext als {{btn}} angezeigt. Dies sind keine Teilvorlagen. Ich möchte nur zu verschiedenen HTML-Seiten wechseln, wenn der Benutzer auf eine Schaltfläche auf jeder Seite klickt.

Answer 1

Sie verwenden ngRoute, aber Sie haben die Plugin-Bibliothek nicht in index.html nach der angulat.min.js hinzugefügt. In der Version 1.2 später muss angular-route.js separat hinzugefügt werden und kommt nicht in main Bibliothek. z.B.

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

Auch Sie verwenden $ Location Service in allen Controllern, so dass Sie, dass in Reglerfunktion als Abhängigkeit geben haben zu.

Sie benötigen die ng-view-Direktive in index.html, um das Routing zu ermöglichen. Und seien Sie vorsichtig, dass Ihre Ansichten Teilansichten sind (mit partiellem HTML-Code). Warum haben Sie auch window.history.go(-1); bei der Initialisierung des Controllers hinzugefügt? Weil es immer zur vorherigen Seite zurückkehren wird, laden Sie den Controller. Sie sollten solchen Code nur innerhalb einer Funktion hinzufügen, die Sie für bestimmte Aktionen/Ereignisse aufrufen. Hier arbeiten Plunker für Ihre Version von Code:

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