问题描述
我只有AngularJS的基本知识。我已创建了一个AngularJS应用。
I have a basic knowledge of AngularJS only. I have created one AngularJS application.
index.html的具有注册登录的两个环节。随着NG-视图。默认情况下,登录认为。在登录认为我有形式。这将被张贴到Servlet和与对象返回状态。我有另一页home.html的WIS = CH都有自己的NG-应用模块。当登录就是成功,我想路由到home.html做为pgae。它也有两个环节,一个NG-视图中显示的链接。
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 (同时具有注册登录的。我已经实现仅供登录)
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.
当我点击使用有效的用户名和pasword登录按钮,它与成功警报,但不会到户(home.html做为)页面。
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.
我怎样才能到,从另外一个都有不同的NG-应用模块不同页面的路线?以及如何通过这个用户对象home.html的NG-应用模块,所以它可以有用户数据并显示用户名和其他值?
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?
推荐答案
我们可以在尽可能多的div添加许多NG-视图标签,但它会粘贴任何授权途径被粘贴到DOM。
We can add many ng-view tags in as many div but it will paste whatever routes mandate to be pasted to the dom.
这篇关于AngularJS - 路线,以登录后不同的NG-应用模块的另一页的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!