AngularJS - 登录后路由到不同 ng-app 模块的另一个页面 - IT屋-程序员软件开发技术分享社区
首页 前端开发 AngularJS - 登录后路由到不同 ng-app 模块的另一个页面
AngularJS - 登录后路由到不同 ng-app 模块的另一个页面
[英] AngularJS - Route to another page of different ng-app module after login
本文介绍了AngularJS - 登录后路由到不同 ng-app 模块的另一个页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我只有 AngularJS 的基本知识.我已经创建了一个 AngularJS 应用程序.
index.html 有登录和注册两个链接.用 ng-view.默认情况下，登录是视图.在登录视图中，我有表单.这将发布到 servlet 并返回带有对象的状态.我有另一个页面 home.html wis=ch 有它自己的 ng-app 模块.登录成功后，我想路由到home.html pgae.它还有两个链接和一个用于显示链接的 ng-view.
index.html
<html lang="zh-cn"><头><title>登录 - 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><body data-ng-app="sampleApp"><div class="索引容器"><div class="row"><div class=""><ul class="nav"><li><a href="#login">登录</a></li><li><a href="#register">查看1</a></li> <div class="loginView"><div ng-view></div>
</html>login.html
登录 <form ng-submit="loginUser()"><字段集><legend>登录</legend><标签>名称:</label><input type="text" id="name" name="name"ng-model="user.name" placeholder="用户名" required="required"><br><label>密码:</label><输入类型="密码" id="密码" 名称="密码"ng-model="user.password" placeholder="你的密码"必需=必需"><br><button class="btn btn-primary">登录</button><br/></fieldset><label>{{user.status}}</label></表单>app.js
//为应用定义路由angular.module('sampleApp', []).config(['$routeProvider',功能($routeProvider，$locationProvider){$routeProvider.when('/登录', {templateUrl: 'login.html',控制器:'登录控制器'}).when('/注册', {templateUrl: 'register.html',控制器:'注册控制器'}).除此以外({重定向到:'/登录'});//$locationProvider.html5Mode(true);//从URL中删除'#'.}]);//首页模块angular.module('homeApp', []).config(['$routeProvider',功能($routeProvider，$locationProvider){$routeProvider.when('/家', {模板网址:'home.html'}).when('/个人资料', {templateUrl: 'profile.html',控制器:'配置文件控制器'}).when('/设置', {templateUrl: 'settings.html',控制器:'设置控制器'}).除此以外({重定向到:'/home'});//$locationProvider.html5Mode(true);}]);LoginController (有登录和注册.我只实现了登录)
angular.module('sampleApp').controller('LoginController', function($scope,$location,$http) {$scope.user = {};$scope.loginUser = function(){$http({方法:'POST'，url: 'http://localhost:8080/AngularJSLogin/login',标头:{'内容类型':'应用程序/json'}，数据:$scope.user}).成功(功能(数据){var strJSON=数据；if(strJSON.status=="成功"){警报(成功")；$location.path( "/home" );}别的{$scope.user.status=strJSON.userId+" : "+strJSON.status;}});};});angular.module('sampleApp').controller('RegisterController', function($scope,$location,$http) {$scope.user = {};});home.html
<html lang="zh-cn"><头><title>登录 - 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><body data-ng-app="homeApp"><div class="容器"><div class="row homeTitle"><div class="用户名"><h3>{{user.name}}</h3><div class="homeMenu"><ul class="nav"><li><a href="#profile">配置文件</a></li><li><a href="#settings">设置</a></li>
<div class=""><div ng-view></div>
</html>
每个链接都有自己的控制器.
当我使用有效的用户名和密码点击登录按钮时，它会提示成功 ，但不会进入主页 (home.html) 页面.
如何路由到具有不同 ng-app 模块的不同页面?以及如何将这个 User 对象传递给 home.html ng-app 模块，以便它可以拥有用户数据并显示用户名和其他值?
解决方案
我知道这已经超过 2 年了，我相信你可能已经过去了，但我要告诉你我是如何做到的类似的设置.在客户端做所有事情不会为你做.您需要将某些路由逻辑卸载到服务器端.其他人可能会建议在整个应用程序中只使用一个 ng-app，但对我来说这不是必需的.多应用是必要的.
我的应用程序由 6 个共享一些通用模块和服务的 ng-apps 组成.每个人都有自己的责任，例如我有一个像你一样的人有登录、注册和密码重置的观点，而其他人是受保护的 ng-apps".
让我工作的诀窍是登录请求.从服务器成功登录后，我不会返回 200 json，我只是重定向到主页，即我在成功登录时提供受保护的主 ng-app.然后我设置了一个 httpOnly Cookie，并将用户信息序列化为 JWT 字符串.
重点是...将每个 Angular 应用程序视为一页，并让您的服务器端代码根据您的身份验证规则决定要显示的内容.
希望这对使用模型的人有所帮助:)
I have a basic knowledge of AngularJS only. I have created one AngularJS application.
index.html has two links for login and register. With ng-view. By default, login is the view. In the login view I have form. That will be posting to servlet and return the status with object. I have another page home.html wis=ch has its own ng-app module. When the login is success, I want to route to home.html pgae. It also has two links and one ng-view to display the links.
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 (has both login and register. I have implemented only for 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>
Each link has its own controllers.
When I click on the login button with valid username and pasword, It is alerting with Success , but not going to the home (home.html) page.
How can I route to a different page that has different ng-app module from another one? And also how to pass this User object to home.html ng-app module, so it can have user data and display the user name, and other values?
解决方案
I know this is over 2 years old and i'm sure you might have moved past this but i'm going to tell you how i did as i have a similar set up. Doing everything on the client side wont do it for you. You need to offload some of that routing logic to the server-side. Others might be suggesting using only one ng-app throughout your application but for me that was not a requirement. multi app was a necessity.
My application consisted of 6 ng-apps sharing some common modules and services. each with its own responsibility for e.g I had one like yours with views for login, signup and password-reset while the others were "protected ng-apps".
The trick to get mine working was with the login request. I dont return 200 json back on successful login from the server, I just redirect to the main page i.e I serve the protected main ng-app on successful login. Then i set a httpOnly Cookie with the user information serialized as a JWT String.
Point is...treat every angular application as one page and have your server-side code decide what to show based on your auth rules.
Hope this helps anyone using model :)
这篇关于AngularJS - 登录后路由到不同 ng-app 模块的另一个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
