1

so, I've recently started in AngularJS and I'm building a HTML game with it. For someone who has just worked with Jquery and less complex libraries/frameworks until now, I must admit it has been a huge headache.

My main problem (which makes me stop and have to find a hack around in every feature I want to develop) is that I have two main data structures that get served to the client: the playerData and the gameData.

The playerData contains all data belonging to the current user and gets pulled from the database in JSON format. It is constantly being updated and synced between server and client:

{
  "userId":1,
  "items": [
    {
      "itemId": 1,
      "quantity": 5
    },
    {
      "itemId": 2,
      "quantity": 10
    },
    {
      "itemId": 3,
      "quantity": 15
    },
  ]
}

The gameData contains all information about the game itself. It gets loaded from a static JSON file when the server loads up and served to the client:

{
  "items":[
    {
      "itemId": 1,
      "type": "weapon",
      "attack": 5,
    },
    {
      "itemId": 2,
      "type": "spear",
      "attack": 10
    },
    {
      "itemId": 1,
      "type": "bow",
      "attack": 4
    }
  
  ]
}

Of course, this is an over-simplification, but anyway... In the client-side, I load up angular, call for both data structures via ajax and begin rendering. I have to run the playerData to render items and for each item I have to look for its ID in gameData to retrieve its information. It seems simple enough, but inside my directives and filters, I have to constantly call the parent scope or pass the gameData as a parameter (since in filters, for instance, I don't have access to the controller's scope) and things started to become a bit messed and hacked up. This is making me lose A LOT of time on workarounds instead of focusing in the development.

It seems to me that angular was not made to be used that way, like I should use just one data structure. But I can see other problems ahead with this approach, like making manipulation of inventory a lot harder, having a lot of duplicated data and wasted processing, and it seems wrong enough architectural-wise for me not to try it.

So, finally, my question is: is there a better approach for this? Or should I just dump angular and start again in a more suitable framework?

arvere
  • 727
  • 1
  • 7
  • 21
  • You could use an object instead of an array, with each item id as a key. – dev8080 Aug 04 '17 at 14:02
  • 2
    I think you should take a look at [AngularJS Services](https://docs.angularjs.org/guide/services), it allows you to have a unique entry point to your data and/or function, and to access it from anywhere in your app – JeanJacques Aug 04 '17 at 14:12
  • And maybe take a look a [this answer](https://stackoverflow.com/a/20286918/6712896) it explains well how to construct an AngularJS app – JeanJacques Aug 04 '17 at 14:17
  • @JeanJacques your comment really helped me... I knew services existed, but I really didn't realize I could use them as a data helper. All I did is create a service with a get() method that gets injected in every directive that needs to use its data! thank you! – arvere Aug 07 '17 at 09:22

0 Answers0