embed json data file into angular build

Question

I'm trying to build an angular module that uses a json file as a data source.

I am able to build using gulp a set of app.js / app.css files that can then be used by bower to create an installable module, I am stuck on how to include / reference this json file

so, I have a module defined as this (pseudo code)

(function() {
  'use strict';

  angular
    .module('myFoo', ['ngResource']);
    .service('myService',myService);

    /** @ngInject */
    function myService($resource) {
        return $resource('somefile.json');
    }
})();

I can now build this module, make it available via bower, then "bower install" this module, into my app, inject it and use it - unfortunately, I get a

https://myServer/somefile.json 404 (Not Found)

how do I embed / include this json file into a build that can be referenced this way ?

If I modify the service to return data directly, then it works as expected.

I was going to go down the route of gulp-injecting the contents into the service file directly if there is no better option.

Would appreciate any insights. Thanks!

Estus Flask · Accepted Answer · 2015-10-22 20:23:50Z

1

angular.module('prerequisites', ['constants']).run(function ($http, $cacheFactory, somefileConstant) {
  $cacheFactory.get('$http').put('somefile.json', somefileConstant);
});

constants module and somefileConstant in particular can be built with gulp-ng-constant or gulp-ng-config. And prerequisites module can be replaced/redefined with empty module in the case when real json has to be requested.

angular
.module('myFoo', ['ngResource']);
.service('myService',myService);

/** @ngInject */
function myService($resource) {
    return $resource('somefile.json', null, { get: { cache: true } });
}

I guess that get action is meant for that, but can be replaced with any other action for this resource.

answered Oct 22, 2015 at 20:23

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

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

Collectives™ on Stack Overflow

embed json data file into angular build

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related