Подмодули URL-адреса Angularjs UI и URL-адреса

Question

У меня есть приложение, в котором модуль просматривает URL-адрес. Если URL-адрес имеет что-либо из раздела «Документ», тогда одно состояние устанавливается с использованием информации, выходящей за этот URL. Если URL-адрес не имеет ничего выше этой точки, устанавливается другое состояние. Таким образом, эти два URL-адреса являются ...

www.xyz.com/Document/

и

www.xyz.com/Document/someData

я в настоящее время решения проблемы, как показано ниже , Это работает, но мне действительно нужно, чтобы два состояния были в одном модуле, и я не могу понять, как это сделать.

Итак, вместо второго состояния, применяемого к app.documentEmpty, я хочу, чтобы оно применимо к app.document.empty.

angular 
    .module('app.document', [ 
     'app.document.worksheet', 
     'app.document.tableOfContents', 
     'app.document.properties', 
     'app.document.bibliography', 
     'app.document.inputs', 
     'app.document.datasets', 
     'app.document.fileAsFunction', 
     'app.document.importedFunctions', 
     'app.document.directory' 
     ]) 
    .config(config); 


/** @ngInject */ 
function config($stateProvider, $translatePartialLoaderProvider, msApiProvider, msNavigationServiceProvider) 
{ 
$stateProvider.state('app.document', { 
     url  : '/Document/{path:.*}/', 
     views : { 
      'content@app': { 
       templateUrl: 'app/main/apps/document/worksheet/worksheet.html', 
       controller : 'DocumentController as vm' 
      } 
     }, 
     resolve : { 
      Documents: function (msApi) 
      { 
       return msApi.resolve('document.documents@get'); 
      }, 
      emptyDocuments: function (msApi) 
      { 
       return msApi.resolve('document.emptyList@get'); 
      } 
     }, 
     bodyClass: 'worksheet' 

    }).state('app.documentEmpty', { 
     url  : '/Document/', 
     views : { 
      'content@app': { 
       templateUrl: 'app/main/apps/document/documentEmpty.html', 
       controller : 'DocumentController as vm' 
      } 
     }, 
     resolve : { 
      Documents: function (msApi) 
      { 
       return msApi.resolve('document.documents@get'); 
      }, 
      emptyDocuments: function (msApi) 
      { 
       return msApi.resolve('document.emptyList@get'); 
      } 
     }, 
     bodyClass: 'document' 
    }); 

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

$stateProvider.state('app.document.directory', { 
    url  : '/Document/', 
    views : { 
     'content@app': { 
      templateUrl: 'app/main/apps/document/directory/directory.html', 
      controller : 'DocumentController as vm' 
     } 
    }, 
    bodyClass: 'directory' 

}); 

Невозможно ли перенаправить к подмодулям по URL-адресам?

Answer 1

Вы путаете с state и module.

Точечная нотация в ui-router указывает child. Поэтому, когда вы это делаете: $stateProvider.state('app.document.directory',{}), виды будут заполнены только IFapp.document существует, и в нем есть директива ui-view. К этому добавляются параметры URL, установленные в объекте состояния. ПОСЛЕ URL-адрес, определенный в app.document состоянии.

Say для примера выше, вы определили состояние, как это:

$stateProvider.state('app.document', { 
     url  : '/Document/{path:.*}/', 
     //... omitted for brevity 

Теперь это будет работать:

.state('app.documentEmpty', { 
     url  : '/Document/', 
     //... omitted for brevity 

потому app.document и app.documentEmpty являются родственный состояния.

С другой стороны, это будет не работы:

$stateProvider.state('app.document.directory', { 
    url  : '/Document/', 
    //... omitted for brevity 

потому что app.document.directory является ребенок состояние app.document (дочерние состояния определяются точечной нотации, т.е. .directory)

Поэтому, чтобы работать, вам нужно переосмыслить свою иерархию состояний. В вашем app.document.directory модуля, определить состояние app.documentDirectory (обратите внимание, что не существует точки после документа):

angular.module("app.document.directory",[]) 
    .config('$stateProvider',function($stateProvider){ 
     $stateProvider.state('app.documentDirectory',{ //not app.document.directory, because this will make it a child state of app.document 
     url:'/directory' 
     //omitted for brevity 
     }) 
    });