Question

我建立了一个移动网站，用于购买/续订/转让/域名。

整个应用程序有4个模板连接到功能链。

Buy     :   Search -> (login if needed?) -> Pay -> -Confirmation
Renew   :   Choose -> (login if needed?) -> Pay -> -Confirmation
Transfer:   Choose -> (login if needed?) -> Pay -> -Confirmation

虽然应用程序具有相同的模板，但功能和标题却不同。我希望能够检查每个州内的父状态，以便进行动态更改，并切换请求字符串。

最简单的方法是在stateProvider中定义12（4X3）条路线。但我正在寻找更有效的方法，通过联合buy.search, renew.search, transfer.search和其他三组路线来实现这一目标。可能吗？有人可能会建议我采用其他方法吗？

由于

=== UPDATE ===

当前stateProvider

 .state('app.buy.search', {
              url: "/search",
              templateUrl: "templates/search_domain.html",
              controller: 'SearchCtrl'})

 .state('app.buy.login', {
              url: "/buy/login",
              templateUrl: "templates/login.html",
              controller: 'LoginCtrl'})

 .state('app.buy.pay', {
              url: "/buy/pay",
              templateUrl: "templates/pay.html",
              controller: 'PayCtrl'})

.state('app.renew.search', {
              url: "/search",
              templateUrl: "templates/search_domain.html",
              controller: 'SearchCtrl'})

 .state('app.renew.login', {
              url: "/buy/login",
              templateUrl: "templates/login.html",
              controller: 'LoginCtrl'})

 .state('app.renew.pay', {
              url: "/buy/pay",
              templateUrl: "templates/pay.html",
              controller: 'PayCtrl'})

.state('app.transfer.search', {
              url: "/search",
              templateUrl: "templates/search_domain.html",
              controller: 'SearchCtrl'})

 .state('app.transfer.login', {
              url: "/buy/login",
              templateUrl: "templates/login.html",
              controller: 'LoginCtrl'})

 .state('app.transfer.pay', {
              url: "/buy/pay",
              templateUrl: "templates/pay.html",
              controller: 'PayCtrl'})

Answer 1

您可以应用dynamic url来减少路由器配置。在您的情况下，模块（购买，续订，转移）的页面（搜索，付费，登录）是相同的。因此，您可以按如下方式更改配置

        $stateProvider
        .state('app', {
          url: '/',
          templateUrl: 'dashboard.html',
          controller: 'MainCtrl'
        })
        .state('app.search', {
          url: '{module}/search',
          views: {
            "searchView": {
              templateUrl: 'search.html',
              controller: 'SearchCtrl'
            }
          }
        })
        .state('app.pay', {
          url: '{module}/pay',
          views: {
            "payView": {
              templateUrl: 'pay.html',
              controller: 'PayCtrl'
            }
          }
        })
        .state('app.login', {
          url: '{module}/login',
          views: {
            "loginView": {
              templateUrl: 'login.html',
              controller: 'LoginCtrl'
            }
          }
        })

演示：http://plnkr.co/edit/NGsZJB?p=preview

如何定义具有不同父项但具有相同模板的多个嵌套状态

1 个答案: