AngularJS – Route vers une autre page du module ng-app différent après la connexion

J'ai seulement une connaissance fondamentale d'AngularJS. J'ai créé une application AngularJS.

Index.html dispose de deux liens pour vous connecter et vous inscrire. Avec ng-view. Par défaut, la connexion est la vue. Dans la vue de connexion, j'ai un formulaire. Cela affichera pour servir et retourne l'état avec l'objet. J'ai une autre page home.html wis = ch possède son propre module ng-app. Lorsque le login est un succès, je souhaite passer à home.html pgae. Il a également deux liens et une seule vue 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 (à la fois login et registre. Je n'ai implémenté que pour la connexion)

 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 possède ses propres contrôleurs.

Lorsque je clique sur le bouton de connexion avec un nom d'utilisateur et un mot de passe valides, il est en train d'alerter avec succès , mais pas sur la page d'accueil (home.html).

Comment puis-je passer à une autre page qui possède un module ng-app différent d'un autre? Et aussi comment passer cet objet Utilisateur à home.html ng-app module, donc il peut avoir des données utilisateur et afficher le nom d'utilisateur, et d'autres valeurs?

Je sais que c'est plus de 2 ans et je suis sûr que vous pourriez avoir dépassé cette étape, mais je vais vous dire comment j'ai fait que j'ai une configuration similaire. Tout faire sur le 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 l'utilisation d'une seule application ng dans votre application, mais pour moi ce n'était pas une exigence. L'application multi était une nécessité.

Mon application était composée de 6 ng-apps partageant certains modules et services communs. Chacun avec sa propre responsabilité, par exemple, j'avais un comme le vôtre avec des vues pour la connexion, l'inscription et la réinitialisation du mot de passe alors que les autres étaient des "applications protégées ng".

Le truc pour faire fonctionner les mines était avec la demande de connexion. Je ne renvoie pas 200 json à la connexion réussie du serveur, je reviens vers la page principale, c.-à-d. Je sert la ng-app principale protégée lors de la connexion réussie. Ensuite, j'ai configuré un cookie httpOnly avec les informations de l'utilisateur sérialisées en tant que Chaîne JWT.

Point est … traiter chaque application angulaire comme une page et faire en sorte que votre code côté serveur décide ce qu'il faut montrer en fonction de vos règles d'authentification.

J'espère que cela aide quelqu'un qui utilise le modèle 🙂

Nous pouvons ajouter de nombreuses images ng-view dans autant de div, mais elles colleront n'importe quel mandat d'itinéraire à coller au dom.

Comme je sais qu'une seule ng-app peut être utilisée par document html, la même chose est vraie pour la ng-view . L'idée que je vous suggère d'utiliser $routeProvider pour naviguer entre les pages de l'application.

Utilisez les services pour avoir les informations de connexion de l'utilisateur et également avoir ng-show/ng-hide pour les afficher sur des pages spécifiques en fonction de leur état de connexion.