Tag: 单页面应用程序

在ui-routerparsing过程中应用加载微调器: resolve $routeProvider属性允许在相应的视图被呈现之前执行一些工作。如果我想在执行这些作业时显示一个微调框以增加用户体验，该怎么办？事实上，否则用户会感觉到应用程序被阻塞，因为例如几毫秒没有显示视图元素。当然，还有一种方法可以从当前视图中定义一个全局的div元素来显示，以显示微调，这要感谢$scope.$rootChangeStart函数。但是我不想用一个可怜的微调来隐藏整个页面。我想我的web应用程序的一些页面加载显示的方式不同。我遇到了这个有趣的post，其中包含我上面描述的确切问题：这种方法导致了糟糕的UI体验。用户点击一个button来刷新列表或其他东西，整个屏幕被覆盖在一个通用的微调，因为库无法显示一个微调只是实际上受到状态改变影响的视图。不用了，谢谢。无论如何，在我提出这个问题之后，我意识到“解决”function是一种反模式。它等待所有的决心，然后animation状态的变化。这是完全错误的 – 你希望你的状态之间的过渡动画能够平行于你的数据加载，所以后者可以被前者掩盖。例如，假设你有一个项目列表，点击其中一个隐藏列表，并在不同的视图中显示项目的细节。如果我们对项目细节的asynchronous加载平均需要400毫秒，那么我们可以在大多数情况下通过在列表视图上有300毫秒的“离开”animation和300毫秒的“input”animation来掩盖负载在项目详细信息视图。这样我们就可以为UI提供一个柔和的感觉，并且可以避免在大多数情况下显示一个微调。但是，这要求我们同时启动asynchronous加载和状态更改animation。如果我们使用“parsing”，那么整个asynchronousanimation在animation开始之前发生。用户点击，看到一个微调，然后看到过渡animation。整个状态变化需要〜1000ms，太慢了。 “解决”可能是caching不同视图之间的依赖关系的一种有用的方法，如果它有select不等待承诺的话，但是当前的行为总是在状态改变开始之前解决它们使得它几乎没有用。应该避免涉及asynchronous加载的任何依赖性。我真的应该停止使用resolve来加载一些数据，而是直接开始将它们加载到相应的控制器中？这样，只要作业执行完毕，我就可以更新相应的视图，而且在视图中我想要的地方，而不是全局。

