标签: single-page-application

制作SPA(AngularJS)可访问(屏幕阅读器等)的最佳方法是什么？

我对aria规范几乎没有任何经验,我想知道它是否适用于单页应用程序.

开发时常见的陷阱有哪些？

如何在开发时调试和测试可访问性？

该单页应用(SPA)已经到了我们.它也带来了许多新的东西,比如路由,客户端页面生命周期,MVC模式,MVVM模式,MV*模式......以及一些Javascript模式也像AMD模式,Singleton,Facade一样来到我们这里,..

还开发了许多SPA框架和库.我们可以在互联网上找到它的一些.它们是AngularJs,Reactjs,BackboneJs,DurandalJs,以及许多第三方组件,使得Javascript编码更容易,如RequireJs,Amplifyjs,BreezeJs ......

但我想我们为什么需要SPA呢？因为它被视为在开发Web应用程序时引入了一些新的复杂内容.尽管有SPA,我们可以使用传统的Web应用程序,每个请求每个加载页面.我只是看到一个好处,就像我们可以很容易地在移动设备上运行它并适应新的Web应用程序开发趋势.有人可以更清楚地解释一下吗？

还有一件事,如果我们使用很多第三方组件来组成一个SPA.那么它是否为这个Web应用程序提供了一致性？我认为它应该是一个复杂的维护我们的Web应用程序内的巨大组件.你觉得怎么样？

欢迎所有建议.

我有一个单页应用程序,使用knockout进行数据绑定.在我的单页应用程序CAApproval.html视图有一个名为在视图模型代码AllCertificates的observeablearray.它在页面上填充得很好.当您通过点击页面navigation.html部分的链接导航远离视图,然后返回到CAApproval页面上,从previouse参观值仍然在AllCertificates observableArray,因此显示在CAApproval视图.

我需要清除AllCertificates内容observablearray每次用户返回到使用该observablearray的CAApproval页面,这样,如果一个用户离开页面,回来时,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() {
                return CertificateDataService.getallCertificates(allCertificates);
        }
    });

如何清除observablearray的每次内容的用户进入到该页面(而不是在页面中浏览时,仅当用户来自一个单独的页面清除observablearray)的页面？

我已经阅读了很多关于使用REST和Angular进行身份验证和授权的SO线程,但我仍然觉得我对我希望做的事情有一个很好的解决方案.对于某些背景,我打算在AngularJS中构建一个我想要支持的应用程序:

1. 有限的访客访问
2. 经过身份验证后对应用程序的基于角色的访问
3. 通过API验证

所有对REST API的调用都需要通过SSL进行.我想在不破坏RESTful原则的情况下构建应用程序,即不保持会话状态存储在服务器上.当然,在客户端进行的任何授权都必须在服务器端得到加强.由于我们需要在每个请求中传递整个状态,因此我知道我需要传递某种令牌,以便接收REST请求的后端服务器可以对该调用进行身份验证和授权.

话虽如此,我的主要问题是身份验证 - 这里的最佳做法是什么？似乎讨论了很多不同的方法,这里只是我发现的一些方法:

• 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最佳实践应用程序身份验证),但除非我误解了答案,否则似乎意味着应该使用服务器会话,这违反了RESTful原则.

我对Amazon AWS和George Reese文章的主要关注是它似乎假设消费者是一个程序,而不是最终用户.可以提前向程序员发出共享密钥,然后可以使用它在此处对呼叫进行编码.这不是这种情况 - 我需要代表用户从应用程序中调用REST API.

这种方法是否足够？假设我有一个会话资源:

POST/api/session

为用户创建新会话

要创建会话,您需要POST一个包含"username"和"password"的JSON对象.

{
    "email" : "austen@example.com",
    "password" : "password"
}

卷曲示例

curl -v -X POST --data '{"username":"austen@example.com","password":"password"}' "https://app.example.com/api/session" --header "Content-Type:application/json"

响应

HTTP/1.1 201 Created {
    "session": {
        "id":"520138ccfa4634be08000000",
        "expires":"2014-03-20T17:56:28+0000"
    }
}

