CODEWITHSUNDEEP
htmlangularjsangular-ui-routerangularjs-routing
Niraj
Niraj

Reputation: 113

Multiple UI-Views not working as expected

I am trying to use multiple UI-views in my AngularJS app and it is not working as expected. The app is a dashboard.

My directory structure is as follows:

index.html
app/
    app.js
    dashboard/
        dashboard.html
        dashboard.js
        partials/
            business.html
            items.html
            orders.html
            sales.html
    login/
        login.html
        login.js

The problem that I am having is that my index.html file has the following line of code:

<div ui-view></div>

The above line enables my application to show the login.html page and dashboard.html page. Now I want to be able to have partial views in my dashboard.html page and so I have also put the same line of code

<div ui-view></div>

in order to be able to embed partial views in my dashboard page. Instead of embedding though, the page instead just redirects. So for example if I am in my dashboard.html and click on a navigation item such as 'business', I am redirected to partials/business.html instead of the content being embedded.

1) Can I have multiple ui-views embedded within each other? 2) Am I correctly embedding the partial views?

I have scoured the internet but cannot find a solution. Thanks in advance for the help!

Upvotes: 0

Views: 171

Answers (2)

Asim
Asim

Reputation: 360

You can define a ui-view inside another ui-view. I have implemented it in the following manner and its pretty straight forward.

Inside index.html I have code:

      <div ui-view=""></div>

Then inside user.html I have code

     <div ui-view=""></div>

And I have defined a config for displaying my views as

     .config(function($urlRouterProvider, $stateProvider) {



     var users = {
        //Name must be in format Parent.Child
        name: 'users',
        url: '/user',
        templateUrl: 'users/user.html',
        controller: 'usersHandler',
        data: {
            pageTitle: 'Welcome to Users'
        },

    },

    createUsers = {
        name: 'users.createUsers',
        url: '/createUser',
        templateUrl: 'users/createUser.html',
        data: {
            pageTitle: 'Create Users'
        }
    },
    listUsers = {
        name: 'users.listUsers',
        url: '/listUsers',
        templateUrl: 'users/userLists.html',
        data: {
            pageTitle: 'Users listing'
        }
    },

    getUserDealer = {
        name: 'users.getUserDealer',
        url: '/getUserDealer',
        templateUrl: 'users/getUserDealer.html',
        data: {
            pageTitle: 'Users dealer listing'
        }
    },

    editUser = {
        name: 'users.editUser',
        url: '/editUser',
        templateUrl: 'users/editUser.html',
        data: {
            pageTitle: 'Edit User'
        }
    };
    //Similarly define all the combination you want to separate

   //add routes to stateProvider
    $stateProvider
        .state('users', users)
        .state('users.createUsers', createUsers)
        .state('users.listUsers', listUsers)
        .state('users.getUserDealer', getUserDealer)
        .state('users.editUser', editUser);

        $urlRouterProvider.otherwise('/user/listUsers');

        });

Whats happening is this that user.html is my parent file which is loaded inside index.html and editUser.html, getUserDealer.html and userLists.html etc are its children which I load within user.html using ui-view.

And I provide the links for nested pages as:

       <ul class="nav navbar-nav">
        <li><a href="#/user/createUser">NEW USER</a></li>
        <li><a href="#/user/listUsers">GET USER</a></li>
       </ul>

This can be extended to additional parents and their children as per the need. Hope it helps!!

Upvotes: 1

SamuelMS
SamuelMS

Reputation: 1146

You can definitely have multiple embedded views.

Check out these AngularJS UI-Router tutorials: Nested Views and Multiple Named Views.

Let me know if you still have issues after looking them over.

Upvotes: 1

Related Questions