我想创建一个独立的登录页面,如果我成功,那么我只想重定向到路由提供者页面并运行应用程序。
我尝试将登录页面设为默认页面(如下面的代码所示),但从长远来看,这不是一个解决方案,只是为今天解决。
类似主题 - 1. Redirect if login is correct
我不知道如何使用离子框架,如果你建议请解释
这里是代码(route-provider.js)
(function(){
angular.module("EHS-App").config(function($routeProvider,
$locationProvider)
{
$routeProvider
.when("/", {
templateUrl : "../view/region_selection.html",
controller : "regionSelectionController"
})
.when("/uploadData", {
templateUrl : "../view/upload_data.html",
controller : "uploadDataController"
})
.when("/LogOut", {
templateUrl : "../view/LogOut.html",
controller : "logoutController"
})
.when("/login", {
templateUrl : "../view/login.html",
controller : "loginController"
})
.when("/dashboard", {
templateUrl : "../view/dashboard.html",
controller : "dashboardController"
})
.otherwise({
redirectTo:'/'
});
$locationProvider.html5Mode(true);
});
angular.module("EHS-App").run(function($rootScope) {
$rootScope.$on( "$routeChangeStart", function(event, next, current) {
if(next.$$route.originalPath == "/"){
} else if(next.$$route.originalPath == "/dashboard"){
}
});
});
}());
Home.html中
<nav class="navbar navbar-inverse navbar-fixed-top" >
<div class="container-fluid" >
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar">
</span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">abcd</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown" uib-dropdown>
<a href="" id="overviews" class="dropdown-toggle"
uib-dropdown-toggle aria-haspopup="true" aria-
expanded="false">
Overviews <span class="caret"></span>
</a>
<ul class="dropdown-menu" uib-dropdown-menu aria-
labelledby="overviews">
<li><a href="#!abcd">abcd</a></li>
</ul>
</li>
<li class="dropdown" uib-dropdown>
<a href="" id="goals" class="dropdown-toggle" uib-
dropdown-toggle aria-haspopup="true"
aria-expanded="false">Goals <span class="caret">
</span></a>
<ul class="dropdown-menu" uib-dropdown-menu aria-
labelledby="goals">
<li><a href="#">Goal Builder</a></li>
<li><a href="#">Customize Goal</a></li>
</ul></li>
<li class="dropdown" uib-dropdown>
<a href="" id="measures" class="dropdown-toggle"
uib-dropdown-toggle aria-haspopup="true"
aria-expanded="false">Measures <span class="caret">
</span></a>
<ul class="dropdown-menu" uib-dropdown-menu aria-
labelledby="measures">
<li><a href="#">Add new</a></li>
</ul></li>
<li class="dropdown" uib-dropdown>
<a href="" id="abcd" class="dropdown-toggle" uib-
dropdown-toggle aria-haspopup="true"
aria-expanded="false">Forecasting <span
class="caret"></span></a>
<ul class="dropdown-menu" uib-dropdown-menu aria-
labelledby="abcd">
<li><a href="#">Create New</a></li>
</ul></li>
<li><a href="#about">Report</a></li>
<li><a href="#contact">Administration</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" data-ng-model = "Dropdown"
role="button" aria-haspopup="true"
aria-expanded="false">{{username}} <span
class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">View Profile</a></li>
<li><a href="#">Change Password</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">More</li>
<li><a href="#!login" >login</a></li>
<li><a href="#!LogOut" type = "button" data-ng-
click= "showAlert()">LogOut</a></li>
</ul></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
的login.html
<div id="parent">
<div data-ng-show="error" class="alert alert-danger">{{error}}</div>
<form name="form" id="form_login" data-ng-submit="login()" role="form" autocomplete="off">
<div class="container" ><br>
<br>
<br>
<label><b><b>Username</b></b></label>
<input type="text" placeholder="Enter Username" name="uname" data-ng-
model="username" required><br>
<span data-ng-show="form.username.$dirty && form.username.$error.required"
class="help-block">Username is required</span>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" data-ng-
model="password" name="psw" required><br>
<span data-ng-show="form.password.$dirty &&
form.password.$error.required" class="help-block">Password is
required</span>
<button type="submit" data-ng-disabled="form.$invalid || dataLoading"
data-ng-click="validUser()" class="btn btn-danger">Login</button><br>
<input type="checkbox" checked="checked"> Remember me<br>
{{message}}
</div>
<div class="container" >
<button type="button" data-ng-click="reset()" >RESET</button>
</div>
</form>
</div>
登录控制器
angular.module("abcd-App").controller("loginController",
function($scope,$timeout, $location, $http, $location, $window) {
$scope.validUser = function(){
if($scope.username != $scope.password)
{$scope.message = "authentication unsuccessful, Please try
again!";}
else
{$scope.message = "authentication successful, You will now be
redirected in 3 seconds";
$timeout(function() {
$location.path('/home');
}, 3000);
}
}
$scope.reset = function(){
$scope.username = "";
$scope.password = "";
};
});