top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

How to implement nested views using Angular UI route?

+1 vote
239 views
How to implement nested views using Angular UI route?
posted Jul 25, 2017 by Jdk

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

0 votes

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>
answer Aug 8, 2017 by Manikandan J
...