изменить угловое положение в соответствии с параметром URL

Question

Привет в моем приложении у меня есть два состояния называется hello и createHello

модули, связанные с thees два состояния приведены ниже.

createHello Модуль

(function(module){ 
    'use strict'; 

    module.config(['$stateProvider', 
     function($stateProvider) { 
      $stateProvider.state('createHello', { 
       url: '/hello/create', 
       templateUrl: 'app/createHello/createHello.html', 
       controller: 'createHello' 
      }); 
     } 
    ]); 

})(angular.module('createHello', ['header', 'ui.router', 'timeliner','common'])); 

привет Модуль

(function (module) { 
    'use strict'; 

    module.config(['$stateProvider', 
     function ($stateProvider) { 
      $stateProvider.state('hello', { 
       url: '/hello/{id}', 
       templateUrl: 'app/hello/hello.html', 
       controller: 'hello', 
       resolve: { 
        ..... 
       } 
      }); 
     } 
    ]); 

})(angular.module('hello', ['header', 'ui.router', 'helloTimer', 'logger', 'timeliner', 'common'])); 

Любой URL шаблон /hello/xxxx будет идти в hello состоянии. Я хочу, чтобы этот конкретный URL (/hello/create) перешел в состояние createHello. На данный момент он также перейдет в состояние hello. Любые советы по решению этой проблемы?

Answer 1

В этом случае вы должны использовать вложенные состояния.

module.config(['$stateProvider', 
    function($stateProvider) { 
     $stateProvider 
     .state('hello', { 
      url: '/hello', 
      abstract: true, 
      template: '<ui-view/>' 
     }) 
     .state('hello.create', { 
      url: '/create', 
      templateUrl: 'app/createHello/createHello.html', 
      controller: 'createHello' 
     }) 
     .state('hello.display', { 
      url: '/:id', 
      templateUrl: 'app/hello/hello.html', 
      controller: 'hello' 
     }); 
    } 
]); 

Обратите внимание, что маршрутизация выполняется на «первый матч», так что вам нужно будет иметь ваш/привет/создать маршрут объявлен до приветствия//: маршрут ид.

Вы можете прочитать больше о том, как гнездящихся работах здесь: https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views

В приведенном выше примере я использовал abstract родительское состояние.