Decoupling data from service code in the Pets app

Hi there,

new user here, trying to learn Ionic from scratch together with Angular.

I’m trying to modify and expand the Pet app from diegonetto’s generator-ionic. I started adding more data to the pets array, including sub-arrays for individual cats and so on, but the services.js file is starting to get kinda untidy.

I’d like to learn about decoupling the data from the service code. services.js, lines 8 and on, reads:

    .factory('PetService', function() {
  // Might use a resource here that returns a JSON array

  // Some fake testing data
  var pets = [...

I’d like to move the pets var inside its own file, so I can go and update the data without worrying about the rest of the code. I’ve skimmed the docs about angular-resource, but I’d like to have a totally self-contained app, i.e. no external data connections required once the app has been downloaded and installed on the device, so I’m not sure this would be the right solution.

I guess moving the variable inside another .js file and linking that file from index.html could work, but it seems messy to me (global namespace?)

Would love getting some insight on the matter, thanks in advance.


put your data in a JSON-File and load the file content via $http.get(FILEPATH) Request.

Greetz, bengtler