本文介绍了一次又一次的棱角分明,页面加载的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有angularjs的一个简单的项目。
问题登录时,我重定向到的login.html后,它不断地发送请求和页面被一次又一次地重新加载
请帮忙以下是code
demoangular.js
<!DOCTYPE HTML>< HTML数据-NG-应用=customerApp>< HEAD> <标题>角JS< /标题> <脚本SRC =脚本/ jQuery的-1.8.2.min.js>< / SCRIPT> <脚本SRC =脚本/ angular.min.js>< / SCRIPT> <脚本SRC =脚本/角route.js>< / SCRIPT> <脚本SRC =脚本/ app.js>< / SCRIPT>< /头><身体GT; < DIV> < DIV数据-NG-视图=>< / DIV> < / DIV> <脚本> < / SCRIPT>< /身体GT;< / HTML>hello.html的
< H1>欢迎角度< / H1> <表ID =main的数据-NG-提交=登录()> <输入名称=名字ID =用户类型=文本数据-NG-模式=cardentials.username要求/> <输入名称=URLID =通TYPE =密码数据-NG-模式=cardentials.password要求/> <按钮和GT;新< /按钮> < /表及GT;logout.html
<脚本SRC =脚本/ jQuery的-1.8.2.js>< / SCRIPT> <脚本SRC =脚本/ angular.min.js>< / SCRIPT> <脚本SRC =脚本/ app.js>< / SCRIPT> <风格> #mydiv { 位置:绝对的; 顶部:0; 左:0; 宽度:100%; 高度:100%; 的z-index:1000; 背景颜色:灰色; 不透明度:0.8; } 阿贾克斯装载机{ 位置:绝对的; 左:50%; 顶部:50%; 保证金左:-32px; / * -1 *图像宽度/ 2 * / 的margin-top:-32px; / * -1 *图像高度/ 2 * / 显示:块; } < /风格> <按钮式=按钮数据-NG-点击=退出()>注销< /按钮> < DIV数据-NG-控制器=CustomersController级=容器> <强类=错误> {{错误}}< / STRONG> <! - < DIV ID =mydiv数据-NG-秀=加载> < IMG SRC =图像/ 482.gif级=AJAX装载/> < / DIV> - > < P数据-NG-隐藏=addMode> <数据-NG-点击=toggleAdd()的href =JavaScript的:;类=BTN BTN-主要>添加新< / A> &所述; / P> <表格名称=addCustomer数据-NG-秀=addMode的风格=WIDTH:600px的;保证金:0px auto的;> <标签>名称:LT; /标签><输入类型=文本数据-NG-模式=newcustomer.Name要求/> <标签>电子邮件:< /标签><输入类型=电子邮件数据-NG-模式=newcustomer.Email要求/> < BR /> <跨度类=错误数据-NG-秀=$ addCustomer error.email。>无效的电子邮件格式<!/ SPAN> < BR /> <输入类型=提交值=添加数据-NG-点击=增加()的数据-NG-禁用= CLASS =BTN BTN-主要/&GTaddCustomer $有效! <输入类型=按钮值=取消数据-NG-点击=toggleAdd()级=BTN BTN-主要/> < BR /> < BR /> < /表及GT; <表类=表表边框的表格悬停的风格=宽度:800像素> &所述; TR> <第i#ID< /第i <第i个姓名和LT; /第i <第i个电子邮件和LT; /第i 百分位>< /第i < / TR> &所述; TR> < TD>< / TD> &所述; TD> <输入类型=文本数据-NG-模式=search.Name/>< / TD> &所述; TD> <输入类型=文本数据-NG-模式=search.Email/>< / TD> < TD>< / TD> < / TR> < TR数据-NG-重复=客户的客户|过滤器:搜索> < TD><强大的数据NG隐藏=customer.editMode> {{客户。}}< / STRONG>< / TD> &所述; TD> < P数据-NG-隐藏=customer.editMode> {{customer.Name}}< / P> < P数据-NG-秀=customer.editMode> <输入类型=文本数据-NG-模式=customer.Name/> &所述; / P> < / TD> &所述; TD> < P数据-NG-隐藏=customer.editMode> {{customer.Email}}< / P> <输入数据-NG-秀=customer.editMode类型=文本数据-NG-模式=customer.Email/>< / TD> &所述; TD> < P数据-NG-隐藏=customer.editMode><数据-NG-点击=toggleEdit(客户)的href =JavaScript的:;>编辑< / A> | &下;一个数据纳克点击=delcustomer(客户)的href =JavaScript的:;>删除&下; / A>&下; / P> < P数据-NG-秀=customer.editMode><数据-NG-点击=保存(客户)的href =JavaScript的:;>保存< / A> | <数据-NG-点击=toggleEdit(客户)的href =JavaScript的:;>取消< / A>< / P> < / TD> < / TR> < /表> <小时/> < / DIV>app.js
VAR demoapp = angular.module('customerApp',['ngRoute']);demoapp.config(函数($ routeProvider){ $ routeProvider.when('/你好',{ 控制器:'SimpleController', templateUrl:'谐音/ hello.html的 }); $ routeProvider.when('/注销',{ 控制器:'newController', templateUrl:/logout.html }); $ routeProvider.otherwise({redirectTo:'/你好'});});demoapp.factory(authser功能($位置$ HTTP){ 返回{ 登录:功能(cardentials){ 如果(cardentials.username!=小额){ 警报(公司); } 其他{ $ location.path('/注销'); } }, 注销:功能(){ $ location.path('/你好'); } }})demoapp.controller('SimpleController',函数($范围,authser){ $ scope.cardentials = {用户名:密码:}; $ scope.login =功能(){ authser.login($ scope.cardentials); };});demoapp.controller('newController',函数($范围,authser){ $ scope.logout =功能(){ authser.logout(); };});VAR URL ='API /客户/';demoapp.factory('customerFactory',函数($ HTTP){ 返回{ getCustomer:功能(){ 返回$ http.get(URL); }, addCustomer:函数(客户){ 返回$ http.post(URL,客户); }, deleteCustomer:函数(客户){ 返回$ http.delete(URL + customer.CustomerID); }, updateCustomer:函数(客户){ 返回$ http.put(URL + customer.Id,客户); } };});demoapp.controller('CustomersController',功能PostsController($范围,customerFactory){ $ scope.customers = []; $ scope.loading = TRUE; $ scope.addMode = FALSE; $ scope.toggleEdit =功能(){ !this.customer.editMode = this.customer.editMode; }; $ scope.toggleAdd =功能(){ $ scope.addMode = $ scope.addMode!; }; $ scope.save =功能(){ //$scope.loading = TRUE; VAR卡斯特= this.customer; customerFactory.updateCustomer(卡斯特).success(功能(数据){ 警报(保存成功!); cust.editMode = FALSE; $ scope.loading = FALSE; })错误(功能(数据){ $ scope.error =发生错误,同时节省客户!+ data.ExceptionMessage; $ scope.loading = FALSE; }); }; //添加客户 $ scope.add =功能(){ $ scope.loading = TRUE; customerFactory.addCustomer(this.newcustomer).success(功能(数据){ 警报(添加成功!); $ scope.addMode = FALSE; $ scope.customers.push(数据); $ scope.loading = FALSE; })错误(功能(数据){ $ scope.error =,同时增加客户出错了!+ data.ExceptionMessage; $ scope.loading = FALSE; }); }; //删除客户 $ scope.delcustomer =功能(){ $ scope.loading = TRUE; VAR currentCustomer = this.customer; customerFactory.deleteCustomer(currentCustomer).success(功能(数据){ 警报(删除成功!); $。每个($ scope.customers,功能(我){ 如果($ scope.customers [I] .CustomerID === currentCustomer.CustomerID){ $ scope.customers.splice(I,1); 返回false; } }); $ scope.loading = FALSE; })错误(功能(数据){ $ scope.error =发生错误,同时节省客户!+ data.ExceptionMessage; $ scope.loading = FALSE; }); }; //获取所有客户 customerFactory.getCustomer()。成功(功能(数据){ $ scope.customers =数据; $ scope.loading = FALSE; }) .error(功能(数据){ $ scope.error =发生错误而载入站!+ data.ExceptionMessage; $ scope.loading = FALSE; });});解决方案
解决它
更新logout.html
@callmekatootie感谢您的帮助kudoo
<风格> #mydiv { 位置:绝对的; 顶部:0; 左:0; 宽度:100%; 高度:100%; 的z-index:1000; 背景颜色:灰色; 不透明度:0.8; } 阿贾克斯装载机{ 位置:绝对的; 左:50%; 顶部:50%; 保证金左:-32px; / * -1 *图像宽度/ 2 * / 的margin-top:-32px; / * -1 *图像高度/ 2 * / 显示:块; } < /风格> <按钮式=按钮数据-NG-点击=退出()>注销< /按钮> < DIV数据-NG-控制器=CustomersController级=容器> <强类=错误> {{错误}}< / STRONG> <! - < DIV ID =mydiv数据-NG-秀=加载> < IMG SRC =图像/ 482.gif级=AJAX装载/> < / DIV> - > < P数据-NG-隐藏=addMode> <数据-NG-点击=toggleAdd()的href =JavaScript的:;类=BTN BTN-主要>添加新< / A> &所述; / P> <表格名称=addCustomer数据-NG-秀=addMode的风格=WIDTH:600px的;保证金:0px auto的;> <标签>名称:LT; /标签><输入类型=文本数据-NG-模式=newcustomer.Name要求/> <标签>电子邮件:< /标签><输入类型=电子邮件数据-NG-模式=newcustomer.Email要求/> < BR /> <跨度类=错误数据-NG-秀=$ addCustomer error.email。>无效的电子邮件格式<!/ SPAN> < BR /> <输入类型=提交值=添加数据-NG-点击=增加()的数据-NG-禁用= CLASS =BTN BTN-主要/&GTaddCustomer $有效! <输入类型=按钮值=取消数据-NG-点击=toggleAdd()级=BTN BTN-主要/> < BR /> < BR /> < /表及GT; <表类=表表边框的表格悬停的风格=宽度:800像素> &所述; TR> <第i#ID< /第i <第i个姓名和LT; /第i <第i个电子邮件和LT; /第i 百分位>< /第i < / TR> &所述; TR> < TD>< / TD> &所述; TD> <输入类型=文本数据-NG-模式=search.Name/>< / TD> &所述; TD> <输入类型=文本数据-NG-模式=search.Email/>< / TD> < TD>< / TD> < / TR> < TR数据-NG-重复=客户的客户|过滤器:搜索> < TD><强大的数据NG隐藏=customer.editMode> {{客户。}}< / STRONG>< / TD> &所述; TD> < P数据-NG-隐藏=customer.editMode> {{customer.Name}}< / P> < P数据-NG-秀=customer.editMode> <输入类型=文本数据-NG-模式=customer.Name/> &所述; / P> < / TD> &所述; TD> < P数据-NG-隐藏=customer.editMode> {{customer.Email}}< / P> <输入数据-NG-秀=customer.editMode类型=文本数据-NG-模式=customer.Email/>< / TD> &所述; TD> < P数据-NG-隐藏=customer.editMode><数据-NG-点击=toggleEdit(客户)的href =JavaScript的:;>编辑< / A> | &下;一个数据纳克点击=delcustomer(客户)的href =JavaScript的:;>删除&下; / A>&下; / P> < P数据-NG-秀=customer.editMode><数据-NG-点击=保存(客户)的href =JavaScript的:;>保存< / A> | <数据-NG-点击=toggleEdit(客户)的href =JavaScript的:;>取消< / A>< / P> < / TD> < / TR> < /表> <小时/> < / DIV>i have a simple project of angularjs.
Problem after login when i redirected to login.html , it continuously sends request and page is reloaded again and again
please help following is code
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; }); });解决方案
Solved it
updated logout.html
@callmekatootie thanks for your help 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>
更多推荐
一次又一次的棱角分明,页面加载
发布评论