Почему мой вид входа в систему angularJS не отображается?
По некоторым причинам представление в моем index.html не будет отображать мое представление login.html вообще. Может быть проблема маршрутизации. Я не очень понимаю, как использовать маршрутизацию, но я думаю, что я делаю это правильно.
index.html
Комментарий:
Index.html будет содержать ng-app с именем app, и я буду переключать представления в зависимости от того, что в данный момент делает мое приложение. По умолчанию идея состоит в том, чтобы ВСЕГДА показывать экран входа в систему (view: login.html) с сообщением в нижней части этого представления для ссылки на представление реестра (view: register.html). После того, как пользователь войдет в систему, представление изменится на экран пользователя, показывающий входящие сообщения чата (это еще не реализовано, но я хотел бы получить несколько советов, потому что я только что запустил angularJS). Если пользователь щелкает ссылку регистрации, чтобы перевести пользователя в представление реестра (view: register.html), у него будет возможность зарегистрироваться.
В настоящее время моя проблема заключается в том, что форма входа не отображается автоматически при переходе к https://linus.highpoint.edu/~tferguson/research_project/app/
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="../angular-1.5.8/angular.js"></script>
<script src="../angular-1.5.8/angular-route.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div id="header">
<h1>My AngularJS App</h1>
</div>
<div id="mainBody">
<h1>Body of AngularJS App</h1>
<div ng-view>
<!--
The login view will be here by default to force login.
login.html holds this form.
Once user provides a valid login, I want the view to
change to an inbox for messages for a chat app between
users that can register and stored in a database accessed
through php.
Still working on this part.
-->
</div>
</div>
<div id="footer">
</div>
</body>
</html>
login.html
Комментарий:
Это представление должно отображаться по умолчанию в index.html ng-view div. Но это не так, Я подозреваю, что это из-за моего файла controller.js и что я могу неправильно маршрутизировать.
<div id="login" ng-controller="loginCtrl">
<form name="loginForm">
Username: <input type="text" name="username" id="username" ng-model="user.username" required=""/>
<br />
<div ng-show="loginForm.$submitted || loginForm.username.$touched">
<span ng-show="loginForm.username.$error.required">Enter your username/email.</span>
<span ng-show="loginForm.username.$error.email">This is not a valid email.</span>
</div>
Password: <input type="password" name="password" id="password" ng-model="user.password" required=""/>
<br />
<div ng-show="loginForm.$submitted || loginForm.password.$touched">
<span ng-show="loginForm.password.$error.required">Enter your password.</span>
</div>
<button type="submit" ng-click="checkLogin()">Login</button>
<span>{{ loginMsg }}</span>
</form>
<a href="#register">Register</a>
</div>
register.html
Комментарий:
Вероятно, не обязательно показывать это представление, но я думаю, что оно помогает предоставить некоторый контекст о том, как именно должно работать мое приложение.
<div id="register" ng-controller="registerCtrl">
<form name="registerForm">
First Name: <input type="text" name="FirstName" id="FirstName" ng-model="new_user.FirstName" required=""/>
<br />
<div ng-show="registerForm.$submitted || registerForm.FirstName.$touched">
<span ng-show="registerForm.FirstName.$error.required">Enter your First Name.</span>
</div>
Last Name: <input type="text" name="LastName" id="LastName" ng-model="new_user.LastName" required=""/>
<br />
<div ng-show="registerForm.$submitted || registerForm.LastName.$touched">
<span ng-show="registerForm.LastName.$error.required">Enter your username/email.</span>
</div>
Username(Your Email): <input type="text" name="Email" id="Email" ng-model="new_user.Email" required=""/>
<br />
<div ng-show="registerForm.$submitted || registerForm.Email.$touched">
<span ng-show="registerForm.Email.$error.required">Enter your username/email.</span>
<span ng-show="loginForm.Email.$error.email">This is not a valid email.</span>
</div>
Password: <input type="password" name="Pass" id="Pass" ng-model="new_user.Pass" required=""/>
<br />
<div ng-show="registerForm.$submitted || registerForm.Pass.$touched">
<span ng-show="registerForm.Pass.$error.required">Enter your password.</span>
</div>
Confirm Password: <input type="password" name="Pass2" id="Pass2" ng-model="new_user.Pass2" required=""/>
<br />
<div ng-show="registerForm.$submitted || registerForm.Pass2.$touched">
<span ng-show="registerForm.Pass2.$error.required">Confirm your password.</span>
</div>
<button type="submit" ng-click="register()">Register</button>
<span>{{ registerMsg }}</span>
</form>
<a href="#login">Login</a>
</div>
controller.js
Комментарий:
Я думаю, что моя маршрутизация здесь неверна. Я все еще новичок в angularJS и надеюсь, что смогу получить некоторую помощь о том, что я делаю неправильно и как это исправить. В моих контроллерах я также изменяю $ location, так что это также может быть подозрением. Другими подозрительными частями кода будут ссылки в нижней части представлений login.html и register.html. В основном подозреваю что-нибудь, где я возлюсь с маршрутизацией и расположением
Надеюсь я прав.
// Global
var checkVar;
// Apps
var app = angular.module("app", ["ngRoute"]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {templateUrl: "login.html", controller: "loginCtrl"})
.when("/register", {templateUrl: "register.html", controller: "registerCtrl"})
.otherwise({ redirectTo: "/index.html" });
});
// Controllers
app.controller("loginCtrl", function($scope, $location) {
$scope.checkLogin = function () {
$.post(
"login.php",
{
"Email" : $scope.username,
"Pass" : $scope.password
},
function (resJSONdata) {
var resData = $.parseJSON(resJSONdata);
if(resData.code == "1") {
// Go to messages.
$location.path("/user");
}
if(resData.code == "2") {
$scope.loginMsg = resData.msg;
}
}
)
}
});
Решение
связать это
.otherwise({ redirectTo: "/index.html" });
с этим,
.otherwise({ redirectTo: "/" });
потому что ваш логин маршрут «/«не»index.html«
Другие решения
Других решений пока нет …