To achieve this, you have the option of using either routing or states. In the example below, I will be demonstrating the use of 'states'.
Check out the Example here
When you click on 'Route1', the corresponding page will load. Similarly, clicking on 'Show List' will display the related list.
The key logic is present in the code snippet shown below:
$stateProvider
.state('route1', {
url: "/route1",
templateUrl: "route1.html"
})
.state('route1.list', {
url: "/list",
templateUrl: "route1.list.html",
controller: function($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('route2', {
url: "/route2",
templateUrl: "route2.html"
})
.state('route2.list', {
url: "/list",
templateUrl: "route2.list.html",
controller: function($scope) {
$scope.things = ["A", "Set", "Of", "Things"];
}
})
In my homepage, I have set up two states: 'route1' and 'route2'. These states contain specific content, including a nested state with its respective view named 'list'. To load this content into a container, I am utilizing two ui-view elements - one in 'index.html' and the other in 'route1.html' or 'route2.html'.
This approach is known as Nested States & Nested Views, and for further information, you can refer to the documentation here.