CODEWITHSUNDEEP
javascriptangularjsangular-uiangular-ui-router
David Limkys
David Limkys

Reputation: 5123

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

Upvotes: 1

Views: 1787

Answers (2)

Marcus Rådell
Marcus Rådell

Reputation: 620

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";

Upvotes: 1

Michal Charemza
Michal Charemza

Reputation: 26982

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.

Upvotes: 5

Related Questions