In Angular, the ui-router child pattern does not work

Question

I registered test status with a child .child1 , here the parent ( test ) is working fine. when I go to test.child1 state the URL changes to #/test/child1 but the view remains the same, the child template does not work

 angular.module('uiRouterSample.contacts', [ 'ui.router' ]) .config( [ '$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { $stateProvider .state('test',{ url:'/test', template:'<a ui-sref="test">Parent</a> -> <a ui-sref=".child1">child1</a>', controller: ['$scope', '$state', 'contacts', 'utils', function ( $scope, $state, contacts, utils) { }] }).state('test.child1',{ url:'/child1', template:'Child template working fine' }) } ] ) 

Answer 1

You need the ui-view directive in the parent state template (test state):

  template:'<div ui-view/> <a ui-sref="test">Parent</a> <a ui-sref=".child1">child1</a></div>', 

Basically, whenever you have a state in ui-router that has child states, the immediate parent is pf, that child state should also have a ui-view directive in its template.

Answer 2

Posting this as an answer since I don't have enough reviews for comments. As Mohammad mentioned, you need a ui-view inside the parent state template. ui-view in your index html only allows you to display the parent state ( test state), but in order for the .child1 state to be displayed, it needs another ui-view inside its parent state, which in this case is the test state.

Thus, configure the test state template containing ui-view :

 angular.module('uiRouterSample.contacts', ['ui.router']) .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { $stateProvider .state('test',{ url:'/test', template:'<div ui-view/> <a ui-sref="test">Parent</a> -> <a ui-sref=".child1">child1</a></div>', controller: ['$scope', '$state', 'contacts', 'utils', function ( $scope, $state, contacts, utils) { }]}) .state('test.child1',{ url:'/child1', template:'Child template working fine' }) }]