Login Screen with Angularjs

Asked

Viewed 4,085 times

1

Good evening, I’m having trouble making the login screen in my application

Index.html

<body>
<div ng-include"'dashboard.html'"></div>
<div ng-view></div>
</body>

If I put in the form login within the index.html will show everything together with the dashboard and the ng-view, and I want you to show only the screen of login and when authenticating the user, redirect it to the dashboard with the ng-view

NG-VIEW

angular.module("app").config(function($routeProvider){

$routeProvider.when("/Cliente", {
templateUrl:"Cliente.html",
controller :"ClienteController"
});
$routeProvider.when("/Corretor",{
templateUrl:"Corretor.html",
controller:"CorretorController"
});
$routeProvider.when("/NovoContrato",{
templateUrl:"NovoContrato.html",
controller:"ContratoController"

I could put the ng-view within the dashboard but then I’d have to duplicate the <HEAD> of index in dashboard...

Someone would have another solution??

angularjs

  • Can Dashboard.html only be viewed after logging in? If yes, you could create a login route and another one for Dashbord and remove include and leave only ng-view. To access the dashboar only with login, see how to do this using "resolve", see also on ui-route,

  • Dude I usually use the concept of master page. using the ui.router you can apply the same, so da to use a master p/ the system and separate login.

1 answer

2

If you want flexible layouts the ideal is to Mander index.html with as little html as possible. Like ngRoute allows only one ng-view ends up being even necessary to repeat the header and footer layouts in other templates.

Take the example:

var app = angular.module('myApp', ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider
    .when('/login', {
      templateUrl: 'login.html'
    })
    .when('/dashboard', {
      templateUrl: 'dashboard.html'
    })
    .otherwise({
      redirectTo: '/login'
    });
});
<!DOCTYPE html>
<html>

<head></head>

<body ng-app="myApp">
  <div ng-view></div>
  <script id="header.html" type="text/ng-template">
    Layout Header
  </script>
  <script id="footer.html" type="text/ng-template">
    Layout Footer
  </script>
  <script id="login.html" type="text/ng-template">
    Tela de Login
    <a href="#/dashboard">Ir para dashboard</a>
  </script>
  <script id="dashboard.html" type="text/ng-template">
    <div ng-include="'header.html'"></div>
    Conteudo do Dashboard
    <div ng-include="'footer.html'"></div>
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
</body>

</html>

If you want a more flexible solution you replace ngRoute with ui-router

Browser other questions tagged angularjs

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