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

Navigation

#1 by (2 votes)

2

I have a small application SPA ( Single Page Application ) with AngularJS where all pages are loaded in index.html through ng-view .

But I added a layout with a sidebar and a few more things on that page and I call the ng-view within that layout. That way when I load the login page this is the result:

Iwouldliketodisplayonlytheseparateloginpage,therestofthepageswouldbeincludedinthistemplate.

Whatisthebestwaytosolvethisproblem?

Index.html

.../TrechodonavBar+sideBar<divid="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 did not put all the code because it is a little big, but you can already see where ng-view is.

This is the route configuration:

$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 in navBar that is now separated on 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>

javascript html angularjs

asked by anonymous 10.11.2015 / 12:49

1 answer

How do I store passwords in environment variables (and remove them from version control)? How to convert AnsiString to Char in C ++ Builder?

score 2 · Accepted Answer

I do this service using the ui-router instead of ngRoute. It is more robust and has a better functioning.

It's a rather complex idea and you'll need to adapt this to your authentication mode, which can be (and probably will be) different from many others.

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

The idea is that you have a main view, which loads the corresponding html, depending on the user's authentication or not. 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;

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

In div ui-view="auth" you will load only if you pass the authentication, then within this div you would load the html that runs your entire app, eg client.html, servico.html, etc ...

Sample html files:

index.html

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

Login.html

<form>
    ...
</form>

authenticated.html

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

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

The configuration of the router would be 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 have managed to make the general idea clear for you to set up your case. Anything question me that I try to help as much as I can.