Angular + ui-router parallel states architecture

Question

I'm designing a 'custom portal' and i'm stuck on how to design our application in the right way. The portal has a view as on picture below where:

Shopping carts dropdown where user can select 'current' shopping cart(can be empty)
- a. Button that redirect to 'current' shopping cart details page.
Application menu. Where we can navigate f.e to Catalogs
The main application area.

I have the following workflow:

User goes to catalogs menu.

url: domain/catalogs; state: catalogs
User select a catalog and see products in the catalog

url: domain/catalogs/catalog1ID; state:catalogs.detail.
User can click on product tile and go to product detail view

url: domain/catalogs/catalog1ID/product1ID;state:catalogs.detail.product

Looks natural and nothing special for now. Now the main problem how to integrate to this workflow a 'shopping cart' functionality. I mean that if user select a shopping cart the data on views might be different(Because shopping cart related to different customers and we can show different catalogs/price/products for different customers). F.e The price for Product1 from Catalog1 might be different for shopping cart 1 and shopping cart 2 and shopping cart not selected. I'm trying to find answers for next questions:

Where to keep selected shopping cart(state/url)?
How to inform current state that shopping cart changed?
How to make F5/refresh works correctly(f.e if my current state is catalogs.detail.product and i have a shopping cart selected)?

user2263572 user2263572 · Accepted Answer · 2016-03-30T14:58:18

Sounds like a lot of questions need to be answered, I'll try to provide some guidance to point you in the right direction, but of course this will need to be tailored to your application.

Always keep scope in perspective. For example, lets say your top level scope (rootScope) stores shopping cart data. Any other state within your app will have access to those rootScope properties. So if you need data that persists across multiple states, storing in something like a rootScope would give child states access. Now please note, it's probably not a good idea to be storing all your data in the app rootScope, it would make much more sense to store data in individual controllers, and give custom directives access to those controllers. This will keep things much more modular and won't pollute the global rootScope
This can easily be done by creating a function within a directive that modifies the scope that holds the shopping cart data.

Sample Directive:

app.directive('pagedirective',function(){
  //directive definition object
  return{ 
    restrict:'E'
    templateUrl:'path to html template'
    link:function(scope){

      scope.update_Shopping_Cart_In_Controller = function(item){
        scope.shopping_Cart_Array.push(item)
      }
    }  

  }
})

Sample Controller:

app.controller('shoppingCartCtrl',function($scope){
  //this will get updated from the directive
  $scope.shopping_Cart_Arr = [];
})

main page html:

<div ng-controller="shoppingCartCtrl">
  <p ng-repeat="items in shopping_Cart_Arr">{{items}}</p>
  <pagedirective></pagedirective?
</div>

Directive html:

<div>
  <button ng-click="update_Shopping_Cart_In_Controller('new toy')">add item</button>
</div>

Obviously you will want your directive html to be much smarter than this, but I just wanted to the pattern across of passing data to the controller from a directive.

If you refresh your a page in your app, you will lose any data that is not initialized within a controller on load. For example, if you add items to your shopping cart controller on one page, and then refresh your browser, data added to that controller will be lost. Here are a couple approaches to solving that issue.
- Saving the data to sessionStorage or localStorage. This data will not be lost during refresh and keep me used to initialize data within a controller.
- Save data to a user table within the backend of your app, and then retrieve that data when needed.

Let me know if anything is unclear, but hopefully this points you in the right direction.

Angular + ui-router parallel states architecture

1 Answers