状态代码

• 201 - 建立了新会议
• 400 - 错误请求,JSON对象无效或缺少必需信息
• 401 - 未经授权,检查电子邮件/密码组合
• 403 - 拒绝访问,禁用帐户或许可证无效

为清楚起见,我将HATEOAS细节遗漏.在后端,将创建一个新的,有限持续时间的会话密钥并与用户相关联.在后续请求中,我可以将其作为HTTP标头的一部分传递:

Authorization: MyScheme 520138ccfa4634be08000000 

然后,后端服务器将负责从请求中消化此内容,查找关联用户并强制执行请求的授权规则.它应该也可以更新会话的到期时间.

如果所有这一切都发生在SSL上,我是否会对任何我应该保护的攻击敞开大门？您可以尝试猜测会话密钥并将它们放在标头中,因此我想我还可以在会话密钥中附加用户GUID以进一步防止暴力攻击.

我已经积极编程已经有几年了,我刚刚回到这里.抱歉,如果我是钝的或不必要地重新发明轮子,只是希望社区根据我的阅读目前运行我的想法,看看他们是否通过了试金石.

在基于服务器端的完全呈现(非Web 2.0)中,部署服务器端代码将在页面重新加载时直接更新客户端页面.相比之下,在基于React的单页应用程序中,即使在更新了React组件之后,仍然会有一些客户端使用旧版本的组件(它们仅在浏览器重新加载时获得新版本,这应该很少发生) - >如果页面完全是SPA,有些客户可能会在几个小时后刷新页面.

应采用哪些技术来确保任何客户不再使用旧组件版本？

更新:API未更改,只有更新版本更新了React组件.

我正在使用Angular开发单页应用程序.后端公开需要基本身份验证的REST服务.获取index.html或任何脚本不需要身份验证.

我有一个奇怪的情况:我的观点的人有一个<img>,其中src是一个REST API需要验证的URL.它<img>由浏览器处理,我没有机会为它所做的GET请求设置授权标头.这会导致浏览器提示输入凭据.

我尝试通过这样做解决这个问题:

1. 留img src在源空
2. 在"文档就绪"中,使用Authorization标头创建XMLHttpRequest一个service(/api/login),以便进行身份验证.
3. 完成该调用后,设置该img src属性,认为到那时,浏览器会知道在后续请求中包含Authorization标头...

......但事实并非如此.图像请求没有标题.如果我输入凭据,则页面上的所有其他图像都是正确的.(我也试过和Angular的ng-src但是产生了相同的结果)

我有两个问题:

1. 为什么浏览器(IE10)在成功后的所有请求中都没有包含标题XMLHttpRequest？
2. 我该怎么做才能解决这个问题？

@bergi询问了请求的详细信息.他们来了.

请求/ api /登录

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; .NET CLR 2.0.50727; .NET CLR 3.0.30729)
Connection: Keep-Alive

响应(/ api/login)

HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Content-Length: …

我开发了一个单页应用程序原型,它在前端使用Backbone,并在服务器上使用瘦RESTful API来获取它的数据.

来自繁重的服务器端应用程序开发(php和python),我非常喜欢使用胖客户端MVC的新的不同设计方法,但我对如何最好地将应用程序限制为登录的经过身份验证的用户感到困惑.

我更喜欢将应用程序本身放在登录后面,并且除了站点的本机登录之外,还希望最终实现其他类型的登录(openid,fb connect等).我不清楚这是如何完成的并且一直在搜索 - 但是在找到让我清楚的信息方面不成功.

总体而言,目前注册用户并要求他们登录以使用您的单页应用程序的最佳做法是什么？

用户登录后,api请求如何进行身份验证？我可以存储会话但是如何在API调用中检测此会话,或者我是否需要在每次单独的API调用中传递一个令牌？任何答案都将非常感谢!

resolve$routeProvider允许在呈现相应视图之前执行某些作业的属性.

如果我想在执行这些作业时显示微调器以增加用户体验,该怎么办？
实际上,否则用户会感觉应用程序已被阻止,因为例如没有显示视图元素一些毫秒> 600.

