AngularJS, ui-路由器，嵌套状态

Question

我正在ui使用ui-router 构建一个应用程序的概要。我已经定义了状态并且它似乎有效，但我不禁觉得在最佳实践方面可能有更好的方法。

我的状态：

'main' 是一个抽象状态，具有页眉、页脚和中间内容区域。
'main.home' 是默认出现的。内容文件 'home.tpl.html' 是一种带有指向应用程序其他区域的 sref 的启动页面，例如 'main.wizard.step1'.
'main.wizard' 是代表多步骤信息收集向导的抽象状态。
'main.wizard.step1'、'main.wizard.step2' 是向导中的步骤

我怀疑的是我对 'views' 对象的使用具有“@”和“”的值。这看起来合理吗，或者你会做其他事情吗？

$urlRouterProvider.otherwise('/');

var app = {
    name: 'main',
    abstract: true,
    url: '',
    views: {
        'header': {
            templateUrl: 'header.tpl.html'
        },
        'footer': {
            templateUrl: 'footer.tpl.html'
        }
    }
};

var home = {
    name: 'main.home',
    url: '/',
    views: {
        "@": {
            templateUrl: 'home/home.tpl.html'
        }
    }
};

var wizard = {
    name: 'main.wizard',
    abstract: true,
    url: '/wizard',
    views: {
        "@": {
            templateUrl: 'wizard/wizard.tpl.html'
        }
    }
};

var step1 = {
    name: 'main.wizard.step1',
    url: '/step1',
    views: {
        "": {
            templateUrl: 'wizard/step1.tpl.html'
        }
    }
};

/** repeat similarly for step2, step3 & step 4 **/

$stateProvider.state(app);
$stateProvider.state(home);
$stateProvider.state(wizard).state(step1).state(step2).state(step3).state(step4);

Answer 1

“@”在视图模板定义中的含义将被注入根状态的 ui-视图，通常是您的 index.html。如果您希望向导进入主页的中间区域，您应该将类似的内容添加到 index.html:

<ui-view name='content'>Optional placeholder text</ui-view>

并且在视图的定义中你应该做类似

的事情

var wizard = {
name: 'main.wizard',
abstract: true,
url: '/wizard',
views: {
    "@content": {
        templateUrl: 'wizard/wizard.tpl.html'
    }
 }
};

您实际上可以在 @content 中删除 @，因为 main 是向导的父级，您不必以绝对方式解析它。在任何情况下，如果你想在你的向导中有步骤（当然）不要在你的向导虚拟状态中放置任何视图。让您的步骤子状态有自己的视图和目标 wizard@。我看不出您的向导需要单独的视图包装器（也许如果您想要 "step x of y" 或进度条）。希望对你有帮助。

Answer 2

你进展顺利。但你可以改进。这是显示我如何完成的代码，我从 UI-路由器指南中的示例应用程序中采用了这种方法。

    var states = [
        { name: 'hello', url: '/loginnn', component: 'loginComponent'    },
        { name: 'home', url: '/hommm', component: 'homeComponent' },

        { 
          name: 'home.dumm1', 
          url: '', 
          component: 'dummyComponent',

        },


        {
          name: 'home.dumm2', 
          url: '/dumm1', 
          component: 'dummyComponent1',
        },


        {
            name : 'home.dashboard',
            url: '/dashboard', 
            component: 'dashboardComponent',
        }

      ]

      // Loop over the state definitions and register them
      states.forEach(function(state) {
        $stateProvider.state(state);
      });
    });

AngularJS, ui-路由器，嵌套状态

AngularJS, ui-router, nested states

angularjs

angular-ui-router