一次又一次的棱角分明,页面加载

编程入门 行业动态 更新时间:2024-10-26 13:21:04
本文介绍了一次又一次的棱角分明,页面加载的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

我有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;    < D​​IV>        < D​​IV数据-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-点击=退出()>注销< /按钮>    < D​​IV数据-NG-控制器=CustomersController级=容器>        <强类=错误> {{错误}}< / STRONG>        <! - < D​​IV 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-点击=退出()>注销< /按钮>    < D​​IV数据-NG-控制器=CustomersController级=容器>        <强类=错误> {{错误}}< / STRONG>        <! - < D​​IV 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>

更多推荐

一次又一次的棱角分明,页面加载

本文发布于:2023-11-27 23:53:27,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1640116.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:棱角   分明   加载   页面

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!