1
Ich bin neu bei angularjs und ich habe eine Login-Seite erstellt.Wie bleibe ich auf der aktuellen Seite nach dem Aktualisieren der Seite in angularjs
Sobald ich mich angemeldet habe, wird es auf meine Homepage umleiten. wenn ich auf die Schaltfläche "Aktualisieren" klicke, bleibt sie nicht auf der aktuellen Seite, auf der sie sich einloggen wird.
Bitte kann mir jemand helfen.
Vielen Dank im Voraus.
Die unten ist mein Code i
login.view.html
<div class="page-wrapper">
<div class="main-wrapper bgm">
<div class="main">
<div class= "document-title"></div>
<div class="container">
<div class=" row">
<div class="col-md-4 col-md-offset-8">
<div class="panel panel-default">
<div class="panel-heading"><div class="logo text-center"><strong>Login</strong></div></div>
<div class="panel-body">
<div role="tabpanel" class="tab-pane active" id="personal">
<div class="row">
<div class="col-sm-12">
<form name="form" ng-submit="vm.login()" role="form">
<div class="form-group" ng-class="{ 'has-error': form.username.$dirty && form.username.$error.required }">
<label for="username">Email/UserName</label>
<input type="text" placeholder="Email/UserName" name="username" id="username" class="form-control" ng-model="vm.username" required />
<span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Email or username required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required }">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="password" ng-model="vm.password" required />
<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password required</span>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox"><label class=""><input type="checkbox" class="">Remember me</label></div>
</div>
</div>
<div class="form-actions">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-success btn-sm">Sign in</button>
<button type="reset" class="btn btn-default btn-sm">Reset</button>
<img ng-if="vm.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
</div>
</div>
</form>
</div>
</div><!-- /.row -->
</div><!-- /.tab-pane -->
</div><!-- panel body -->
<div class="panel-footer">
<div class="row">
<a href="#/resetpassword" class="btn btn-link">Forgot Password?</a>
</div><!-- row -->
</div><!-- panel footer -->
</div><!-- /.tab-panel default -->
</div> <!--col-md-4-->
</div><!-- /.row -->
</div><!-- /.container -->
</div><!-- /.main -->
</div><!-- /.main-wrapper -->
</div><!-- /.page-wrapper -->
home.view.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<title>Groupz</title>
</head>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
border-color: white;
height: 6em;
padding-top: 12px;
background-color: #2eb2f2;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {
height: 1000px
}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
canvas {
padding: 0 30px 0 0;
}
</style>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="img-responsive" src="css/images/Groupz.png" />
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<div class="nav navbar-nav navbar-right" style="padding-top:6px;">
<div class="dropdown">
<span class="badge">5</span><img style="padding-right:10px;" src="css/images/bell1.png" />
<img class="img-circle dropdown-toggle" data-toggle="dropdown" width="40" height="40" src="css/images/image.jpg" /><span class="caret dropdown-toggle" data-toggle="dropdown"></span>
<ul class="dropdown-menu">
<li><a href="#/login">Logout</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="container-fluid text-center" ng-controller="UserDataController as ctrl">
<div class="row content" style="margin-top:100px; color:rgba(51, 122, 183, 1);" ng-if="!model.displayHome">
<button ng-click="getData('json.json','','','GET')">Click to login</button>
</div>
<div class="row content" ng-if="model.displayHome">
<div class="col-sm-2 sidenav">
<div class="well well-lg col-xs-30" style="background-color: green;" ng-show="true">
<img class="img-responsive" style="padding-bottom:10px;" src="css/images/image.jpg" />
<div class="form-group">
<select class="form-control" ng-model="model.selectedValue" name="groupzname">
<option value='' disabled> Switch Account </option>
<option ng-repeat="item in model.dropDownData track by $index" value="{{item}}">{{item}}</option>
</select>
</div>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="#/dashboard"><span class="glyphicon glyphicon-dashboard vmenu"></span> Dashboard</a>
</li>
<li class="#/Profile"><a href="#/"><span class="glyphicon glyphicon-user vmenu"></span>Profile</a>
</li>
<li><a href="#/Account"><span class="glyphicon glyphicon-edit vmenu"></span>Account</a>
</li>
<li><a href="#/Dropbox"><span class="glyphicon glyphicon-tags vmenu"></span>Dropbox</a>
</li>
<li><a href="#/Checklist"><span class="glyphicon glyphicon-off vmenu"></span>Checklist</a>
</li>
<li><a href="#/Report"><span class="glyphicon glyphicon-off vmenu"></span>Report</a>
</li>
<li><a href="#/Settings"><span class="glyphicon glyphicon-off vmenu"></span>Settings</a>
</li>
<li><a href="#/Help"><span class="glyphicon glyphicon-off vmenu"></span>Help</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-8 text-left" ng-show="true">
<h1>Welcome</h1>
<div class="form-group">
<label class="form-control" ng-model="model.membervalue" name="membername" style="border:none"> {{model.membervalue}}</label>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Groupz</p>
</footer>
</body>
</html>
userdata.controller.js schrieb
(function() {
'use strict';
var app = angular.module('app');
app.controller('UserDataController', function($scope,$window,$http,$q) {
$scope.model = {
'displayHome' : false,
'dropDownData':[]
};
$scope.cookietechnology = $window.localStorage.x; //getting data from cookies
if($scope.cookietechnology){
$scope.model.dropDownData = $scope.cookietechnology;
$scope.model.selectedValue = $scope.cookietechnology;
$scope.model.displayHome = true;
}
$scope.getData = function(requestedUrl,requestHeader, requestData,requestMethod) {
$scope.model.dropDownData = [];
var deferred = $q.defer();
var req = {
method: requestMethod,
url: requestedUrl,
headers:{"Content-Type": "application/x-www-form-urlencoded"},
data: requestData
};
$http(req)
.success(function(response) {
var user = response.json.response.user;
console.log(user);
for(var i=0; i<user.length-1; i++)
{
console.log("datas : "+response.json.response.user[i].groupzname);
$scope.model.dropDownData.push(response.json.response.user[i].groupzname + " - "+response.json.response.user[i].membername); // we can itterate and set the drop down values
console.log($scope.model.dropDownData);
$scope.model.selectedValue = response.json.response.user[i].groupzname + " - " + response.json.response.user[i].membername; // set model value
$scope.model.membervalue = response.json.response.user[i].membername;
}
$window.localStorage.x = $scope.model.dropDownData; //setting data in cookies
$scope.model.displayHome = true; // variable to show and hide home and login
deferred.resolve(response);
})
.error(function(error) {
deferred.reject(error);
});
return deferred.promise;
};
});
})();
app.js
(function() {
'use strict';
angular
.module('app', ['ngRoute', 'ngCookies'])
.config(config)
.run(run);
config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
controller: 'UserDataController',
templateUrl: 'view/home.view.html',
controllerAs: 'vm'
})
.when('/admin', {
controller: 'HomeController',
templateUrl: 'view/adminhome.view.html',
controllerAs: 'vm'
})
.when('/userdata', {
controller: 'UserDataController',
templateUrl: 'view/profile.view.html',
controllerAs: 'vm'
})
.when('/login', {
controller: 'LoginController',
templateUrl: 'view/login.view.html',
controllerAs: 'vm'
})
.when('/resetpassword', {
controller: 'ResetPasswordController',
templateUrl: 'view/resetpassword.view.html',
controllerAs: 'vm'
})
.when('/resetpasswordmailsent',{
templateUrl: 'view/resetpasswordmailsent.view.html'
})
.when('/setnewpassword/:id', {
controller: 'SetNewPasswordController',
templateUrl: 'view/setnewpassword.view.html',
controllerAs: 'vm'
})
.when('/register', {
controller: 'RegisterController',
templateUrl: 'view/register.view.html',
controllerAs: 'vm'
})
.when('/afterregister', {
templateUrl: 'view/activationlinksent.view.html'
})
.when('/VerifyEmail/:id', {
controller: 'VerifyEmailController',
templateUrl: 'view/accountactivation.view.html',
controllerAs: 'vm'
})
.otherwise({ redirectTo: '/login' });
}
run.$inject = ['$rootScope', '$location', '$cookieStore', '$http'];
function run($rootScope, $location, $cookieStore, $http) {
// keep user logged in after page refresh
$rootScope.globals = $cookieStore.get('globals') || {};
$rootScope.globals = $cookieStore.get('groupzname') || {};
if ($rootScope.globals.currentUser) {
$http.defaults.headers.common['Authorization'] = 'Basic ' + $rootScope.globals.currentUser.authdata; // jshint ignore:line
}
$rootScope.$on('$locationChangeStart', function (event, next, current) {
// redirect to login page if not logged in and trying to access a restricted page
var restrictedPage = $.inArray($location.path(), ['/login', '/resetpassword','/register','/resetpasswordmailsent','/afterregister','/setnewpassword']) === -1;
var loggedIn = $rootScope.globals.currentUser;
if (restrictedPage && !loggedIn) {
$location.path('/login');
}
});
}
})();
Bitte mir helfen.
Muss ich $ localstorage.globals.currentUser anstelle von $ rootScope verwenden –
Es ist besser zu $ rootScope.globals.currentUser laden, wenn es in lokalen Speicher vorhanden ist, wenn die Anwendung gestartet wird. Dann können Sie in allen Controllern unter $ scope.globals.currentUser darauf zugreifen. –