CODEWITHSUNDEEP
angularrxjsangular2-services
crooksey
crooksey

Reputation: 8809

Angular2 Global Data Model?

There are several questions and discussions about Angular2 using global variables and global states, but my particular needs slightly more than this and I am struggling for the best way to approach it (mainly due to conflicting information, published at different times during the angular2 release cycle).

So here it goes, I am in essence creating a SPA (Single page application) to work as an order input screen for a sales office.

I have a structure a bit like this:

 |_main_order_entry controller.ts
     |__order_line_controller.ts
        |_product_controller.ts
        |_colour_controller.ts
        |_size_cotroller.ts
        |_promotion_controller.ts
        |_comments_controller.ts

So when you load the main_order_entry_controller.ts, you it pre_populates some basic data, next order number in sequence, and order date/time, easy stuff.

Then we start with an order_line_controller, where things get a bit tricky, lets say

  1. product_controller, is a dropdown box, you select a product It then populates the colour controller view with available colours for the chosen product

  2. Once you choose a colour it populates the size controller with the sizes available in the colour and product selection, if you change either of these options, the other drop down boxes update with the new data returned by the REST API.

  3. Once you have completed one order_line_controller instance, it automatically inserts a whole new instance of the order_line_controller, as the number of potential orderlines is limitless.

Now at any time if any of the dropdown boxes are changed, the REST api will be re-called and the valid options will be updated.

For this to work, I need a clean way to store all the data whilst the user loads the main_order_entry_controller.ts

Now my thinking is the best way to do this would be create two models

main_order_model.ts
order_line_model.ts

Then create a service, each time the main_order_entry_controller.ts is loaded, it creates a new instance of main_order_model.ts, and then for each order_line_controller that is loaded, it creates a new instance of order_line_model.ts

Giving me a service with a data structure a bit like this:

{
  "orderdate": "01/01/2017",
  "orderef": "JHASGAZXC",
  "orderlines": [
    {
      "linenumber": "1",
      "product": "T-SHIRT",
      "colour": "BROWN",
      "size": "Large",
      "promotion": "True",
      "comments": "Customer has requested gift wrapping"
    },
    {
      "linenumber": "2",
      "product": "JEANS",
      "colour": "BLUE",
      "size": "X-SMALL",
      "promotion": "False",
      "comments": "None"
    }
  ]
}

Then each time a controller value is changed, it updates the data model in the global service, then each controller in theory could pull any data it needed from the service.

Im fairly new to Angular2 so I am looking for correct Angular2 way to do this, I have been asking around on the official gitter channel this week and not had much luck, thanks very much.

Upvotes: 1

Views: 791

Answers (1)

Victor Godoy
Victor Godoy

Reputation: 1692

To manage the global state you can use ngrx/store along with ngrx/effects. Those two implements the Redux pattern, that's a great way to manage the state of the app, so you can have a single source of truth to store your data and share it across all the life time of your app.

First try to learn the redux pattern. Then to learn ngrx go to https://github.com/ngrx/store . If you need to ask something you can go to https://gitter.im/ngrx/store

Upvotes: 1

Related Questions