Angular JS Controller Function not being stepped into

Question

I am attempting to simply throw some JSON data onto a page from a GET call.

This is my HTML (Please be aware this is loaded into index.html which has the correct angular notation):

<h1>Downloads</h1>
<div class="container" ng-controller="DownloadCtrl as download">
  <p>{{download.routes}}</p>
</div>

This is the download controller:

(function(){
  'use strict';

  angular.module('dashboardApp').controller('DownloadCtrl', DownloadCtrl);
  DownloadCtrl.$inject= ['DownloadService'];

  function DownloadCtrl(DownloadService){
    var self = this;
    self.routes = function(){
      DownloadService.getRoutes()
        .then(function(responseData) {
          self.routes = responseData;           
      });
    };
  };
})();

This is the download service:

(function(){
  'use strict';

  angular.module('dashboardApp')
    .factory('DownloadService', DownloadService);

  DownloadService.$inject = ['$http', '$sessionStorage'];

  var baseURL = 'http://localhost:8080/Dashboard/rest/download/';

  function DownloadService ($http, $sessionStorage){
    var service = {};
    service.getRoutes = getRoutes;
    return service;

    function getRoutes(){
      return $http.get(baseURL+"route",$sessionStorage.sessionData.sessionID);
    }
  }
})();

I have debugged the application and it does hit self.routes however it just skips over it and no data is displayed.

I also am not receiving any errors in the console. It just skips over the function.

This is my first AngularJS application.

Hitmands · Accepted Answer · 2015-12-11 15:42:20Z

1

Your code is bad organized, the error resides in the view, because it is not calling the method self.routes, it is just printing out...

your view must do something like that:

<p>{{download.routes()}}</p>

But, this is a bad way to code... Please, consider doing something like that:

DownloadService
  .getRoutes()
  .then(function(responseData){
    self.routes = responseData;         
  })
;

// instead of

self.routes = function(){

  DownloadService.getRoutes()
  .then(function(responseData){
    self.routes = responseData;         
  });

};

answered Dec 11, 2015 at 15:42

Hitmands

14.2k4 gold badges41 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Softey Over a year ago

Yes I have just noticed that I am assigning it twice and that is very stupid.

Softey Over a year ago

1 Vote up for pointing out my mistakes but even assigning the DownloadService to a getRoutes call doesn't fix the problem. I think there is more to the issue.

nbering Over a year ago

This answer resolves the question, but community member to community member: the tone is not constructive. I would generally avoid statements like "This is a bad way to code..." in answers. Show the alternatives and let the facts stand for themselves. Maybe link a style guide for further reading.

Hitmands Over a year ago

Yeah, you are together right, i'm afraid but I wouldn't to be offensive, it depends on my english that isn't good... Sincerely, I'm sorry about that tone...

Softey Over a year ago

It has fixed the problem. I implemented your answer wrong. I am not offended. Thank you very much.

Collectives™ on Stack Overflow

Angular JS Controller Function not being stepped into

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related