Khizar Iqbal Khizar Iqbal - 3 months ago 7
AngularJS Question

templateUrl is not being called by angular $routeProvider

I am learning AngularJs now a days and stuck in the error and couldn't resolve it for the last two days. First let's look at my code first:

MainPage.html

<!DOCTYPE html>
<html>
<head>
<title>Learn Angular Js - Scott Allen</title>
<meta charset="utf-8" />
</head>

<body ng-app="LearnAngular">
<h1>Git Hub Viwer</h1>
<div ng-view></div>

<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="App.js"></script>
<script src="MainController.js"></script>
</body>
</html>


App.js

(function () {
var app = angular.module("LearnAngular", ["ngRoute"]);

app.config(function routeConfig($routeProvider) {
$routeProvider
.when("/main", {
templateUrl: function () {
debugger;
return "Main.html";
},
controller: "MainController"
})
.otherwise({ redirectTo: "/mian" });
});
}());


MainController.js

(function () {
var MainController = function ($scope, $interval, $location) {
alert("var MainController = function ($scope, $interval, $location) {};");

var decrementCountdown = function () {
$scope.countdown -= 1;
if ($scope.countdown < 1) {
$scope.search($scope.username);
}
};

var countDownPromise = null;
var startCountdown = function () {
countDownPromise = $interval(decrementCountdown, 1000, $scope.countdown);
};

$scope.search = function (username) {
if (countDownPromise) {
$interval.cancel(countDownPromise);
$scope.countdown = null;
}

// redirect to the url.
};

$scope.username = "angular";
$scope.countdown = 5;
startCountdown();
};

var app = angular.module("LearnAngular");
app.controller("MainController", MainController);

}());


Main.html

<div>
<h1>{{countdown}}</h1>
<form name="searchUser" ng-submit="search(username)">
<input type="search" required placeholder="Enter username to search" ng-model="username" />
<input type="submit" value="Search" />
</form>
</div>


When I run the application, i see this url:

http://localhost:52108/HomePage.html#/mian


which shows that I successfully redirect to the main route but
Main.html
is not being shown on the
HomePage.html
page and browser is not requesting for the
Main.html
when I examine the network of browser.

Here is the screen shot of my application:
Screen Shot of my application.

I searched on the internet and tried many solutions but none of them solves my problem. I don't what is wrong with the code. I am developing in
VisualStudio


Thanks in advance for your help and time.

Answer

You had typo in URL there in otherwise's redirectTo value, it should be /main

.otherwise({ redirectTo: "/main" });
Comments