Угловой JS и UI-Router упрощают состояние

Question

Я довольно новичок в Angular (только использовал его пару месяцев), и хотя я так многому научился, так как прочитал свою первую книгу, есть несколько концепций или лучших практик, которые ускользают меня. Это может быть один из них. У меня есть проект в тот момент, который имеет множество состояний, в основном это имеет

• коллекция - которые он перечисляет, в данном случае я сделал самостоятельное государство, но это требует параметра centerId (потому что коллекции принадлежат центру).
  • Создать коллекцию. Поскольку для этого требуется тот же centerId, это «может» быть дочерним состоянием коллекций, но я обнаружил, что при создании коллекции я должен обновлять коллекции родителя. Поэтому я не сделал это дочерним элементом состояния коллекций, вместо этого у него есть собственный параметр centerId, который я передаю.
  • Редактировать коллекцию. Снова это то же самое, что создать коллекцию, это состояние использует тот же контроллер и, действительно, тот же шаблон, что и для создания коллекции.
  • Deliver - Delivery collection - это состояние, которое позволяет пользователю обновлять коллекцию с помощью набора конкретной информации (POD, подпись и т. Д.), Поэтому у этого есть свое собственное состояние и шаблон
  • Collect-Collect - это то же самое, что и доставить кроме POD, у него есть POC (Proof of collection), поэтому он использует тот же контроллер и шаблон, что и доставка
  • Импорт. Импорт. Импорт используется для импорта списка коллекций через csv.

Теперь все эти состояния имеют одну общую черту, все они требуют centerId. Как я уже сказал ранее, я мог бы сделать их все дети состояния коллекций, но при обновлении списка коллекций в родительском состоянии возникает сложность. Он сгруппирован, поэтому разрешенная коллекция фактически проходит через некоторый код перед представлением в представление.

Вот мое текущее состояние расположение:

// Now set up the states 
$stateProvider.state('collections', { 
    url: '/collections/:centerId', 
    templateUrl: '/assets/tpl/collections/index.html', 
    controller: 'CollectionsController', 
    controllerAs: 'controller', 
    resolve: { 

     // Resolve our collections before the state loads 
     collections: ['$stateParams', 'CollectionsService', function ($stateParams, service) { 

      // Get our center id 
      var centerId = $stateParams.centerId; 

      // Return our collections 
      return service.get(centerId); 
     }] 
    }, 
    data: { 
     requireLogin: true, 
     pageTitle: 'Collections' 
    } 
}).state('savingCollections', { 
    url: '', 
    abstract: true, 
    resolve: { 

     // Resolve our statuses 
     statuses: ['Api', function (api) { 

      // Return our statuses 
      return api.get('/api/statuses'); 
     }] 
    } 
}).state('savingCollections.import', { 
    url: '/collections/:centerId/import', 
    views: { 
     '@': { 
      templateUrl: '/assets/tpl/collections/import.html', 
      controller: 'ImportCollectionsController', 
      controllerAs: 'controller', 
     } 
    }, 
    data: { 
     requireLogin: true, 
     pageTitle: 'Import your collections' 
    } 
}).state('savingCollections.create', { 
    url: '/collections/:centerId/create', 
    views: { 
     '@': { 
      templateUrl: '/assets/tpl/collections/save.html', 
      controller: 'SaveCollectionController', 
      controllerAs: 'controller' 
     } 
    }, 
    resolve: { 

     // Creates a blank collection so that the injection works 
     collection: function() { 

      // Return an empty object 
      return {}; 
     } 
    }, 
    data: { 
     requireLogin: true, 
     pageTitle: 'Create your collection' 
    } 
}).state('savingCollections.edit', { 
    url: '/collections/:centerId/edit/:id', 
    views: { 
     '@': { 
      templateUrl: '/assets/tpl/collections/save.html', 
      controller: 'SaveCollectionController', 
      controllerAs: 'controller' 
     } 
    }, 
    resolve: { 

     // Gets a collection from the API 
     collection: ['$stateParams', '$q', 'CollectionsService', function ($stateParams, $q, service) { 

      // Get our ids 
      var id = $stateParams.id, 
       centerId = $stateParams.centerId; 

      // return our collection 
      return service.get(centerId, id); 
     }] 
    }, 
    data: { 
     requireLogin: true, 
     pageTitle: 'Update your collection' 
    } 
}).state('savingCollections.receiveCollections', { 
    url: '', 
    abstract: true, 
    params: { 
     selected: null 
    }, 
    resolve: { 
     selected: ['$stateParams', function ($stateParams) { 

      // Get our selected items 
      var selected = $stateParams.selected; 

      // If we have something in our parameters 
      if (selected) { 

       // Save them into our session 
       sessionStorage.selected = angular.toJson(selected); 
      } 

      // Return our selected items 
      return angular.fromJson(sessionStorage.selected); 
     }] 
    }, 
}).state('savingCollections.receiveCollections.collect', { 
    url: '/collections/:centerId/collect', 
    views: { 
     '@': { 
      templateUrl: '/assets/tpl/collections/receive.html', 
      controller: 'CollectCollectionsController', 
      controllerAs: 'controller' 
     } 
    }, 
    params: { 
     collecting: true 
    }, 
    data: { 
     requireLogin: true, 
     pageTitle: 'Collect' 
    } 
}).state('savingCollections.receiveCollections.deliver', { 
    url: '/collections/:centerId/deliver', 
    controller: 'CollectCollectionsController', 
    controllerAs: 'controller', 
    views: { 
     '@': { 
      templateUrl: '/assets/tpl/collections/receive.html', 
      controller: 'CollectCollectionsController', 
      controllerAs: 'controller' 
     } 
    }, 
    data: { 
     requireLogin: true, 
     pageTitle: 'Deliver' 
    } 
}); 

