CODEWITHSUNDEEP
angularjsangular-routingroute-provider
Khizar Iqbal
Khizar Iqbal

Reputation: 495

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.

Upvotes: 0

Views: 128

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136154

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

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

Upvotes: 1

Related Questions