Question

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

我的州：

'main'是一个带有页眉，页脚和中间内容区域的抽象状态。
'main.home'是默认出现的。内容文件“home.tpl.html”是一种带有srefs到应用程序其他区域的启动页面，例如“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

什么＆＃39; @＆＃39;将意味着在视图模板的定义中将注入到根状态的ui-view中，这通常是你的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@。我没有看到你需要为你的向导单独的视图包装器（也许你想做＆＃34; y＆＃34的步骤x;或进度条）。希望它有所帮助。

Answer 2

你很好。但你可以改进。下面的代码显示了我是如何完成的，我从UI-Router Guide中的示例应用程序中采用了这种方法。

    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-router，嵌套状态

2 个答案: