AngularJs route no error but not working

Question

I am creating a demo app where i am using routing. Even though there is no error in console , i am not able to see my contents. What could be wrong here. I have created two separate html file with different contents

<html>

        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
            <script src = "js/junk.js"></script>
        </head>

        <body ng-app="junkapp">
            <div ng-controller = "junkController">
                <ul>
                    <li><a href="#/">Home</a></li>
                    <li><a href="#/first">First</a></li>
                    <li><a href="#/second">Second</a></li>
                </ul>
                <div ng-view>
                </div>
            </div>
        </body>
    </html>

    var app = angular.module("junkapp", ['ngRoute']);

app.controller("junkController", function($scope){

    app.config(function($routeProvider) {
        $routeProvider

            // route for the home page
            .when('/', {
                templateUrl : 'junk.html',
            })

            // route for the about page
            .when('/first', {
                templateUrl : 'first.html',
            })

            // route for the contact page
            .when('/second', {
                templateUrl : 'second.html',
            });
    });
});

Manikandan Velayutham · Answer 1 · 2017-05-04T12:49:09.597

config should not come under controller.

We can’t define routes in a controller or in a service since the configuration needs to happen before it gets injected into anything we want to use it in. Any configuration we do to providers in the config function will allow us to access pre-configured instances of these providers when they are injected.

var app = angular.module('junkapp',['ngRoute']);
app.config(function($routeProvider) {
    $routeProvider.
        when('/', {
            templateUrl : "home.html"
        }).

        when('/first', {
            template : "<p>Hi First</p>"
        }).

        when('/second', {
            template : "<p>Hi second</p>"
        });
});

app.controller("junkController", function($scope){
    $scope.text = "Welcome";     
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script type="text/ng-template" id="home.html">
<p>Hi Home</p>
</script>
    <body ng-app="junkapp">
        <div ng-controller = "junkController">
            <ul>
                <li><a href="#/">Home</a></li>
                <li><a href="#/first">First</a></li>
                <li><a href="#/second">Second</a></li>
            </ul>
            <div ng-view>
            </div>
        </div>
    </body>

Mistalis · Answer 2 · 2017-05-04T12:41:07.703

0

The app.config code should not be written in a controller. Move it outside of your controller and it will work:

var app = angular.module("junkapp", ['ngRoute']);
 
app.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            template : "<h1>Main</h1><p>Click on the links to change this content</p>"
        })
        .when('/first', {
            template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
        })
        .when('/second', {
            template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
        });
});

app.controller("junkController", function($scope) {
             
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>

<body ng-app="junkapp">
    <div ng-controller = "junkController">
        <ul>
            <li><a href="#/">Home</a></li>
            <li><a href="#/first">First</a></li>
            <li><a href="#/second">Second</a></li>
        </ul>
        <div ng-view> </div>
    </div>
</body>

edited May 04 '17 at 12:41

answered May 04 '17 at 12:33

Mistalis

17,793
13
73
97

Naah.. Still i cannot see anything in the page – Aditya Kumar May 04 '17 at 12:36
@AdityaKumar I've added a snippet, as you can see, it works! – Mistalis May 04 '17 at 12:41
Works for the template but not for templateurl – Aditya Kumar May 04 '17 at 12:45
@AdityaKumar Is your app.js in the same directory as your templates (ex: junk.html)? – Mistalis May 04 '17 at 12:49
Yes.. The problem is with the url. – Aditya Kumar May 04 '17 at 12:52
This is my home page url - file:///C:/Users/anilkumar.k/Desktop/junk/junk.html#/ – Aditya Kumar May 04 '17 at 12:52
The moment I clicked "first", URL changed to file:///C:/first – Aditya Kumar May 04 '17 at 12:52
The path starts from **where your app.js is defined in your app directroy**, not from `C://...` – Mistalis May 04 '17 at 12:55

score 0 · Answer 3 · answered May 04 '17 at 12:35

0

Move the config outside of the controller.

DEMO

var app = angular.module("junkapp", ['ngRoute']);
app.controller("junkController", function($scope){

  
});
  app.config(function($routeProvider) {
        $routeProvider
            .when('/', {
                template : "<h1>Main</h1><p>Click on the links to change this content</p>"
            })

            .when('/first', {
                template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
            })

            .when('/second', {
                template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
            });
    });

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
 <body ng-app="junkapp">
        <div ng-controller = "junkController">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#first">First</a></li>
                <li><a href="#second">Second</a></li>
            </ul>
            <div ng-view>
            </div>
        </div>
  </body>

answered May 04 '17 at 12:35

Sajeetharan

216,225
63
350
396

Very strange for me... I have copy pasted your code, but still i cannot see any thing in my browser. But it is running here in code snippet – Aditya Kumar May 04 '17 at 12:42
does your js file gets loaded? – Sajeetharan May 04 '17 at 12:43
yes js file is loaded. it works for template but not for templateurl – Aditya Kumar May 04 '17 at 12:45
@AdityaKumar check if your templateUrls are fine – Sajeetharan May 04 '17 at 12:45
app.config(function($routeProvider) { $routeProvider // route for the home page .when('/', { templateUrl : 'junk.html', }) // route for the about page .when('/first', { templateUrl : 'first.html', }) // route for the contact page .when('/second', { templateUrl : 'second.html', }); }); – Aditya Kumar May 04 '17 at 12:47
put this code .. – Manikandan Velayutham May 04 '17 at 12:49
Thanks for your help. Problem was in the URl. I found the solution here - http://stackoverflow.com/questions/27742070/angularjs-error-cross-origin-requests-are-only-supported-for-protocol-schemes – Aditya Kumar May 05 '17 at 09:13

score 0 · Answer 4 · answered May 04 '17 at 12:46

set config out side the controller.

  var app = angular.module("junkapp", ['ngRoute']);
  app.config(function($routeProvider) {
     $routeProvider
    .when('/', {
        templateUrl : 'junk.html',
    })

    // route for the about page
    .when('/first', {
        templateUrl : 'first.html',
    })

    // route for the contact page
    .when('/second', {
        templateUrl : 'second.html',
    });
});
app.controller("junkController", function($scope){

});

AngularJs route no error but not working

4 Answers4