数据绑定如何在AngularJS框架中工作?
我没有在他们的网站上找到技术细节.当数据从视图传播到模型时,它或多或少清楚它是如何工作的.但是AngularJS如何在没有setter和getter的情况下跟踪模型属性的变化?
我发现有一些JavaScript观察者可以做这项工作.但Internet Explorer 6和Internet Explorer 7不支持它们.那么AngularJS如何知道我改变了例如以下内容并在视图上反映了这一变化?
myobject.myproperty="new value";
Run Code Online (Sandbox Code Playgroud) 我有一个数千行的庞大数据集,每行约10个字段,大约2MB的数据.我需要在浏览器中显示它.最简单的方法(获取数据,将其放入$scope,让它ng-repeat=""完成它的工作)工作正常,但它开始将浏览器的节点插入DOM时冻结大约半分钟.我该如何处理这个问题?
一种选择是逐行追加行$scope并等待ngRepeat完成将一个块插入DOM,然后再移动到下一个.但AFAIK ngRepeat在完成"重复"时不报告,所以它会变得丑陋.
其他选择是将服务器上的数据拆分成页面并在多个请求中获取它们,但这甚至更加丑陋.
我浏览了Angular文档以寻找类似的东西ng-repeat="data in dataset" ng-repeat-steps="500",却一无所获.我对Angular方式相当新,所以我可能完全忽略了这一点.这方面的最佳做法是什么?
是的,所以我花了几天时间更新我的NG2应用程序以使用angular-cli.起初这是一个非常令人沮丧的经历,然而,我真的看到了光明并享受着开发过程.显然,努力工作和思想已被纳入框架.
但我的申请很慢:
根据Pingdom的说法 ,我的应用程序比互联网上所有其他网站的21%快.公平地说,这是一个开箱即用的构建,我相信我可以大大提高速度.
我的最后一个问题是:如何从根本上减少角度网站的大小?
目前,应用程序:fairplay.poker需要7秒才能加载(如果你住在纽约),所以我相信大多数人都会在它有机会加载之前继续前进.
显然,我需要开始一个从根本上提高应用程序速度的旅程,但我需要你的帮助!(因为我不知道我在做什么:)
什么是标准练习,我在哪里开始排序?
进展:
作为建议,我将在这里更新它们.
1. @cyrix建议的生产就绪版本:ng build -prod
Zip文件下降超过一兆,而Pingdom的新统计数据与原始统计数据相比有了很大改进:
2.建议缩小图像尺寸.
有些图像比它们应该有的大一些,因此尺寸减小了.然而,这并不是一个重大改进,这些数据已经将网站提升到前73%的网站,加载时间略快一些.
3. @yurzui建议使用gzip压缩,所以我启用了这个.显然,它正在工作,总文件大小减少了一半以上(609字节),但这并没有显示在Pingdom上.不过我注意到等级有所改善.
我使用这个站点来检查压缩,这个站点向我展示了如何做到这一点,因为Cpanel似乎在从管理启用时不起作用.该站点似乎也是一个很好的gzip压缩资源.
4 @Yuruzi建议实现浏览器缓存.所以我做到了!
真正有趣的是性能等级的改进,那就是摇滚!加载时间快一点,现在该网站占据了74%的前列.根据Yuruzi的建议,我使用这篇文章作为指导.
5感谢#angularjs频道上的@ wafflej0ck.看来我需要提高我已经改变为概述"AddOutputFilterByType DEFLATE*"压缩类型来完成的GZip 这里.
这似乎增加了网站:
6有人建议使用AOT,因此我从这篇文章中删除了一页.
我浏览了大部分文档,然而,我遇到了一个错误的世界,并决定将其留待以后,希望当AOT更稳定时.
我在GitHub上看到Angular-Cli预装了AOT并且上面的文章没有关系.我不确定这是多么真实但是我在编译代码时运行以下命令:ng build --prod --aot
7.调整htaccess文件中的mod_expires.c.
性能等级已显着提高到98%,加载时间现在不到一秒,网站比测试网站的91%快.
该文件目前看起来像这样:
ExpiresActive On ExpiresDefault"access plus 2 days"ExpiresByType image/x-icon"access plus 1 year"ExpiresByType image/jpeg"access plus 1 year"ExpiresByType image/jpg"access plus 1 year"ExpiresByType image/png"access plus 1 year "ExpiresByType image/gif"访问加上1年"ExpiresByType应用程序/ …