Я надеюсь, что это достаточно информации. Если вы не знаете, что я пытаюсь сделать, в основном я хочу, чтобы мои состояния легко читались и понимали. Мне бы хотелось, чтобы, если кто-то посмотрит на государства, они точно поймут, что происходит. Кроме того, я хотел бы воздержаться от некрасивых Ui-srefs, такие как это:

ui-sref="savingCollections.receiveCollections.deliver({ centerId: controller.centerId, selected: [collection]})" 

любая помощь будет принята с благодарностью.

Answer 1

Ваши государственные декларации неплохие. Я нахожу их достаточно читаемыми. Один из советов, которые я должен сделать более читаемыми, состоит в том, чтобы переместить функции разрешения из объявлений состояний в другое место и просто ссылаться на них по имени. Вы можете поместить их ниже своего кода состояния, или вы можете поместить их в другую службу полностью.

Я поставил мину в другую службу, например, так:

var resolveFunctions = { 
    resolveData: function($q, $stateParams, dataService) { 
     //getData returns a promise 
     return dataService.getData($stateParams.id); 
    }  
} 

angular.module("myModule").constant("resolveFunctions", resolveFunctions); 

Эта функция решительность извлекает некоторые данные, основанные на ID в параметрах состояния.

Тогда я могу воспользоваться услугой resolveFunctions в том месте, я объявляю мои состояния:

//Inject resolveFunctions service as a dependency wherever you are defining your states 

resolve: { 
    data: resolveFunctions.resolveData 
} 

Я надеюсь, что имеет смысл.

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

Вы можете использовать $ state.go() в своем контроллере для переключения между состояниями с параметрами состояния (вы можете добавить обработчик ng-click с вызовом $ state.go).

Следующий код переходит в состояние «saveCollections» и передает идентификатор центра в качестве параметра состояния. Ваш может либо извлечь centerId в контроллере или в одной из функций решимостью, используя $ stateParams.centerId

$state.go("savingCollections", { centerId: centerId }); 

Я не сделал этого лично, но я думаю, вы также можете сделать это в Ui-sref, а также ,

ui-sref="savingCollections({ centerId: controller.centerId })" 

Если что-Ui sref работ, что было бы проще, чем вызов $ state.go()