Load menu after login with Angularjs

Asked

Viewed 1,435 times

1

In index.html I have ng-view where HTML content is loaded:

<body>
    <div ng-include src="'view/sidebar.html'" class="sidebar sidebar-left" toggleable parent-active-class="sidebar-left-in" id="mainSidebar"></div>
    <div ng-include src="'view/sidebarRight.html'" class="sidebar sidebar-right" toggleable parent-active-class="sidebar-right-in" id="rightSidebar"></div>
    <div class="app">
        <ng-view class="app-content"></ng-view>
    </div>
</body>

In the same index.html I do include 2 files (sidebar.html and sidebarRight.html) according to the above code, but these files should only appear after login.

In the application, after login the user is redirected to Dashboard.html, see route Provider:

$routeProvider.
        //...
        .when('/dashboard', {
            title: 'Dashboard',
            templateUrl: 'view/dashboard.html',
            controller: 'authCtrl'
        })
//...

I’ve seen that it’s not allowed to have more than one "ng-view", so how do I solve the problem?

I tried to put the includes inside Dashboard.html, but I would have to duplicate it for several pages and in the template I’m using, it’s really necessary to be outside the div "app".

angularjs

1 answer

5


Actually ng-view is not allowed twice on the same page. But to solve this is not difficult, all you need to do is use a module that was developed exactly for this type of situation, medium/large applications that need multiple pages with different layouts and "nested content".

The module that solves this is called UI-Router.

The setup is very simple and it has several features. I created a plunker where you can see how easy it is to set up and use. Plnkr.

You can see in the code that in the main file (index.html) you will find two Divs with the ui-view directive.

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

And you will find this same directive in the other files, which means you can nest more content as your need.

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.