AngularJS: ngRoute, otherwise not working

Asked 15/6, 2014 at 10:14 Answered 24/11, 2014 at 12:59

I have a really weird bug, I have set my routes and my controllers. Now I have just a blank page with no errors?

index.html;

<!DOCTYPE html>
<html ng-app="RekenTalent" lang="nl">
    <head>
        <title>Rekentalent.nl: Ben jij een talent in Rekenen?</title>
        <!-- Stylesheets -->
        <link rel="stylesheet" type="text/css" href="/app/front/assets/stylesheets/style.css">
        <!-- AngularJS -->
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-route.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-animate.min.js"></script>
        <!-- Controllers -->
        <script src="/app/front/controllers/controller.js"></script>
        <!-- Router -->
        <script src="/app/front/router.js"></script>
    </head>

    <body ng-view></body>
</html

Controller.js:

/**
*  RekenTalent
*
* Copyright 2014 - Rekentalent.nl
*/
var RekenTalent = angular.module('RekenTalentControllers', []);

RekenTalent.controller('rekenCtrl', ['$scope', function($scope){

}]);

Router.js:

var RekenTalent = angular.module('RekenTalent', [
    'ngRoute', 'RekenTalentControllers'
]);

RekenTalent.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
    when('/index', {
        templateUrl: '/templates/index.html',
        controller: 'rekenCtrl'
    }).
    otherwise({
        redirect: '/index'
    });
}]);

And /templates/index.html says just 'hi'. Does anyone know why I get a blank page? It should redirect me to /index.html and /index.html should use /templates/index.html as the template. Whats the problem and the fix?

UPDATE:

when I go to /index it works, so the otherwise param doesn`t work, why not?

Dillingham answered 15/6, 2014 at 10:14 Comment(4)

I think it is file referrence error , please give us , where is your index , and your angular scripts in your pc – Rabid 15/6, 2014 at 10:22

And you can add a console.log('load') in your controller to check if ther controller is fired correctily or not But still , I think its refference error – Rabid 15/6, 2014 at 10:24

index.html => /app/front/templates/index.html, also when I put console.log('hi') in the controller I get no log in the console. – Dillingham 15/6, 2014 at 10:50

weird, when I change /index to / in the router is works, why does otherwise not work? – Dillingham 15/6, 2014 at 10:52

change redirect to redirectTo

And it's better to use home.template to avoid all this kind of problems, I mean consider:

You have an index.html that contains your whole included scripts, like angular, jquery , ..., and in the body tag there is ng-view, ok?

Now, if you have any templates such as welcome or whatever for index, write that template in a home.html, OK? Like this:

index.html :

<body ng-app="yourapp">
   <div ng-view>
   </div>
</body>

Home.html

  <div>
     Welcome, user. This is index.
  </div>

Your app configuration:

yourapp.config(function($routeProvider) {
   $routeProvider
      .when('/', {
         templateUrl: 'partials/home.html',
         controller: 'homeCtrl'
      })
      .otherwise({redirectTo:'/'});
}

And it is a good practice to put all of your templates inside a partials folder, where the father folder contains index.html like this

  root 
     yourAppFolder
       1-Assets
          Css
          Js

       2-Partials
          home.html
          login.html

       3-index.html

Rabid answered 15/6, 2014 at 11:5 Comment(0)

Found it; redirect should be redirectTo;

var RekenTalent = angular.module('RekenTalent', [
    'ngRoute', 'RekenTalentControllers'
]);

RekenTalent.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
    when('/index', {
        templateUrl: '/app/front/templates/index.html',
        controller: 'rekenCtrl'
    }).
    otherwise({
        redirectTo: '/index'
    });
}]);

Dillingham answered 15/6, 2014 at 10:58 Comment(0)

I have this sample of code for example:

.config(['$routeProvider', 
function($routeProvider) {
    console.log('routeando');
    //alert('otherwise' + $routeProvider.route);
    $routeProvider.
        when('/', {     templateUrl: 'home'}).
        when('/route1', {  templateUrl: 'route1'}).

        /*Without the next line, redirectTo doesnt work*/
        when('/error', {  templateUrl: 'error'}).
        otherwise({     redirectTo: '/error'});
}]);

Otherwise is only going to work if you have already a "when" parameter for that route.

Excuse me for my english and have a nice day.

Murdocca answered 24/11, 2014 at 12:59 Comment(0)

Recommended topics

Hot tags