angularjsuiviewangular-ui-routerangularjs-componentsnested-views

ui-router child view of an angularjs component not showing

I have an angularjs component(almost empty markup) acting as a shell/parent to its child views(markups with different columns/formats). I am able to see the component but no child views are loaded.

ui-router config code:

.config(function($stateProvider, $urlRouterProvider, $locationProvider) {


$urlRouterProvider.otherwise('/');

$stateProvider
  .state('parent', {
    url: '',
    views: {
      'parentComponent': {
        component: 'parentComponent'
      }
    }
  })
  .state('parent.child', {
    url: '/child',
    templateUrl: 'child.html'
  });

index.html:

<body ng-app="app" >
 <div ng-controller='RoutingCtrl'>
   <parent-component></parent-component>
 </div>
</body>

The parent, which is a component:

<!DOCTYPE html>
<div>
    <br />
    <br />
    <div>I am the parent, a angularjs component.</div>
    <div>There sould be the nested/child view right below:</div>
    <div ui-view></div>
</div>

child:

<div>Hi! I am the child!</div>

My controller tells ui-router to go to child view:

$state.go('parent.child');

I don't want to declare parent as abstract because, in my real app, I have views parallel to the parent component view(together, they form a multiple named view) here and these other high level views(except the parent component) must be visible regardless of the child views.

I am using angularjs 1.5.8 and ui-router version 0.4.2

Plunker: http://plnkr.co/edit/tBhVTjttMagaJzHQNvro?p=preview

Solution

  • You haven't provided any details what you are trying to accomplish, so based on what it looks right now, you have two options: either go with the ui-view template throughout your app and use the parent-child relationship of ui-router or go with hybrid approach of loading your component, and inside it, a state you want to show.