CODEWITHSUNDEEP
angularjs
BoJack Horseman
BoJack Horseman

Reputation: 4450

AngularJS: Controller is not getting called

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

Upvotes: 0

Views: 942

Answers (2)

Sajeetharan
Sajeetharan

Reputation: 222722

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

Upvotes: 3

JB Nizet
JB Nizet

Reputation: 692131

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.

Upvotes: 1

Related Questions