Route provider cannot access controllers definitions

Question

I am trying to learn the route features of angularJS, but what I have happened so far doesn't work.

If I ever click Load, Display, or Play (in my example: the links to possible action urls) then <div ng-view></div> still exist in the DOM (when I inspect it) , moreover it is not replaced by the related html partial file as indicated in the templateUrl of the route provider.

The Chromium log console displays an error: Uncaught ReferenceError: LoadCtrl is not defined from my_app

If I put all the when in comments while defining the route provider, then the error is no longer thrown.

So I have thought it could depend upon the order of definition of the controllers regarding the definition of the route provider. So I have tried putting them before, or after, also in a seperate controllers.js file... But that doesn't change anything.

I suppose I am making a obvious mistake, but I cannot catch it. Any idea ?

content of index.html:

<!DOCTYPE html>
<html ng-app="my_app">
<body>
    <section class="section_command">
        <ul>
            <li><a href="#/load">Load file</a></li>
            <li><a href="#/display">Display file</a></li>
            <li><a href="#/play">Play file</a></li>
        </ul>   
    </section>
    <section class="section_content">
        <div ng-view></div>
    </section>

<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>

content of app.js:

var app = angular.module('my_app',[]);

app.controller('LoadCtrl', function($scope, $http, $routeParams){});
app.controller('DisplayCtrl', function($scope, $http, $routeParams){});
app.controller('PlayCtrl', function($scope, $http, $routeParams){});

app.config(['$routeProvider', function($routeProvider) 
{
  $routeProvider.
      when('/load', {templateUrl: 'partials/load.html', controller: LoadCtrl}).
      when('/display', {templateUrl: 'partials/display.html', controller: DisplayCtrl}).
      when('/play', {templateUrl: 'partials/play.html', controller: PlayCtrl}).
      otherwise({redirectTo: '/'});
}]);

the partial html files are as simple as can be:

load.html : <span>Loading</span>

display.html : <span>Displaying</span>

play.html : <span>Playing</span>

score 3 · Accepted Answer · answered Sep 19 '13 at 16:08

3

I'm pretty sure you need to address your controllers by their string name:

when('/load', {templateUrl: 'partials/load.html', controller: 'LoadCtrl'}).

answered Sep 19 '13 at 16:08

Davin Tryon

66,517
15
143
132

hehe... but then I have a new error :). Obviously your syntax correction did the job. The angularjs tutorial doc needs to be corrected. Well... I'm now gonna look at this new error when it tries to load my partial html files. Thx. – Stephane Rolland Sep 19 '13 at 16:14
No probs. :) All looks correct. Make sure that your 'partials' directory is from your web root. Good luck. – Davin Tryon Sep 19 '13 at 16:18
1

My new error seems to be answered here http://stackoverflow.com/questions/3595515/xmlhttprequest-error-origin-null-is-not-allowed-by-access-control-allow-origin because I test my webapp file with file:// and not http:// – Stephane Rolland Sep 19 '13 at 16:19
1

The angularjs tutorial is working fine since it is passing the function name of the controller (the function is defined outside of `app.controller` and has a name). You however defined the controller as an anonymous function and hence have to pass the string you used to register it with `app`. The error that you got is coming from plain JavaScript, not really angular. – Miichi Sep 19 '13 at 18:30

Route provider cannot access controllers definitions

1 Answers1