UI-Router inherits views
Serious repetitions appear in my code.
Is there a way to declare the paternal view that external views inherit?
my code looks like this:
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');
source to share
You can 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 configure 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 example uses the names "headers" and "footer" and also an unnamed representation of the "main" content of each page. Thus, the template for the page will look something like this:
<div>
<div ui-view="header"></div>
<div ui-view></div>
<div ui-view="footer"></div>
</div>
I had a couple of problems using named views without templates or controllers, so if something doesn't work, maybe add a template:
<ui-view />
in the first "@" block or specify the controllers in each state.
source to share
It looks like you can just use ng-include for the header and view. If it doesn't depend on the routing of the view, go to ng-include
.
You would apply it like this:
<div data-ng-include="header"></div>
// $scope.header = "partials/header/header.html";
source to share