krrishna krrishna - 1 year ago 49
AngularJS Question

index view is not binding to the controller in my angularjs app

I have following module which defines my angular app.

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


I want to land user on index page with welcome button and upon clicking i want to take user to the homepage and when user fills info on home page it should go to quiz page.

But the app doesn't bind the controller to index page at all.

<!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>


When the index page is opened it shows button text as {{btn}}. These are not partial templates . I just want to switch to different html pages as part of the navigation user clicks on a button in each page.

Answer Source

You're using ngRoute but you've not added the plugin library in index.html after the angulat.min.js In version 1.2 later angular-route.js has to be added separately it doesn't come inside main library. e.g.

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

Also, you're using $location service in all the controllers, so you've to pass that in controller function as a dependency.

You need ng-view directive on index.html to make routing work. And be careful that your views are partial views (containing partial html code). Also why you added window.history.go(-1); on initialisation of controller? Because it'll always go back to previous page onload o controller. You should add such code only inside some function which you're going to call on specific action/event. Here's working plunker for your version of code:

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download