Read local file in AngularJS

Question

I used to work with RequireJS and Backbone and used requirejs/text and requirejs-plugins to load local json files I normally use for configuration.

How does one achieve the same with AngularJS?

Everyone seems to suggest to use $http, but is this the only way? Do I really need to make 20 calls if I have 20 configuration files?

Maybe something like ng-constant is the "preferred" way?

Answer 1

This is what I did. But it uses $http though so I'm hoping someone has a better solution.

app.js:

var myModule = angular.module('myApp', []);

myModule.config(function($routeProvider, $locationProvider) {
    $routeProvider.when('/', {
        templateUrl: 'html/home.html',
        controller: 'MainCtrl as ctrl',
        resolve: {
            initializeData: function($q, $timeout, myService) {
                return myService.promiseToHaveData();
            }
        }
    });
});

myService.js:

var myModule = angular.module('myApp');

myModule.service('myService', function($http, $q) {
    var _this = this;

    this.promiseToHaveData = function() {
        var defer = $q.defer();

        $http.get('someFile.json')
            .success(function(data) {
                angular.extend(_this, data);
                defer.resolve();
            })
            .error(function() {
                defer.reject('could not find someFile.json');
            });

        return defer.promise;
    }
});

Then I can inject myService anywhere and it will have all the fields from the json file.

I guess alternatively you could just make your .json files .js files, have them expose a global variable, and reference them in your index.html

Answer 2

Can you use jQuery's getJSON function?

E.g something like:

$.getJSON("config-1.json", function( data ) {
    // do whatever you want
});

Answer 3

Here's an AngularJs service that uses the FileReader API:

http://odetocode.com/blogs/scott/archive/2013/07/03/building-a-filereader-service-for-angularjs-the-service.aspx