我有一个简单的angularjs项目。
问题 登录后，当我重定向到login.html时，它会不断发送请求，并且页面会一次又一次地重新加载
请帮助以下是代码
demoangular.js
<!DOCTYPE html>
<html data-ng-app="customerApp">
<head>
<title>Angular js</title>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="Scripts/app.js"></script>
</head>
<body>
<div>
<div data-ng-view=""></div>
</div>
<script>
</script>
</body>
</html>
hello.html的
<h1>Welcome To Angular</h1>
<form id="main" data-ng-submit="login()">
<input name="name" id="user" type="text" data-ng-model="cardentials.username" required />
<input name="url" id="pass" type="password" data-ng-model="cardentials.password" required />
<button>new</button>
</form>
logout.html
<script src="Scripts/jquery-1.8.2.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/app.js"></script>
<style>
#mydiv {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: grey;
opacity: .8;
}
.ajax-loader {
position: absolute;
left: 50%;
top: 50%;
margin-left: -32px; /* -1 * image width / 2 */
margin-top: -32px; /* -1 * image height / 2 */
display: block;
}
</style>
<button type="button" data-ng-click="logout()">logout</button>
<div data-ng-controller="CustomersController" class="container">
<strong class="error">{{ error }}</strong>
<!--<div id="mydiv" data-ng-show="loading">
<img src="Images/482.gif" class="ajax-loader" />
</div>-->
<p data-ng-hide="addMode">
<a data-ng-click="toggleAdd()" href="javascript:;" class="btn btn-primary">Add New</a>
</p>
<form name="addCustomer" data-ng-show="addMode" style="width: 600px; margin: 0px auto;">
<label>Name:</label><input type="text" data-ng-model="newcustomer.Name" required />
<label>Email:</label><input type="email" data-ng-model="newcustomer.Email" required />
<br />
<span class="error" data-ng-show="addCustomer.$error.email">Invalid Email format!</span>
<br />
<input type="submit" value="Add" data-ng-click="add()" data-ng-disabled="!addCustomer.$valid" class="btn btn-primary" />
<input type="button" value="Cancel" data-ng-click="toggleAdd()" class="btn btn-primary" />
<br />
<br />
</form>
<table class="table table-bordered table-hover" style="width: 800px">
<tr>
<th>#id</th>
<th>Name</th>
<th>Email</th>
<th></th>
</tr>
<tr>
<td></td>
<td>
<input type="text" data-ng-model="search.Name" /></td>
<td>
<input type="text" data-ng-model="search.Email" /></td>
<td></td>
</tr>
<tr data-ng-repeat="customer in customers | filter:search">
<td><strong data-ng-hide="customer.editMode">{{ customer.CustomerID }}</strong></td>
<td>
<p data-ng-hide="customer.editMode">{{ customer.Name }}</p>
<p data-ng-show="customer.editMode">
<input type="text" data-ng-model="customer.Name" />
</p>
</td>
<td>
<p data-ng-hide="customer.editMode">{{ customer.Email }}</p>
<input data-ng-show="customer.editMode" type="text" data-ng-model="customer.Email" /></td>
<td>
<p data-ng-hide="customer.editMode"><a data-ng-click="toggleEdit(customer)" href="javascript:;">Edit</a> | <a data-ng-click="delcustomer(customer)" href="javascript:;">Delete</a></p>
<p data-ng-show="customer.editMode"><a data-ng-click="save(customer)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(customer)" href="javascript:;">Cancel</a></p>
</td>
</tr>
</table>
<hr />
</div>
app.js
var demoapp = angular.module('customerApp', ['ngRoute']);
demoapp.config(function ($routeProvider) {
$routeProvider.when('/hello', {
controller: 'SimpleController',
templateUrl: 'partials/hello.html'
});
$routeProvider.when('/logout', {
controller: 'newController',
templateUrl: '/logout.html'
});
$routeProvider.otherwise({ redirectTo: '/hello' });
});
demoapp.factory("authser", function ($location, $http) {
return {
login: function (cardentials) {
if (cardentials.username != "jot") {
alert("its ");
}
else {
$location.path('/logout');
}
},
logout: function () {
$location.path('/hello');
}
}
})
demoapp.controller('SimpleController', function ($scope, authser) {
$scope.cardentials = { username: "", password: "" };
$scope.login = function () {
authser.login($scope.cardentials);
};
});
demoapp.controller('newController', function ($scope, authser) {
$scope.logout = function () {
authser.logout();
};
});
var url = 'api/Customers/';
demoapp.factory('customerFactory', function ($http) {
return {
getCustomer: function () {
return $http.get(url);
},
addCustomer: function (customer) {
return $http.post(url, customer);
},
deleteCustomer: function (customer) {
return $http.delete(url + customer.CustomerID);
},
updateCustomer: function (customer) {
return $http.put(url + customer.Id, customer);
}
};
});
demoapp.controller('CustomersController', function PostsController($scope, customerFactory) {
$scope.customers = [];
$scope.loading = true;
$scope.addMode = false;
$scope.toggleEdit = function () {
this.customer.editMode = !this.customer.editMode;
};
$scope.toggleAdd = function () {
$scope.addMode = !$scope.addMode;
};
$scope.save = function () {
//$scope.loading = true;
var cust = this.customer;
customerFactory.updateCustomer(cust).success(function (data) {
alert("Saved Successfully!!");
cust.editMode = false;
$scope.loading = false;
}).error(function (data) {
$scope.error = "An Error has occured while Saving customer! " + data.ExceptionMessage;
$scope.loading = false;
});
};
// add Customer
$scope.add = function () {
$scope.loading = true;
customerFactory.addCustomer(this.newcustomer).success(function (data) {
alert("Added Successfully!!");
$scope.addMode = false;
$scope.customers.push(data);
$scope.loading = false;
}).error(function (data) {
$scope.error = "An Error has occured while Adding customer! " + data.ExceptionMessage;
$scope.loading = false;
});
};
// delete Customer
$scope.delcustomer = function () {
$scope.loading = true;
var currentCustomer = this.customer;
customerFactory.deleteCustomer(currentCustomer).success(function (data) {
alert("Deleted Successfully!!");
$.each($scope.customers, function (i) {
if ($scope.customers[i].CustomerID === currentCustomer.CustomerID) {
$scope.customers.splice(i, 1);
return false;
}
});
$scope.loading = false;
}).error(function (data) {
$scope.error = "An Error has occured while Saving customer! " + data.ExceptionMessage;
$scope.loading = false;
});
};
//get all Customers
customerFactory.getCustomer().success(function (data) {
$scope.customers = data;
$scope.loading = false;
})
.error(function (data) {
$scope.error = "An Error has occured while loading posts! " + data.ExceptionMessage;
$scope.loading = false;
});
});
答案 0 :(得分：0)
解决了它
更新了logout.html
@callmekatootie感谢您的帮助 kudoo
<style>
#mydiv {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: grey;
opacity: .8;
}
.ajax-loader {
position: absolute;
left: 50%;
top: 50%;
margin-left: -32px; /* -1 * image width / 2 */
margin-top: -32px; /* -1 * image height / 2 */
display: block;
}
</style>
<button type="button" data-ng-click="logout()">logout</button>
<div data-ng-controller="CustomersController" class="container">
<strong class="error">{{ error }}</strong>
<!--<div id="mydiv" data-ng-show="loading">
<img src="Images/482.gif" class="ajax-loader" />
</div>-->
<p data-ng-hide="addMode">
<a data-ng-click="toggleAdd()" href="javascript:;" class="btn btn-primary">Add New</a>
</p>
<form name="addCustomer" data-ng-show="addMode" style="width: 600px; margin: 0px auto;">
<label>Name:</label><input type="text" data-ng-model="newcustomer.Name" required />
<label>Email:</label><input type="email" data-ng-model="newcustomer.Email" required />
<br />
<span class="error" data-ng-show="addCustomer.$error.email">Invalid Email format!</span>
<br />
<input type="submit" value="Add" data-ng-click="add()" data-ng-disabled="!addCustomer.$valid" class="btn btn-primary" />
<input type="button" value="Cancel" data-ng-click="toggleAdd()" class="btn btn-primary" />
<br />
<br />
</form>
<table class="table table-bordered table-hover" style="width: 800px">
<tr>
<th>#id</th>
<th>Name</th>
<th>Email</th>
<th></th>
</tr>
<tr>
<td></td>
<td>
<input type="text" data-ng-model="search.Name" /></td>
<td>
<input type="text" data-ng-model="search.Email" /></td>
<td></td>
</tr>
<tr data-ng-repeat="customer in customers | filter:search">
<td><strong data-ng-hide="customer.editMode">{{ customer.CustomerID }}</strong></td>
<td>
<p data-ng-hide="customer.editMode">{{ customer.Name }}</p>
<p data-ng-show="customer.editMode">
<input type="text" data-ng-model="customer.Name" />
</p>
</td>
<td>
<p data-ng-hide="customer.editMode">{{ customer.Email }}</p>
<input data-ng-show="customer.editMode" type="text" data-ng-model="customer.Email" /></td>
<td>
<p data-ng-hide="customer.editMode"><a data-ng-click="toggleEdit(customer)" href="javascript:;">Edit</a> | <a data-ng-click="delcustomer(customer)" href="javascript:;">Delete</a></p>
<p data-ng-show="customer.editMode"><a data-ng-click="save(customer)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(customer)" href="javascript:;">Cancel</a></p>
</td>
</tr>
</table>
<hr />
</div>