All geek questions in one place

Angular ui-router: Parent and child views

I want to create a site with the following structure header: main-view, footer-view. So I defined a root route that contains the header and footer. The root children will be all my sites. In these sites I will have more subviews.

The code below displays the header, but not the footer and main view. As soon as I remove parental inheritance, it shows the main view, but not the header and footer.

HTML

<body ng-app="App"> <header ui-view="header"></header> <main ui-view></ui-view> <footer ui-view="footer"></footer> </body>

Js

  module.config(function($urlRouterProvider, $stateProvider) { $urlRouterProvider.otherwise('/home'); $stateProvider .state('root', { abstract: true, views: { '@': { controller: 'RootCtrl', controllerAs: 'rootCtrl' }, ' header@ ': { templateUrl: 'modules/header/header.html', controller: 'HeaderCtrl', controllerAs: 'headerCtrl' }, ' footer@ ': { templateUrl: 'modules/footer/footer.html', controller: 'FooterCtrl', controllerAs: 'footerCtrl' } } }) .state('root.home',{ parent:'root', url:'', templateUrl:'modules/home/home.html', controller: 'HomeController', controllerAs:'homeCtrl' }); });
+6
source share
1 answer

There is a link to the working plunker .

The logic of the UI-Router is how to find the target / binding for the view: always try to insert child into parent . If this is not possible, use absolute naming. cm:

Show Names - Relative and Absolute Names

So what I changed is that the parent unnamed view now contains the target / anchor for the child - the unnamed view <ui-view /> :

 .state('root', { abstract: true, views: { '@': { template: '<ui-view />', // NEW line, with a target for a child controller: 'RootCtrl', controllerAs: 'rootCtrl' }, ....

Also, since we are saying that the default URL is

  $urlRouterProvider.otherwise('/home');

we must have this condition:

 .state('root.home',{ parent:'root', url:'/home', // this is the otherwise, to have something on a start up

Check here

Another approach with plunker here , can target the root view in the child:

 .state('root.home',{ parent:'root', url:'/home', views: { '@': { templateUrl:'home.html', controller: 'HomeController', controllerAs:'homeCtrl' } },

In this case, the parent state should not have <ui-view /> - we target the root, but we don’t inherit anything ... Why? See this link:

Inheritance of inheritance only in view hierarchy

+10
source

Source: https://habr.com/ru/post/979163/

More articles:


All Articles