Угловая + ui-router архитектура параллельных состояний

Question

Я разрабатываю «пользовательский портал», и я зациклился на том, как правильно проектировать наше приложение. Портал имеет вид как на картинку ниже, где:

1. Тележки выпадающих где пользователь может выбрать «текущую» корзину (может быть пустыми)
   • а. Кнопка, перенаправляющая на страницу текущих данных корзины.
2. Приложение меню. Где мы можем перемещаться по f.e по каталогам
3. Основная область применения.

У меня есть следующий рабочий процесс:

• Пользователь переходит к меню каталогов.

  адрес: домен/каталоги; состояние: каталоги

• Пользователь выбрать каталог и посмотреть товары в каталоге

  URL: домен /каталоги/catalog1ID; состояние: catalogs.detail.

• Пользователь может нажать на плитке продукта и перейти к продукту детального

  URL: домен /каталоги/catalog1ID/product1ID; состояние: catalogs.detail.product

Выглядит естественно и ничего особенного на данный момент. Теперь основная проблема заключается в том, как интегрировать в этот рабочий процесс функциональность «корзины покупок». Я имею в виду, что если пользователь выбирает корзину для покупок, данные по представлениям могут отличаться (потому что корзина для покупок связана с разными клиентами, и мы можем показывать разные каталоги/цену/продукты для разных клиентов). F.e. Цена Продукта 1 из Каталога 1 может отличаться для корзины покупок 1 и корзины покупок 2, а корзина для покупок не выбрана. Я пытаюсь найти ответы на следующие вопросы:

• Где сохранить выбранную корзину покупок (состояние/url)?
• Как сообщить текущему состоянию, что изменилась корзина?
• Как сделать F5/refresh правильно работать (f.e если мое текущее состояние catalogs.detail.product и у меня есть корзина для покупок)?

Answer 1

Похоже, что на многие вопросы нужно ответить, я попытаюсь дать некоторые рекомендации, чтобы указать вам в правильном направлении, но, конечно, это нужно будет адаптировать к вашему приложению.

1. Всегда держите прицел в перспективе. Например, скажем, ваша область верхнего уровня (rootScope) хранит данные корзины покупок. Любое другое состояние в вашем приложении будет иметь доступ к этим свойствам rootScope. Поэтому, если вам нужны данные, которые сохраняются в разных состояниях, хранение в чем-то вроде rootScope даст доступ к дочерним состояниям. Теперь учтите, что, вероятно, не стоит хранить все ваши данные в приложении rootScope, для хранения данных в отдельных контроллерах было бы более разумным, и предоставить пользовательским директивам доступ к этим контроллерам. Это будет держать вещи намного более модульными и не загрязнять глобальный rootScope

2. Это можно легко сделать, создав функцию в директиве, которая изменяет область, в которой хранятся данные корзины покупок.

Директива Пример:

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) 
     } 
    } 

    } 
}) 

Пример Контроллер:

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

главную страницу HTML:

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

Директива HTML:

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

Очевидно, что вы хотите, чтобы ваша директива html была намного умнее этого, но я просто хотел, чтобы шаблон передавал данные контроллеру из директивы.

3. Если вы обновите свою страницу в своем приложении, вы потеряете любые данные, которые не инициализируются в контроллере при загрузке. Например, если вы добавляете элементы в контроллер корзины покупок на одной странице, а затем обновляете свой браузер, данные, добавленные в этот контроллер, будут потеряны. Вот пара подходов к решению этой проблемы.

   • Сохранение данных на sessionStorage или localStorage. Эти данные не будут потеряны во время обновления и будут использоваться для инициализации данных в контроллере.
   • Сохраните данные в таблице пользователя в бэкэнд вашего приложения, а затем извлеките эти данные, когда это необходимо.

Позвольте мне знать, если что-то неясно, но, надеюсь, это указывает вам в правильном направлении.