AngularJS: Controller is not getting called

Question

I have following html file

<!DOCTYPE html>
{% load staticfiles %}

<html lang="en-US">

<head>
<script src="{% static 'bower_components/angular/angular.js' %}"></script>
<script src="{% static 'bower_components/angular-route/angular-route.js' %}"></script>
<script src="{% static 'js/hearthstone_guides/controllers.js' %}"></script>
<script src="{% static 'js/hearthstone_guides/app.js' %}"></script>
</head>
<body ng-app="guideApp">

<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello [[name]]</h1>

<div ng-view></div>

</body>

</html>

The [[ ]] brackets are the new Symbols for angularJS. I will declare them in my angularJS files. The two way data-binding in combination with the name variable (Hello [[name]]) was used for the testing of angular and it works. I can ensure it is included properly.

This is my app.js

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

guideApp
  .config([
    '$routeProvider',
    function($routeProvider) {
      $routeProvider
        .when('/guide/:guideId', {
          controller: 'GuideDetailController',
          templateUrl: '/static/templates/hearthstone_guides/guide-detail.html'
        })
        .otherwise({
          redirectTo: '/'
        });
    }
  ])

  .config([
    '$httpProvider', function($httpProvider) {
      $httpProvider.defaults.xsrfCookieName = 'csrftoken';
      $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
    }
  ])

  .config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
  });

and this is my controllers.js

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

guideController.controller('GuideDetailController', [
  '$scope',
  '$routeParams',
  '$http',
  function($scope, $routeParams, $http) {
    $http.get('http://10.0.3.162:8000/api/guides/' + $routeParams.guideId + '/?format=json')
      .success(function(data) {
        console.log('success');
        $scope.guide = data;
      })
      .error(function(data, status) {
        console.error(status, data);
      });
  }
]);

When I console.log('foo'); for instance between var guideController = angular.module('guideController', []); and guideController.controller('GuideDetailController', [... it works.

Unfortunately neither does console.log('success'); nor console.log(status, data); work.

Edit:

I changed the controller name now to GuideDetailController as you suggested but it still doesn't work.

This is the error marked in the firefox developer console:

"Error: [ng:areq] Argument 'GuideDetailController' is not a function, got undefined
http://errors.angularjs.org/1.3.20/ng/areq?p0=GuideDetailController&p1=not%20a                 nanunction%2C%20got%20undefined
minErr/<@http://10.0.3.162:8000/static/bower_components/angular/angular.js:63:12
assertArg@http://10.0.3.162:8000/static/bower_components/angular/angular.js:1590:1
assertArgFn@http://10.0.3.162:8000/static/bower_components/angular/angular.js:1600:1
$ControllerProvider/this.$get</<@http://10.0.3.162:8000/static/bower_components/angular/angular.js:8493:9
ngViewFillContentFactory/<.link@http://10.0.3.162:8000/static/bower_components/angular-route/angular-route.js:978:26
invokeLinkFn@http://10.0.3.162:8000/static/bower_components/angular/angular.js:8281:9
nodeLinkFn@http://10.0.3.162:8000/static/bower_components/angular/angular.js:7791:1
compositeLinkFn@http://10.0.3.162:8000/static/bower_components/angular/angular.js:7140:13
publicLinkFn@http://10.0.3.162:8000/static/bower_components/angular/angular.js:7019:30
createBoundTranscludeFn/boundTranscludeFn@http://10.0.3.162:8000/static/bower_components/angular/angular.js:7158:1
controllersBoundTransclude@http://10.0.3.162:8000/static/bower_components/angular/angular.js:7818:18
update@http://10.0.3.162:8000/static/bower_components/angular-route/angular-route.js:936:25
$RootScopeProvider/this.$get</Scope.prototype.$broadcast@http://10.0.3.162:8000/static/bower_components/angular/angular.js:14889:15
commitRoute/<@http://10.0.3.162:8000/static/bower_components/angular-route/angular-route.js:619:15
processQueue@http://10.0.3.162:8000/static/bower_components/angular/angular.js:13318:27
scheduleProcessQueue/<@http://10.0.3.162:8000/static/bower_components/angular/angular.js:13334:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://10.0.3.162:8000/static/bower_components/angular/angular.js:14570:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://10.0.3.162:8000/static/bower_components/angular/angular.js:14386:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://10.0.3.162:8000/static/bower_components/angular/angular.js:14675:13
done@http://10.0.3.162:8000/static/bower_components/angular/angular.js:9725:36
completeRequest@http://10.0.3.162:8000/static/bower_components/angular/angular.js:9915:7
requestLoaded@http://10.0.3.162:8000/static/bower_components/angular/angular.js:9856:1

This is how my guide-detail.html file looks like

<h1>[[guide.title]]</h1>
<h1>{{guide.title}}</h1>

And this is the current results I get when I call this url http://10.0.3.162:8000/#/guide/1

why did you remove the guidecontroller module from the dependency again? angular.module('guideApp', ['ngRoute', 'guideController']); — Sajeetharan
– Sajeetharan, Commented Nov 3, 2015 at 18:18
Ah damn, the first answer (deleted now) told me to do so.. Didn't revert it yet... Now it works!! Thank you — BoJack Horseman
– BoJack Horseman, Commented Nov 3, 2015 at 18:19
@Sajeetharan I already marked JBNizets answer as the best answer because his answer was correct too and he helped me a lot in the process of finding the error :) — BoJack Horseman
– BoJack Horseman, Commented Nov 3, 2015 at 18:22

Sajeetharan · Accepted Answer · 2015-11-03 17:49:18Z

You have put module name as a controller in the route config

Change From:

.config([
    '$routeProvider',
    function($routeProvider) {
      $routeProvider
        .when('/guide/:guideId', {
          controller: 'guideController',
          templateUrl: '/static/templates/hearthstone_guides/guide-detail.html'
        })
        .otherwise({
          redirectTo: '/'
        });
    }
  ])

To:

config([
        '$routeProvider',
        function($routeProvider) {
          $routeProvider
            .when('/guide/:guideId', {
              controller: 'GuideDetailController',
              templateUrl: '/static/templates/hearthstone_guides/guide-detail.html'
            })
            .otherwise({
              redirectTo: '/'
            });
        }
      ])

JB Nizet · Accepted Answer · 2015-11-03 17:49:13Z

1

First, you should not use the minified versions of the libraries while developing.

Second, your unique route is configured to use the controller 'guideController'. But you have no such controller. The only controller defined is named 'GuideDetailController'.

'guideController' is not a controller. It's a module.

answered Nov 3, 2015 at 17:49

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

4 Comments

JB Nizet Over a year ago

I'd prefer not having to guess. Replace the minified files by the non-minified ones, refresh, and post the actual error message you get. What you posted is a line of the minified code, which is completely useless. Also, what is the url in the address bar, because all the urls except /guide/xxx redirect to /, but you haven't configured any route for /.

JB Nizet Over a year ago

Your page loads the script controllers.js, but your file is named (according to your description) controller.js.

JB Nizet Over a year ago

Edit your question and repost the new code of both files.

BoJack Horseman Over a year ago

It works now @jbnizet! I removed guideController from var guideApp = angular.module('guideApp', ['ngRoute', 'guideController']); because the very first answer posted here, told me to do so and I didn't reverted it yet, since the answer got deleted. Thank you very much for your awesome help!

Collectives™ on Stack Overflow

AngularJS: Controller is not getting called

2 Answers 2

Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Related