AngularJS - перейти на другую страницу с другим модулем ng-app после входа в систему
У меня есть базовое знание только AngularJS. Я создал одно приложение AngularJS.
index.html имеет две ссылки для входа и регистрации. С ng-view. По умолчанию логин - это представление. В окне входа у меня есть форма. Это будет публикация на сервлет и возвращение статуса с объектом. У меня есть другая страница 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 из другого? А также как передать этот пользовательский объект в home.html модуль ng-app, чтобы он мог иметь пользовательские данные и отображать имя пользователя и другие значения?
Ответы
Ответ 1
Я знаю, что это более двух лет, и я уверен, что вы могли бы пройти мимо этого, но я собираюсь рассказать вам, как я это сделал, поскольку у меня есть аналогичная настройка. Выполнение всего на стороне клиента не сделает это за вас. Вам необходимо разгрузить часть этой логики маршрутизации на стороне сервера. Другие могут предлагать использовать только одно ng-приложение во всем приложении, но для меня это не было обязательным требованием. необходимость использования нескольких приложений.
Мое приложение состояло из 6 ng-приложений, совместно использующих некоторые распространенные модули и сервисы. каждый из которых несет свою ответственность, например, у меня был такой же, как у вас, с представлениями для входа, регистрации и пароля - reset, в то время как остальные были "защищены ng-приложениями".
Трюк для работы с моей работой был с запросом на вход. Я не возвращаю 200 json обратно на успешный вход с сервера, я просто перенаправляюсь на главную страницу. Я обслуживаю защищенное основное ng-приложение при успешном входе в систему. Затем я устанавливаю HTTPOnly Cookie с информацией пользователя, сериализованной как JWT String.
Точка... обрабатывает каждое приложение angular как одну страницу, а ваш серверный код решает, что показывать на основе ваших правил auth.
Надеюсь, это поможет любому, кто использует модель:)
Ответ 2
Мы можем добавить много тегов ng-view в столько же div, но оно вставляет любой мандат маршрутов, который будет вставлен в dom.
Ответ 3
Как я знаю, только один ng-app может использоваться для каждого документа html, и это тоже верно для ng-view.
Идея, которую я предлагаю вам использовать $routeProvider для навигации между страницами приложения.
Используйте services, чтобы иметь информацию для входа пользователя, а также ng-show/ng-hide, чтобы показать им определенные страницы в зависимости от их состояния входа.