如何清除从先前访问到视图的observableArray的内容: 我有一个单页面应用程序使用淘汰赛的数据绑定。我的单页面应用程序中的CAApproval.html视图在viewmodel代码中有一个名为AllCertificates的可见arrays。它在页面上填充很好。当您通过单击navigation.html部分中的链接导航离开视图，然后返回到CAApproval页面时，来自previouse访问的值仍位于AllCertificates的observableArray中，因此显示在CAApproval视图中。每当用户返回到使用该可观察数组的CAApproval页面时，我需要清除AllCertificates的observablearray的内容，以便如果用户离开页面并返回，则observablearray的内容为空，因此不会显示数据屏幕。这里是我的viewmodel代码的亮点 – define(['services/logger', 'durandal/system', 'durandal/plugins/router', 'services/CertificateDataService','controls/Lucas'], function(logger, system, router, CertificateDataService) { var allCertificates = ko.observableArray([]); var activate = function () { // go get local data, if we have it return SelectAllCerts(),SelectMyCerts(), GetCertificateDetails(), GetDDABankNums(); }; var vm = { activate: activate, allCertificates: allCertificates, SelectAllCerts: SelectAllCerts }); return vm; function SelectAllCerts() […]

单页应用程序的用户身份validation？: 我开发了一个单一页面的应用程序原型，在前端使用Backbone，并从服务器上的精简RESTful API消耗数据。来自沉重的服务器端应用程序开发（PHP和Python），我真的很喜欢用厚的客户端MVC新的不同的devise方法，但很困惑如何最好的限制应用程序login身份validation的用户。我更喜欢将应用程序本身放在login后面，并且还希望除了站点的本地login之外，还最终实现其他types的login（openid，fb connect等）。我不清楚这是怎么做的，一直在寻找 – 但是找不到信息让我很清楚。总的来说，当前注册用户的最佳做法是什么，并要求他们login才能使用您的单页面应用程序？一旦用户login，api请求如何validation？我可以存储一个会话，但是如何在API调用中检测此会话，还是在每个API调用中都必须传递一个令牌？任何答案，将不胜感激！

为什么浏览器在经过validation的XMLHttpRequest之后不重复使用授权标头？: 我正在开发使用Angular的单页面应用程序。后端公开了需要基本身份validation的REST服务。获取index.html或任何脚本不需要身份validation。我有一个奇怪的情况，其中我的一个视图有一个<img>其中src是需要身份validation的REST API的URL。 <img>是由浏览器处理的，我没有机会为它所做的GET请求设置授权头。这会导致浏览器提示input凭据。我试图通过这样做来解决这个问题：在源代码中将img src留空在“文档准备好”时，使用授权标头对服务（ /api/login ）进行XMLHttpRequest ，以使authentication发生。在完成这个调用后，设置img src属性，认为到那时，浏览器将知道在随后的请求中包括授权标题… …但它不。对图像的请求不带标题。如果我input凭据，那么页面上的所有其他图像是正确的。（我也试过和Angular的ng-src但是产生了相同的结果）我有两个问题：为什么浏览器（IE10）在成功的XMLHttpRequest之后在所有请求中包含头文件？我能做些什么来解决这个问题？ @bergi询问了请求的详细信息。他们来了。请求/ api /login GET https://myserver/dev30281_WebServices/api/login HTTP/1.1 Accept: */* Authorization: Basic <header here> Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.2; WOW64; Trident/6.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; […]

单页面应用程序的可访问性（ARIA等）: 什么是最好的方法，使SPA（AngularJS）无障碍（屏幕阅读器等）？我对于咏叹调的规范几乎没有经验，我不知道它是否会在一个单一的页面应用程序工作。发展中常见的缺陷是什么？在开发时如何debugging和testing可访问性？

在不违反RESTful原则的情况下对Angular进行身份validation和授权的最佳实践？: 长时间的粉丝，第一次的海报:) 我已经阅读了很多关于使用REST和Angular进行身份validation和授权的线程，但是我仍然不觉得我有一个很好的解决scheme来实现我所希望的。对于一些背景，我打算在AngularJS中构build一个我想要支持的应用程序：有限的访客一旦通过身份validation，即可对基于angular色的应用程通过API进行身份validation 所有对REST API的调用都需要通过SSL进行。我希望在不破坏RESTful原则的情况下构build应用程序，即不会将会话状态保存在服务器上。当然，无论在服务器端如何进行客户端的授权，都必须加强。由于我们需要传递每个请求的整个状态，我知道我需要传递某种令牌，以便接收REST请求的后端服务器既可以对呼叫进行身份validation，也可以对其进行授权。这就是说，我的主要问题是身份validation – 这里最好的做法是什么？似乎有很多不同的方法讨论，这里只是我发现的几个： http://broadcast.oreilly.com/2009/12/principles-for-standardized-rest-authentication.html http://frederiknakstad.com/2013/01/21/authentication-in-single-page-applications-with-angular-js/ http://docs.aws.amazon.com/AmazonS3/latest/dev/RESTAuthentication.html 有一个类似的问题（ AngularJS最佳实践应用程序authentication ），但除非我误解了答案，这似乎意味着应该使用服务器会话，这是违反RESTful原则。我对Amazon AWS和George Reese的文章主要关注的是，似乎认为消费者是一个程序，而不是最终用户。一个共享的秘密可以提前发给程序员，然后他们可以用它来编码调用。这不是这种情况 – 我需要代表用户从应用程序调用REST API。这种方法是否足够？假设我有一个会话资源： POST / api /会话为用户创build一个新的会话要创build会话，您需要发布一个包含“用户名”和“密码”的JSON对象。 { "email" : "austen@example.com", "password" : "password" } curl示例 curl -v -X POST –data '{"username":"austen@example.com","password":"password"}' "https://app.example.com/api/session" –header "Content-Type:application/json" […]

如何压缩URL参数: 假设我有一个使用第三方API进行内容的单页应用程序。该应用程序的逻辑仅在浏览器中，并且没有可以写入的后端。为了允许深入链接到应用程序的状态，我使用pushState来跟踪确定应用程序状态的一些variables（请注意，Ubersicht的公开版本尚未执行此操作）。在这种情况下， show_open ， labels ， milestones和username ， show_open （布尔）和with_comments （布尔）和with_comments （布尔）。 url格式是?label=label_1,label_2,label_3&repos=repo_1… 值通常是犯罪嫌疑人，粗略[a-zA-Z][a-zA-Z0-9_-]或任何布尔指标。到现在为止还挺好。现在，由于查询string可能有点长，笨重，我想能够传递像http://espy.github.io/ubersicht/?state=SOMOPAQUETOKENTHATLOSSLESSLYDECOMPRESSESINTOTHEORIGINALVALUES#hoodiehqurl，越短越好。我第一次尝试是使用一些类似zlib的algorithm（ https://github.com/imaya/zlib.js ）和@ flipzagging指向antirez / smaz（https // github.com / antirez / smaz）听起来更适合短string（JavaScript版本在https://github.com/personalcomputer/smaz.js ）。既然=和&没有在https://github.com/personalcomputer/smaz.js/blob/master/lib/smaz.js#L9中专门处理，我们可能会稍微调整一下。此外，还有一个选项可以在一个固定的表中对值进行编码，例如参数的顺序是预定义的，我们需要跟踪的是实际值。例如，在smaz压缩之前，将a=hamster&b=cat变成7hamster3cat （length + chars）或仓鼠| cat（value + | ）。还有什么我应该找的？

使用无状态（= Sessionless）身份validation时必需的CSRF令牌？: 当应用程序依赖于无状态身份validation（使用类似HMAC）时，是否有必要使用CSRF保护？例：我们有一个单一的页面应用程序（否则我们必须在每个链接上添加标记： <a href="…?token=xyz">…</a> 。用户使用POST /authvalidation自己。成功的身份validation服务器将返回一些令牌。令牌将通过JavaScript存储在单个页面应用程序中的某个variables中。这个令牌将被用来访问像/admin这样的受限制的URL。令牌将始终在HTTP头中传输。没有Http Session，也没有Cookies。据我所知，应该（?!）不可能使用跨站点攻击，因为浏览器不会存储令牌，因此它不能自动发送到服务器（这就是使用Cookies /会议）。我错过了什么吗？

AngularJS HTML5模式 – 直接链接如何在没有服务器特定变化的情况下工作？: 注意：这个问题也可以这样写：如何在Java中支持hashbang-less客户端mvc框架的书签。我正在转换一个angular度的应用程序，使用hashtags html5mode 。我已经成功设置 $locationProvider.html5Mode(true); 所有来自login页面（index.html）的链接都可以正常工作。问题是，如果直接引用部分url，我自然会得到一个404，因为服务器端点定义没有耦合到客户端定义的路由。因此，如果没有HTML5，我们会获得非SEO友好的hashbangs，但是对于其他目标网页（bootstrapsangular色的页面），我们不能添加书签。为什么如果首先请求默认login页面（index.html），即htpp：//mydomain.com/：浏览器从服务器请求index.html 服务器返回index.html，浏览器加载angular度框架 URL更改发送到客户端路由器，并加载正确的部分。为什么它不工作，如果（即）直接从浏览器请求http://mydomain.com/foo ：浏览器从服务器请求mydomain / foo。资源不存在服务器返回404 这个故事中缺less的东西，我只是不知道。这是我能看到的唯一的两个答案这是devise。这是应该如何工作？用户必须始终登陆客户端MVC框架的引导页面（通常是index.html），然后从那里导航。这是不理想的，因为国家不能保存，没有办法书签…更不用说抓取。服务器scheme。这是一个服务器端技巧解决？例如，在所有的请求中，返回index.html并立即调用具有额外上下文的路由器。如果是这样，这是违背AngularJS完全客户端的目标，并且看起来像一个黑客攻击。

在angularJS单页面应用程序中使用javascript打印div: 我有一个单页的Web应用程序使用angularJS。我需要打印某个页面的div。我尝试了以下内容：该页面包含几个div（print.html） <div> <div> Do not print </div> <div id="printable"> Print this div </div> <button ng-click="printDiv('printableArea');">Print Div</button> </div> 控制器有以下脚本： $scope.printDiv = function(divName) { var printContents = document.getElementById(divName).innerHTML; var originalContents = document.body.innerHTML; document.body.innerHTML = printContents; window.print(); document.body.innerHTML = originalContents; } 此代码打印所需的div，但有一个问题。声明document.body.innerHTML = originalContents; 因为它是一个SPA，所以取代了整个应用程序的主体。所以，当我刷新页面或再次点击打印button时，页面的全部内容被删除。