CODEWITHSUNDEEP
angularjsangular-ui-router
bluedevil2k
bluedevil2k

Reputation: 9491

Angular ui-router subview issues

I've been working with Angular for a year or 2 now, but this is my first project using ui-router. I'm running into a few issues with views and sub-views. The app is a standard left-side menu bar, with the views on the right changing depending on what's clicked in the menu bar.

On index.html

<body>
    <div ui-view></div>
</body>

In the config.js file, which defines the routes

 .state("dashboard", {
        url: "/dashboard",
        templateUrl: "components/dashboard/dashboard.html",
        data: {
            pageTitle: "Dashboard",
            requiresLogin: false
        }
    })

    .state("dashboard.welcome", {
        url: "/welcome",
        templateUrl: "components/welcome/welcome.html",
        data: {
            pageTitle: "Welcome",
            requiresLogin: false
        }
    })

In the dashboard.html file

 <div class="dashboard">
    <div class="container-fluid">
     <div class="row">
      <div class="col-xs-12 col-md-8">
       <div ui-view>

The /dashboard path loads correctly, and will load the left-side navigation bar with a blank right side. But changing the state to dashboard.welcome (/welcome) will not load the welcome.html template.

Upvotes: 3

Views: 817

Answers (3)

xtrinch
xtrinch

Reputation: 2281

Nested routes in ui-router get nested urls. I would however recommend using named-views for this kind of structure. You can find more info about it here:

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

The gist of it is: you can specify a named component (ui-view) for your left menu navigation and another one for content, which gives you much more control down the line, because named components can be overwritten in child states or they can keep the default template, depending on your needs.

Example:

.state('root', {
            url: '',
            abstract: true,
            views: {
                'header': {
                    templateUrl: 'templates/partials/header.html',
                    controller: 'headerCtrl'
                },
                'logo': {
                    templateUrl: 'templates/partials/logoView.html'
                },
                'footer':{
                    templateUrl: 'templates/partials/footer.html',
                    controller: 'footerCtrl'
                }
            }
        })
        .state('root.login', {
            url: '/login',
            views: {
                'header@': {
                    template: ''
                },
                'container@': {
                    templateUrl: 'templates/login.html',
                    controller: 'loginController'
                }
            }
        })
        .state('root.report', {
            url: '/report',
            views: {
                'container@': {
                    templateUrl: 'templates/eu_dashboard.html',
                    controller: 'reportController'
                }
            }
    })

And in your index.html:

<div ui-view="logo"></div>
<div ui-view="header"></div>
<div id="mainView" ui-view="container"></div>
<div ui-view="footer"></div>

Upvotes: 1

BatteryAcid
BatteryAcid

Reputation: 8881

It sounds like you want links to /welcome to be for state dashboard.welcome. Here is a plunker showing how this can be done. I show two sets of dashboard and welcome states. The first set of states (dashboard & welcome) shows that /dashboard/welcome will bring you to the dashboard.welcome state.

The second set (dashboard2 & welcome2) shows that /welcome will go to state dashboard2.welcome2. I believe this is what you were looking for.

If you hover over the links you can see where they will take you.

https://plnkr.co/edit/AVKPFa?p=info

Upvotes: 1

Aditya Singh
Aditya Singh

Reputation: 16650

Whenever working with ui-router you need to understand that the concept of states is different from routes. When you define a sub-state, its defined relative to its parent state. In your scenario dashboard.welcome is defined as a child state of dashboard. The routes to substate is relative to the parent and is {parent url}/{child url}. Hence you should use either of the below 2 to route to that state:

Using $state.go change the state by specifying state name

$state.go('dashboard.welcome');

Using $location.path change the route by specifying url

$location.path('/dashboard/welcome');

Upvotes: 1

Related Questions