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',
            });
    });
});

Answer 1

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>

Answer 2

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>

Answer 3

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>

Answer 4

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

Question

4 answers

solution1
2 2017-05-04 12:39:04

solution2
0 2017-05-04 12:33:54

solution3
0 2017-05-04 12:35:39

solution4
0 2017-05-04 12:46:33

AngularJs route no error but not working

Question

4 answers

solution1 2 2017-05-04 12:39:04

solution2 0 2017-05-04 12:33:54

solution3 0 2017-05-04 12:35:39

solution4 0 2017-05-04 12:46:33

solution1
2 2017-05-04 12:39:04

solution2
0 2017-05-04 12:33:54

solution3
0 2017-05-04 12:35:39

solution4
0 2017-05-04 12:46:33