Controllers not loading up JSON file Angular

Question

I have three files - app.js, controllers.js, services.js. There are a few others I want to add if I get the approach to work. I see the code going into the angular.module section of mainApp, then the services and controllers. However, no error occurs and no data is coming back and the controller methods are not called at all (only controllers are initialized from the looks of it). I tried forcing a call using init() but no luck there too. What am I doing wrong?

Here is app.js

var mainApp = angular.module('MainApp', ['test.services', 'test.controllers']);

Controllers.js

var app = angular.module('test.controllers', []); 
app.controller('TestCtrl', [$scope, 'TestService', function($scope, TestService)

    var promise = TestService.makeHttpRequest(../../src/testFile.json); 

    promise.then(function(data){            
        $scope.results = data;
        console.log($scope.results);
    });
}]);

Doesn't work. Below approach also doesn't get any data.

var app = angular.module('test.controllers', []); 
app.controller('TestCtrl', [$scope, $http, function($scope, $http){
    $http.get('../../src/testFile.json').then(function(data) {
        $scope.results = data.data;
        console.log(data);
    }); 
}]);

services.js

var appServices = angular.module('test.services', []);

//Does the same thing, but get call moved to services

Index.html

  <body class="bg-blue mainContainer" ng-app="MainApp">
        <div id="content-container" ng-contoller="TestCtrl" class="container main-container">{{results}}</div>
    <div id="content-container" ng-contoller="MainController" class="container main-container" ng-init="loadResults()">
    </body>

remove the dependencies test.services and test.controllers, that is not needed, make that [] — Ali Adravi
– Ali Adravi, Commented Sep 28, 2015 at 20:53

Franz1986 · Accepted Answer · 2015-09-28 19:37:18Z

1

Could this be your problem?

ng-contoller="MainController"

Notice the missing R in the word contRoller edit: Btw, both of your controller functions seem ok to me. Only thing i do different is name everything as a string in array, like ['$http', function($http){}]

answered Sep 28, 2015 at 19:37

Franz1986

1442 silver badges7 bronze badges

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

Comments

Rish · Accepted Answer · 2015-09-28 19:31:10Z

0

Your testFile.json needs to be available by your http server for it to form a response.

Also you are not invoking your controller from the DOM properly.

Here is a rough example for your html:

<body class="bg-blue mainContainer" ng-app="MainApp">
  <div ng-controller="TestCtrl">
  </div>
</body>

And then format your JavaScript as so:

var mainApp = angular.module('MainApp', ['test.controllers']);

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

app.controller('TestCtrl', function() {
  console.info('TestCtrl');
});

edited Sep 28, 2015 at 19:31

answered Sep 28, 2015 at 19:01

Rish

1548 bronze badges

8 Comments

Loser Coder Over a year ago

I am using node.js and opened a http-server through command prompt. Index.html is where the code exists, and all JS/CSS load fine. How can I check if the testFile.json is available by server? If I try localhost/src/json/testFile.json, I see the JSON coming in fine.

Rish Over a year ago

The easiest way is finding the absolute location of the file. Is your src directory the public directory?

Loser Coder Over a year ago

Ok I tried using physical location and the llocalhost:8080/src/ path to the file in get request. Both didn't work. The problem is the controller methods are not getting called at all. I don't get the to the actual http.get call at all.

Rish Over a year ago

Looks like your controller declaration is incorrect. I've added an example to my original answer. Hope that can help you in the right direction?

Loser Coder Over a year ago

tried. still doesn't work. the json file exists here localhost:8080/src/testFile.json, the controller appears to be called but no code within it is executing. this line: app.controller('TestCtrl',... ) is called, but nothing within it is called. Any other ideas?

|

Collectives™ on Stack Overflow

Controllers not loading up JSON file Angular

2 Answers 2

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related