UI-Router inheriting views

问题

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');

回答1:

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.

回答2:

It seems like you could just use ng-include for the header and the view. If it isn't depending on the view routing then go for ng-include.

You would apply it like this:

<div data-ng-include="header"></div> 
// $scope.header = "partials/header/header.html";

来源：https://stackoverflow.com/questions/20439630/ui-router-inheriting-views