web-dev-qa-db-fra.com

AngularJS - Route vers une autre page de différents modules ng-app après la connexion

J'ai une connaissance de base d'AngularJS uniquement. J'ai créé une application AngularJS.

index.html a deux liens pour vous connecter et vous inscrire. Avec ng-view. Par défaut, login est la vue. Dans la vue de connexion, j'ai un formulaire. Cela sera publié sur servlet et renverra le statut avec object. J'ai une autre page home.html wis = ch a son propre module ng-app. Lorsque la connexion est réussie, je souhaite accéder à home.html pgae. Il a également deux liens et une vue ng pour afficher les liens.

index.html 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Login - AngularJS</title>

    <link rel="stylesheet" type="text/css" media="all" href="styles/angulardemo.css" />

    <script src="script/angular.min.js"></script>
    <script src="script/app.js"></script>
    <script src="script/loginController.js"></script>
  </head>

  <body data-ng-app="sampleApp">

    <div class="index container">
        <div class="row">
            <div class="">
                <ul class="nav">
                    <li><a href="#login"> Login </a></li>
                    <li><a href="#register"> View1 </a></li>
                </ul>
            </div>
            <div class="loginView">
                <div ng-view></div>
            </div>
        </div>
    </div>

  </body>
</html>

login.html 

    <h2>Login</h2>

    <form ng-submit="loginUser()">
            <fieldset>
                <legend>Login</legend>

                <label>Name: </label> <input type="text" id="name" name="name"
                    ng-model="user.name" placeholder="User Name" required="required">
                    <br> <label>Password:</label> <input
                    type="password" id="password" name="password"
                    ng-model="user.password" placeholder="Your Password"
                    required="required"> <br>
                <button class="btn btn-primary">Login</button>
                <br />
            </fieldset>
            <label>{{user.status}}</label>
    </form>

app.js 

//Define Routing for app
angular.module('sampleApp', []).config(['$routeProvider',
  function($routeProvider,$locationProvider) {
    $routeProvider
    .when('/login', {
        templateUrl: 'login.html',
        controller: 'LoginController'
    })
    .when('/register', {
        templateUrl: 'register.html',
        controller: 'RegisterController'
      })
      .otherwise({
        redirectTo: '/login'
      });
//    $locationProvider.html5Mode(true); //Remove the '#' from URL.
}]);

//Home Page Module
angular.module('homeApp', []).config(['$routeProvider',
function($routeProvider,$locationProvider) {
  $routeProvider
  .when('/home', {
      templateUrl: 'home.html'
  })
  .when('/profile', {
      templateUrl: 'profile.html',
      controller: 'ProfileController'
  })
  .when('/settings', {
      templateUrl: 'settings.html',
      controller: 'SettingsController'
    })
    .otherwise({
      redirectTo: '/home'
    });
//  $locationProvider.html5Mode(true);
}]);

LoginController (a ​​à la fois login et register. J'ai implémenté uniquement pour login)

angular.module('sampleApp').controller('LoginController', function($scope,$location,$http) {
    $scope.user = {};
      $scope.loginUser = function() 
      {
        $http({
          method: 'POST',
          url: 'http://localhost:8080/AngularJSLogin/login',
          headers: {'Content-Type': 'application/json'},
          data:  $scope.user
        }).success(function (data) 
          {
            var strJSON=data;
            if(strJSON.status=="Success")
            {
                alert("success");
                $location.path( "/home" );
            }
            else
            {
                $scope.user.status=strJSON.userId+" : "+strJSON.status;
            }
          });
      };
});

angular.module('sampleApp').controller('RegisterController', function($scope,$location,$http) {
    $scope.user = {};
});

home.html 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Login - AngularJS</title>

    <link rel="stylesheet" type="text/css" media="all" href="styles/angulardemo.css" />

    <script src="script/angular.min.js"></script>
    <script src="script/loginController.js"></script>
    <script src="script/userController.js"></script>
  </head>

  <body data-ng-app="homeApp">
    <div class="container">
        <div class="row homeTitle">
            <div class="username">
                <h3>{{user.name}}</h3>
            </div>
            <div class="homeMenu">
                <ul class="nav">
                    <li><a href="#profile"> Profile </a></li>
                    <li><a href="#settings"> Settings </a></li>
                </ul>
            </div>
        </div>
        <div class="">
            <div ng-view></div>
        </div>
    </div>

  </body>
</html>

Chaque lien a ses propres contrôleurs.

Lorsque je clique sur le bouton de connexion avec un nom d'utilisateur et un mot de passe valides, il alerte avec Success , mais ne se rend pas à la page d'accueil (home.html). 

Comment puis-je accéder à une page différente contenant un module ng-app différent d'un autre? Et aussi comment transmettre ce User object à home.html ng-app module, afin qu’il puisse avoir des données d’utilisateur et afficher le nom de l’utilisateur, ainsi que d’autres valeurs?

javascripthtmlangularjslogin
16
iCode

Je sais que cela fait plus de 2 ans et je suis sûr que vous avez peut-être dépassé ce stade, mais je vais vous dire comment je me suis comporté étant donné que j'ai une configuration similaire. Tout faire du côté client ne le fera pas pour vous. Vous devez décharger une partie de cette logique de routage sur le serveur. D'autres pourraient suggérer d'utiliser une seule application ng dans votre application, mais pour moi ce n'était pas une obligation. une application multiple était une nécessité.

Mon application consistait en 6 applications ng partageant certains modules et services communs. chacun avec sa propre responsabilité, par exemple, j'en ai un comme le vôtre avec des vues pour la connexion, l'inscription et la réinitialisation du mot de passe, les autres étant des "applications protégées". 

Le truc pour faire fonctionner le mien était avec la demande de connexion. Je ne retourne pas 200 json lors d'une connexion réussie du serveur, je redirige simplement vers la page principale, c'est-à-dire que je sers le ng-app principal protégé en cas de connexion réussie. Ensuite, je mets un cookie httpOnly avec les informations d’utilisateur sérialisées sous la forme d’une chaîne JWT. 

Le point essentiel est ... traitez chaque application angulaire comme une page et demandez à votre code côté serveur de décider quoi afficher en fonction de vos règles d'authentification.

J'espère que cela aide tous ceux qui utilisent un modèle :)

6
shanks

Nous pouvons ajouter beaucoup de balises ng-view dans autant de div, mais cela collera toutes les routes à coller dans le dom.

1
Divyank Shukla

Comme je le sais, un seul ng-app peut être utilisé par document html et il en va de même pour le ng-view également . L’idée que je vous suggérerais d’utiliser $routeProvider pour naviguer entre les pages de l’application. 

Utilisez services pour avoir les informations de connexion de l'utilisateur et aussi ng-show/ng-hide pour leur montrer des pages particulières en fonction de leur état de connexion.

0
Jayram Singh