UI的路由器继承意见 [英] UI-Router inheriting views

问题描述

我开始在我的code一些严重的重复。

有没有什么办法来声明一个父亲认为，外部意见将继承？

我的code是如下：

  VAR头= {templateUrl：谐音/头/ header.html中};
    VAR页脚= {templateUrl：谐音/页脚/ footer.html};    $ stateProvider
        .STATE（'主'，{
            网址：/，
            观点：{
                头：头，
                日程地址搜索Maincontent：{templateUrl：谐音/ mainContent.html}，
                页脚：页脚
            }
        }）
        .STATE（'教训'，{
            网址：/课，
            观点：{
                头：头，
                日程地址搜索Maincontent：{templateUrl：谐音/课/ lesson.html}，
                页脚：页脚
            }
        }）
        .STATE（'注册'，{
            URL：/注册，
            观点：{
                头：头，
                日程地址搜索Maincontent：{templateUrl：谐音/注册/ register.html}，
                页脚：页脚
            }
        }）
        .STATE（'404'，{
            网址：/ 404，
            观点：{
                头：头，
                日程地址搜索Maincontent：{templateUrl：谐音/ 404 / 404.html}，
                页脚：页脚
            }
        }）;    $ urlRouterProvider.otherwise（'/ 404'）;
 

解决方案

您应该能够使用父属性巢的看法，在<一个描述href=\"https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views\">https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

所以，你应该能够建立类似

  $ stateProvider
    .STATE（'根'，{
      摘要：真实，
      观点：{
        '@'：{
            控制器：'RootCtrl
        }，
        头@：头，
        页脚@'：页脚
       }
    }）
    .STATE（'主'，{
        网址：/，
        父：'根'，
        观点：{
            @：{templateUrl：谐音/ mainContent.html}，
        }
    }）
    .STATE（'教训'，{
        网址：/课，
        父：'根'，
        观点：{
            @：{templateUrl：谐音/课/ lesson.html}，
        }
    }）
 

以上用途命名视图头和尾，以及为每个页面的主的内容未命名的视图。因此，对于页面模板看起来像

 ＆LT; D​​IV＆GT;
  ＆LT;格UI视图=头＆GT;＆LT; / DIV＆GT;
  ＆LT;格UI的视图＆gt;＆LT; / DIV＆GT;
  ＆LT;格UI视图=页脚＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

我已经使用没有模板或控制器命名视图的一些问题，所以如果有什么不工作，也许添加一个模板：

 ＆LT; UI画面/＆GT;
 

要第一个'@'块，或在每个国家指定的控制器。

i'm beginning to have some serious repetitions in my code.

Is there any way to declare a father view that outer views will inherit from ?

my code is as below :

    var header = { templateUrl: "partials/header/header.html"};
    var footer = { templateUrl: "partials/footer/footer.html"};

    $stateProvider
        .state('main', {
            url: "/",
            views: {
                "header": header,
                "mainContent": { templateUrl: "partials/mainContent.html"},
                "footer": footer
            }
        })
        .state('lesson', {
            url: "/lesson",
            views: {
                "header": header,
                "mainContent": { templateUrl: "partials/lesson/lesson.html"},
                "footer": footer
            }
        })
        .state('register', {
            url: "/register",
            views: {
                "header": header,
                "mainContent": { templateUrl: "partials/register/register.html"},
                "footer": footer
            }
        })
        .state('404', {
            url: "/404",
            views: {
                "header": header,
                "mainContent": { templateUrl: "partials/404/404.html"},
                "footer": footer
            }
        });

    $urlRouterProvider.otherwise('/404');

解决方案

You should be able to use the "parent" property to nest views, as described at https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

So you should be able to setup something like

$stateProvider
    .state('root', {
      abstract: true,
      views: {
        '@': {
            controller: 'RootCtrl'
        },
        'header@': header,
        'footer@': footer
       }
    })
    .state('main', {
        url: "/",
        parent: 'root',
        views: {
            "@": { templateUrl: "partials/mainContent.html"},
        }
    })
    .state('lesson', {
        url: "/lesson",
        parent: 'root',
        views: {
            "@": { templateUrl: "partials/lesson/lesson.html"},
        }
    })

The above uses named views "header" and "footer", as well as an unnamed view for the "main" content of each page. So the template for the page would look something like

<div>
  <div ui-view="header"></div>
  <div ui-view></div>
  <div ui-view="footer"></div>
</div>

I've had a few problems using named views without templates or controllers, so if something isn't working, maybe add a template:

<ui-view />

to the first '@' block, or specify controllers in each state.

这篇关于UI的路由器继承意见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！