AngularJS,ui-router,嵌套状态

时间:2015-04-16 22:31:23

标签: angularjs angular-ui-router

我正在使用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);

2 个答案:

答案 0 :(得分:3)

什么' @'将意味着在视图模板的定义中将注入到根状态的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;或进度条)。 希望它有所帮助。

答案 1 :(得分:0)

你很好。但你可以改进。下面的代码显示了我是如何完成的,我从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);
      });
    });