Separate login page from other pages that are loaded from ng-view

Question

Separate login page from other pages that are loaded from ng-view

Asked 8 years, 7 months ago

Viewed 422 times

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>

1 answer

Browser other questions tagged javascript html angularjs

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

by celsomtrindade • **8,038** points · Answer 1 · 2015-11-10T12:14:49+00:00

I do this service using ui-router instead of ngRoute. It is more robust and works better.

It is a somewhat complex idea and you will need to adapt this to your authentication mode, which may be (and probably will be) different from many others.

The answer I’m going to give you would be using the ui-router, what I recommend you look at, because it is better than the ngRoute.

The idea is that you have a main view, which loads the corresponding html, depending on the authentication or not of the user. And the secondary view that will load the content of the app.

<div ui-view="main"></div> //Irá carregar ou a página de login ou a página do app;
<div ui-view="auth"></div> //Irá carregar todo o app somente se o usuário autenticar;

To div ui-view="main" will be on the index page, so on the index page you no longer add any html, only determine which view will be loaded, the login.html or the autenticado.html.

Already in the div ui-view="auth" you will only load if you pass authentication, so within this div you would load the html that runs your entire app, e.g.: html client, servico.html, etc...

Example of html files:

index.html

<head>
   suas inicializações
</head>
<body>
    <div ui-view="main"></div>
</body>

Login.html

<form>
    ...
</form>

html authenticated.

<header>
    .. seu header ..
</header>
<nav>
    .. seu menu ..
</nav>
<div ui-view="auth"></div>

Note that in the authenticated.html file it has another one ui-view, because it is only in this view that you will load the pages that require authentication.

The router configuration would look something like this:

//Se NÃO passar a autenticação, abre esse .state
.state('login', {
    url: "/BemVindo",
    views: {
        "main": {
            controller: 'LoginCtrl',
            templateUrl: "login.html"
        }
    }           
})
 //Se PASSAR a autenticação, abre esse .state
.state('autenticado', {
    url: "/Ola",
    views: {
        "main": {
            controller: 'AutenticadoCtrl',
            templateUrl: "autenticado.html"
        }
    }
})
    //A partir de agora você teria multiplos .state para cada menu do seu app
    .state('cliente', {
        parent: 'autenticado',
        url: "/Clientes",
        views: {
            "auth": {
                controller: 'ClienteCtrl',
                templateUrl: "autenticado/cliente.html"
            }
        }
    })

I hope I’ve been able to make the general idea clear so you can put your case together. Anything questions me I try to help as much as I can.