CODEWITHSUNDEEP
javascriptangularjsngroute
Aditya Kumar
Aditya Kumar

Reputation: 173

AngularJs route no error but not working

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

Upvotes: 1

Views: 1521

Answers (4)

Manikandan Velayutham
Manikandan Velayutham

Reputation: 2228

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>

Upvotes: 2

kishan patel
kishan patel

Reputation: 125

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){

});

Upvotes: 0

Mistalis
Mistalis

Reputation: 18269

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>

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222522

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>

Upvotes: 0

Related Questions