Question

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.

JavaScript

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.

HTML

<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>