根据 URL 参数更改 angular 状态

Question

嗨，在我的应用程序中，我有两个状态，分别称为 hello 和 createHello

下面给出了这两个状态相关的模块。

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']));

/hello/xxxx 的任何 url 模式将进入 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'
        });
    }
]);

请注意，路由是在 "first match" 上完成的，因此您需要在 /hello/:id 路由之前声明 /hello/create 路由。

您可以在此处详细了解嵌套的工作原理： https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views

在上面的示例中，我使用了 abstract 父状态。

根据 URL 参数更改 angular 状态

change angular state according to the URL parameter

url-routing

angularjs

angular-ui-router