AngularJS: Controller is not getting called

Question 1

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

enter image description here

Question 2

why did you remove the guidecontroller module from the dependency again? angular.module('guideApp', ['ngRoute', 'guideController']);

Question 3

Ah damn, the first answer (deleted now) told me to do so.. Didn't revert it yet... Now it works!! Thank you

Question 4

@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 :)

Question 5

yes true ! :) no problem

Question 6

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: '/'
 });
 }
 ])

Question 7

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.

Question 8

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 /.

Question 9

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

Question 10

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

Question 11

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!

Sajeetharan 223k65 gold badges370 silver badges410 bronze badges · 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: '/'
 });
 }
 ])

CollectivesTM on Stack Overflow

AngularJS: Controller is not getting called

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

CollectivesTM on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related