Login Screen with Angularjs

Question

Login Screen with Angularjs

Navigation

#1 by (2 votes)

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 the form of login inside index.html it will show everything along with dashboard and ng-view , and I want it to show only the login screen and when to authenticate the user, redirect it to dashboard with 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 ng-view inside dashboard but then I would have to double <HEAD> index in dashboard ...

Would anyone else have another solution ??

angularjs

asked by anonymous 22.08.2015 / 02:12

1 answer

Asp.NET MVC bind checkbox list with string value new Date () with no time zone

score 2 · Answer 1

If you want flexible layouts, it is best to send index.html with as little html as possible. As ngRoute allows only ng-view it is even necessary to repeat the header and footer layouts in other templates.

See 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><scriptsrc="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 can replace ngRoute with ui-router