Upload menu after login with AngularJS

Question

Upload menu after login with AngularJS

Navigation

#1 by (5 votes)

1

In index.html I have the ng-view where the 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 make the include of 2 files (sidebar.html and sidebarRight.html) according to the code above, however these files should only appear after login.

In the application, after login the user is redirected to the dashboard.html, see the route provider:

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

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

I have tried to put the includes inside the dashboard.html, however it would have to duplicate for several pages and in the template I am using, it is even necessary to be outside the "app" div.

angularjs

asked by anonymous 29.10.2014 / 18:23

1 answer

Hover in two elements at the same time How to apply responsiveness to texts?

score 5 · Accepted Answer

Actually ng-view is not allowed twice on the same page. But to solve this is not difficult, all you have 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 configuration is very simple and it has several functionalities. I've created a plunker where you can see how easy it is to configure 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'll find that same directive in the other files, which means you can nest more content as you need it.