How to implement nested views using Angular UI route?

Answer 1

First let us understand the concept of nested views. We want to navigate as follows in SPA. From main view we want to navigate to some view and in that view we want to load some other view.

Angular UI Router helps to define nested states. Below is the code of “MainView” in which we have defined one more state “View” and in that we have two child states “View.SubView1” and “View.SubView2” which points to different views.

myApp.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state("View", {
            templateUrl: 'View.htm'
        })
        .state('View.SubView1', {
            template: '<b>Sub view 1</b>'
        }).state('View.SubView2', {
            template: '<b>Sub view 2</b>'
        });
});

In the part view we can now define navigation to child states i.e. “View.SubView1” and “View.SubView2”.

<a ui-sref="View.SubView1" href="#View.SubView1">Sub view 1</a>
<a ui-sref="View.SubView2" href="#View.SubView1 ">Sub view 2</a>
<div ui-view></div>