loading file in AngularJS

Question

I'm new to angularJS and I'm trying to load a xml file. The problem seems to be the file path. I am loading it inside a controller about.controller.js. Looks like this. (I am using Jade)

'use strict';

angular
  .module('app')
  .controller('AboutController', AboutController);

AboutController.$inject = ['$scope'];

function AboutController ($scope, $http)
{
  $scope.text = 'This could be a dynamic text - About Text';
  $http.get('/data/dataStructure.xml')
       .then(function(res){
          $scope.todos = res.data;          
        });
}

This is what my file structure looks like. How do I navigate now from one to the dataStructure.xml-file inside the data folder?

EDIT: I have actually tested and the $http-variable is undefined (when logging to console). So there may be the issue. How do I need to setup the controller to include http as an input?

suMi · Accepted Answer · 2016-06-08 08:42:45Z

1

The path is wrong you have to add ../ on the beginning, but this is not the main problem You can use service:

'use strict';

angular.module('somename')
.factory('servicename',['$timeout','$http', function servicename($timeout, $http) {
    var readFile = {
        fetch: function() {
            return $timeout(function() {
                return $http.get('somepath').then(function(response) {
                    return response.data;
                });
            }, 30);
        }
    }

    return readFile;
}]);

and in controller:

.controller('MainCtrl',['$scope','servicename',function MainCtrl($scope,servicename) {
servicename.fetch().then(function(data) {
    $scope.variable=data;

});
});

edited Jun 8, 2016 at 8:42

suMi

1,5563 gold badges17 silver badges35 bronze badges

answered Jun 8, 2016 at 7:42

LachezarB

515 bronze badges

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

3 Comments

suMi Over a year ago

as I said I am new to Angular. So how would I put even the controller code into my example? I am using this syntax .controller('AppController', AppController). This does't seem to work together with your example....

LachezarB Over a year ago

First you may be have to read this: docs.angularjs.org/guide/services and this: docs.angularjs.org/guide/controller

suMi Over a year ago

I have read this. As a beginner it does not help me to figure the second part out... using the syntax similar to the one in my example.

Martin · Accepted Answer · 2016-06-08 12:04:40Z

0

Actually your path is most likely correct. Can you access the dataStructure.xml by doing a http://localhost:3000/data/dataStructure.xml? You will need to change 3000 to your development port number.

If not, then there may be other issues. Are you serving from a virtual-directory(IIS) or directory-alias(apache)?

What is the development URL you use to view the first page of your app?

UPDATE

Add ng-strict-di to your master template (index.html) to find missing DI annotations quicker:

<html ng-app="app" ng-strict-di>

This would give you an error straight away that you were missing the $http DI annotation, which should be:

AboutController.$inject = ['$scope', '$http'];

edited Jun 8, 2016 at 12:04

answered Jun 8, 2016 at 9:30

Martin

16.4k4 gold badges51 silver badges58 bronze badges

4 Comments

suMi Over a year ago

the link you posted does not work. but this may be because I specify the urls that are accessible inside the config for the app? 3000 is my development port number. I am using a local server using gulp on my local OSX nowadays. so I assume its apache. the first page goes by: localhost:3000/ and then uses the mainView template

suMi Over a year ago

I have actually tested and the $http-variable is undefined (when logging to console). So there may be the issue. How do I need to setup the controller to include http as an input?

Martin Over a year ago

You need to include $http in your DI annotation: AboutController.$inject = ['$scope', '$http']; -- verify that the issue isn't the XML file type by temporarily changing its suffix to .html and requesting it as localhost:3000/data/dataStructure.html

Martin Over a year ago

Great glad I could help. Always use the $inject annotation array for every dependency. If you add ng-strict-di to your index.html template, where you have your ng-app defined -- you will catch these bugs much quicker. Ill update my answer with that.

Collectives™ on Stack Overflow

loading file in AngularJS

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related