当然,有一种方法可以定义当前视图中的全局div元素,以便通过该函数显示微调器.但我不想隐藏整个页面,中间只有一个可怜的微调器. 我希望我的webapp的某些页面在加载显示方式上有所不同.$scope.$rootChangeStart

我遇到了这个有趣的帖子,其中包含我上面描述的确切问题:

这种方法导致可怕的UI体验.用户单击按钮刷新列表或其他内容,整个屏幕在通用微调器中被覆盖,因为库无法仅为实际受状态更改影响的视图显示微调器.不用了,谢谢.

在任何情况下,在我提交此问题后,我意识到"解析"功能是一种反模式.它等待所有承诺解决然后动态状态变化.这是完全错误的 - 您希望状态之间的转换动画与数据加载并行运行,以便前者可以覆盖后者.

例如,假设您有一个项目列表,单击其中一个项目会隐藏列表并在不同视图中显示项目的详细信息.如果我们对项目详细信息的异步​​加载平均需要400毫秒,那么在大多数情况下我们可以通过在列表视图上放置300毫秒"离开"动画和300毫秒"输入"动画来几乎完全掩盖负载在项目详细信息视图上.这样我们就可以为UI提供更加流畅的感觉,并且在大多数情况下可以避免显示微调器.

但是,这要求我们在同一时刻启动异步加载和状态更改动画.如果我们使用"resolve",那么整个异步动画就会在动画开始之前发生.用户单击,查看微调器,然后查看过渡动画.整个状态的变化需要大约1000毫秒,这太慢了.

"Resolve"可以是缓存不同视图之间依赖关系的有用方法,如果它可以选择不等待promises,但是在状态更改开始之前始终解析它们的当前行为使得它几乎无用,IMO.对于涉及异步加载的任何依赖项,应该避免使用它.

我真的应该停止使用resolve加载一些数据而不是直接在相应的控制器中加载它们吗？这样我就可以在作业执行时以及在视图中我想要的位置更新相应的视图,而不是全局.

我正在学习JSF 2,感谢我在这么短的时间里学到了很多东西.

我的问题是关于如何为我的所有JSF 2页面实现一个公共布局,并且每当我从另一个面板单击一个链接/菜单时,只有页面的内容部分不刷新整个页面.我使用Facelets方法它做了我想做的事情,除了每次我点击一个面板的链接(例如左面板的菜单项)时,整个页面都会刷新.我正在寻找的是一种只刷新页面内容部分的方法.为了说明这一点,我的目标是pagelayout.

没有发布我的代码,因为我不确定Facelets是否可以这样做.除了Facelets之外,还有其他方法更适合我的要求吗？

我有一个使用Durandal的SPA应用程序.

我的程序定期开始有一个http请求:

http://localhost:1551/f9750d8f8aa54265835e72d56d23144a/arterySignalR/poll?transport=longPolling&connectionToken=AQAAANCMnd8BFdERjHoAwE%2FCl%2BsBAAAACM1YyjLngEiQsL54ET%2B%2FqwAAAAACAAAAAAADZgAAwAAAABAAAAAyZZfHz09psv64kIgPPwQNAAAAAASAAACgAAAAEAAAABMZImCidzdmb21ehxuGD4IoAAAAbazfW7CYR7y7HKb8JPt9ZH9b6fUDlZao60kBG662Vy%2Fb0IHwkwidthQAAAA1qSqnsCOheiNyXiINEyBPBAkqVg%3D%3D&messageId=d-79160814-B%2C0%7CC%2C4%7CD%2C0&requestUrl=http%3A%2F%2Flocalhost%3A2690%2F&browserName=Firefox&tid=5&_=1391326350868

我不知道它来自哪里？我记得我没有添加任何SignalR或类似的东西.

如何检查我的代码的哪一部分正在生成此请求？然后删除它.

我正在使用的技术是:

• 迪朗达尔
• ASP.NET MVC 4.0
• 昏死
• ASP.NET WebApi