I am attempting to incorporate the initial child component into parent one, specifically placing "test1.html" within "test.html". Take a look at the HTML code below:
test.html:
<div ui-view></div>
test1.html:
<h1>First</h1>
<button>Go to second page</button> // This will render test2.html inside test.html
test2.html:
<h2>Second</h2>
test1.controller.js:
.state('app.test', {
url: '^/test',
templateUrl: '/test/test.view.html',
controller: 'TestController',
controllerAs: 'testCtrl'
})
.state('app.test1', {
url: '^/test1',
templateUrl: '/test1/test1.view.html',
controller: 'test1Controller',
controllerAs: 'test1Ctrl'
})
.state('app.test2', {
url: '^/test2',
templateUrl: '/test2.view.html',
controller: 'test2Controller',
controllerAs: 'test1Ctrl'
})
Currently, only the main "test.html" page is loading without any inclusion of "test1.html".