iCo*_*ode 16 html javascript login angularjs
我只掌握AngularJS的基本知识.我创建了一个AngularJS应用程序.
index.html有两个用于登录和注册的链接.使用ng-view.默认情况下,login是视图.在登录视图中,我有表单.这将发布到servlet并返回对象的状态.我有另一页home.html wis = ch有自己的ng-app模块.登录成功后,我想路由到home.html pgae.它还有两个链接和一个ng-view来显示链接.
的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(既有登录又有注册.我只实现了登录)
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>
每个链接都有自己的控制器.
当我点击具有有效用户名和密码的登录按钮时,它会显示成功警报,但不会进入主页(home.html)页面.
如何路由到另一个具有不同ng-app模块的页面？以及如何将此User对象传递给home.html ng-app模块,以便它可以拥有用户数据并显示用户名和其他值？
我知道这已经超过2岁了,我相信你可能已经过了这个但我会告诉你我是怎么做的,因为我有类似的设置.在客户端做一切都不会为你做.您需要将一些路由逻辑卸载到服务器端.其他人可能建议在整个应用程序中只使用一个ng-app,但对我来说这不是必需的.多应用程序是必需的.
我的应用程序包括6 ng-apps共享一些常见的模块和服务.每个人都有自己的责任,例如我有一个像你一样有登录,注册和密码重置的视图,而其他人是"受保护的ng-apps".
让我的工作工作的诀窍是登录请求.我从服务器成功登录时没有返回200 json,我只是重定向到主页,即我成功登录时提供受保护的主要ng-app.然后我设置一个httpOnly Cookie,用户信息序列化为JWT字符串.
Point is ...将每个角度应用程序视为一个页面,并让您的服务器端代码根据您的身份验证规则决定要显示的内容.
希望这有助于任何人使用模型:)
据我所知，ng-app每个 html 文档只能使用一个，对于 html 文档也是如此ng-view。我建议您使用这个想法$routeProvider在应用程序的页面之间进行导航。
用于services获取用户的登录信息，并且还必须ng-show/ng-hide根据他们的登录状态向他们显示特定页面。