You can achieve that either using routing
or by using states
.
In the following example, I am using `states'
Example
So here when you click on 'Route1' that page will load and when you click on 'Show List' related list will show.
The main logic is in this code:
$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"];
}
})
So I have two states in my home page, one is 'route1' and other is 'route2' and these two states have specific content along with another nested state and it's specific view called as 'list', so I am using two ui-view
to load the specific content in a container, one in 'index.html' and the other one is in 'route1.html' or 'route2.html'
This concept is called as Nested States & Nested Views and you can read more about it here.