2
I have a little app SPA
(Single Page Application) with AngularJS
where all pages are loaded on index.html
through the ng-view
.
But I added a layout with a sidebar and a few other things on this page and call the ng-view
within that layout. That way when I load the login page this is the result:
I would like to display only the separate login page, the rest of the pages would be included in this template.
What is the best way to solve this problem?
Index.html
.../Trecho do navBar+sideBar
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div ng-view></div>
<a href="#menu-toggle" class="btn btn-default menu-toggle">Toggle Menu</a>
</div>
</div>
</div>
</div>
I didn’t put all the code because it’s a little big, but I can see where the ng-view
stays.
This is the config of the routes:
$routeProvider.when("/home", {
templateUrl: "src/views/home.html",
controller: "loginCtrl"
});
$routeProvider.when("/login", {
templateUrl: "src/views/login.html",
controller: "loginCtrl"
});
$routeProvider.otherwise({
redirectTo: "/login"
});
});
Update: script that worked before and now with new solution no longer works:
<script>
$(".menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
Button that stays on navBar
which is now separated into another page:
<button type="button" class="navbar-toggle collapsed menu-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
That main going inside the ui-view is what? a page?
– DiegoAugusto
It’s just the name of the view. Note that within the path configuration there is a field
view: main
orview: auth
. This is where I 'choose' which view that particular template will be displayed. But this involves a Parent view and Child view structure. But you’ll find all this documentation on the ui-router github if you choose to use it.– celsomtrindade
Okay, I’ll try, I’ll tell you if it worked. Thank you
– DiegoAugusto
Opa, it worked almost everything, but how do I call the url /Clients? when I try to pass only /Clients does not work
– DiegoAugusto
It does not work because it is linked to her 'father' state, which would be
/BemVindo/Clientes
. I haven’t tried that, but I believe it’s enough to remove theurl:/BemVindo
(all line) of state parent solving– celsomtrindade
If I remove the login page is no longer displayed
– DiegoAugusto
Sorry, it would be the url line of the authenticated state, which is it that opens the door to your app.
– celsomtrindade
I got it, I put /Hello/Customers and it worked, it’s okay to do it this way not right?
– DiegoAugusto
It’s up to you. I even use it to give feedback on where it is. For example, it will always be a url like Adm/client or Adm/service, etc..
– celsomtrindade
I got it, easy. One last question, I had a script that I left at the end of the page index.html where everything was together, this script made a button hide and show the sidebar. But now it doesn’t work, neither on the index page nor on the authenticated one, which is where the button is. You would have to put this script somewhere specific?
– DiegoAugusto
If he has dependency with some controller or something like that, he would have to see exactly if there was any change. I believe that’s why.
– celsomtrindade
I think it does not depend on any controller, it is a very small script I will edit the question and put at the end
– DiegoAugusto
edited question
– DiegoAugusto
Look, since it already involves jQuery, I wouldn’t know how to tell you much. But it should work with the script inside the authenticated.html. Both the button and the script. Maybe if you run the script inside a
document.ready
, will be?– celsomtrindade
I also do not understand much, I will try to solve this part. Thank you for the answer that solved my problem.
– DiegoAugusto