今天早上与专家交谈,看到我们与SitePoint组开发人员Mal Curtis和Brad Barrow讨论了功能强大的AngularJS框架。 这个小时花了很多资源,我将所有这些资源整理成一个清单,供那些不想在笔录中浏览的人使用。
AngularJS在行动
角度UI
UI路由器演示
网络方向南
Mgonto矩形
学习资源
使用指令和数据绑定构建应用
角度约曼发电机
其他资源
Angular宣布Dart
角箭
Mozilla的砖头
存储模块
网络指南视频
Angular的Google+专页
Angular的YouTube频道
Google网上论坛
如果您由于不了解而错过了会议,请确保您在此处注册了以后的会议通知。 下周,我们将与Email Wizardry的 Nicole Merlin讨论HTML电子邮件 。 该活动将于太平洋标准时间11月13日星期三中午12:30开始,您可以在此处加入会议。
对于那些错过演讲并想知道失败原因的人,可以在这里阅读完整的成绩单:
[22:05] <BradBarrow> AngularJS是目前可用的许多Javascript框架之一。 与众不同之处在于它与您站点的DOM / HTML紧密集成
[22:06] <MalCurtis>我想AngularJS具有目前框架中最高的学习曲线之一,主要是因为它以截然不同的方式进行工作。
[22:06] <MalCurtis>但值得庆幸的是,一旦您启动并运行,它就非常强大
[22:07] <BradBarrow>完全正确的MalCurtis,而其他框架旨在为您的javascript提供结构,Angular试图利用javascript的功能使HTML更具动态性,这既具有开创性又非常强大
[22:07] <BradBarrow>考虑一个按钮,当按下该按钮时,它将从文本字段中获取一个值并用于显示警报消息
[22:07] <HAWK>当前有人在使用Angular吗?
[22:08] <BradBarrow>使用Javascript / Jquery,您需要编写代码来找到按钮,找到文本字段并找到消息容器……然后,您需要代码来侦听所有事件,提取值并将其插入
[22:08] <Randyman5775>主要是我的Jquery
[22:08] <BradBarrow>所有这些代码都位于一个文件中,该文件与与其交互的标记相距很远
[22:08] <Good>只是学习它,并思考它如何改变Web开发行业
[22:08] <MalCurtis>对于大多数网站,您只需要添加一些动态内容,就不需要Angular
[22:09] <HAWK>如果有人有问题,现在是参加的好时机。
[22:09] <MalCurtis> Angular是SPA,单页应用程序的绝佳框架–因此,完整的客户端应用程序
[22:09] <nanda>为什么仅限于SPA
[22:09] <Randyman5775>是否有服务器端设置?
[22:09] <MalCurtis>我并不是说它受到限制,而是说当您只需要添加少量交互性时,它可能会过大
[22:10] <MalCurtis> Randyman5775否,是
[22:10] <MalCurtis>不,因为它是一个完整的客户端框架
[22:10] <BradBarrow>与全栈应用相比,您想在SPA应用上使用angular的主要原因是Angular希望拥有自己的路由
[22:10] <MalCurtis>是的,因为如果您想要数据–您必须从某个地方获取数据
[22:10] <MalCurtis>,但是您也可以考虑使用“作为服务支持”,例如Parse,Firebase或(是的,我要说)Azure
[22:11] <MalCurtis>,您可以通过有线方式与数据进行交互,完全在其服务中
[22:11] <miked> Angular是否可与jQuery UI小部件一起使用?
[22:11] <BradBarrow> Angular希望查看浏览器的url并确定要呈现的页面,因此,如果您在Ruby on Rails之类的东西中使用它,则这两个框架将为使用路由结构
[22:11] <MalCurtis> @miked您会发现jQuery和Angular经常不能一起工作
[22:11] <MalCurtis>它们以非常不同的方式工作
[22:11] <nanda>因此,不建议将Angular与Web框架一起使用。
[22:11] <MalCurtis>但您还会找到为您解决问题的人
[22:12] <MalCurtis> @nanda Angular是一个Web框架
[22:12] <Good>那么电子游戏呢? 您是否知道AngularJS团队中的任何人对于打开AngularJS来简化HTML5电子游戏作为游戏开发框架的想法?
[22:12] <miked>是流行的窗口小部件(如选项卡等)的替代品吗?
[22:12] <BradBarrow> @miked是这么说的, http: //angular-ui.github.io/是一个很棒的项目,它在涉及角度方面正在突破界限。 他们以一种真正的角度实现了许多流行的ui工具。
[22:12] <MalCurtis> @Good,游戏开发是另一个世界,而不是Angular试图解决的问题
[22:12] <Good>好的,谢谢
[22:13] <MalCurtis>您可以愉快地运行带有角度的游戏站点
[22:13] <BradBarrow> @nanda我已经在两个Ruby on Rails项目中使用了AngularJS,这是可能的,但有时开销并不值得。
[22:13] <MalCurtis>但是实际的游戏本身需要使用适当的游戏库
[22:13] <phil>您对使用模拟进行Angular测试有何想法
[22:13] <phil>我有一些相当复杂的自定义指令
[22:13] <Good>既然我们可以使用AngularJS并减少ETA,您为SPA开发收取多少费用?
[22:13] <bloopjs>您最喜欢使用Angular构建的网站/示例是什么?
[22:13] <phil>,测试失败了很多,需要重新启动。
[22:13] <MalCurtis> @Good一根弦多长时间?
[22:14] <nanda>使用AngularJS而不是其他服务器端框架的缺点是什么?
[22:14] <phil>这是常见的经历吗(重新启动后它们会工作)
[22:14] <BradBarrow> @Good亚历克斯·史密斯(Alex Smith)写了一篇整洁的棱角分明的文章,教您如何创建一个无所事事的游戏。 这不是一个复杂的游戏,但是它展示了Angle的一些功能http://www.sitepoint.com/angularjs-tutorial-build-an-app-using-directives-and-data-binding/
[22:14] <MalCurtis> @phil复杂性通常是测试问题的原因
[22:14] <MalCurtis>减少耦合,也许将您的指令拆分为多个子指令,等等。
[22:15] <Good> BradBarrow,整洁! 我会读一读
[22:15] <Good>似乎很有趣! 谢谢
[22:15] <MalCurtis>我通常会发现,如果在测试中必须进行过多的存根/模拟,这意味着我可能需要重新考虑其工作方式
[22:15] <MalCurtis>通常是高度耦合的,而不是松散耦合的
[22:15] <pamelasue101>大家好
[22:15] <BradBarrow> @phil我同意重新进行Mal测试。 确保您的代码尽可能模块化和分离。 编写集成/验收测试通常可以帮助涵盖单元测试变得复杂的领域。
[22:15] <Randyman5775>可以与Google Alerts或RSS一起使用吗?
[22:15] <MalCurtis>,即它期望对象具有来自父作用域的大量属性,而不是来自父作用域的多个不同变量,这些变量更显式
[22:15] <phil>即使我简化了事情,测试也可能失败–但更多的是,arma玛已经进入需要重新启动的特定状态。
[22:16] <MalCurtis> @phil奇数,应将每个测试重置为空白状态。 也许您的积蓄和拆卸工作无法有效地清除问题,或者您正在oe测试中尝试做很多事情
[22:16] <MalCurtis> *
[22:17] <Good> AngularJS建议使用Ember.js之类的库,这是真的吗,否则它无法管理状态等等,不是吗?
[22:17] <MalCurtis> Randyman5775不确定您的意思,如果您的意思是可以获取该数据,请确定–如果服务具有可通过JS使用的API(即支持跨源资源共享),则可以
[22:17] <MalCurtis> @很好,可以肯定AngularJS推荐Ember.js就像丰田推荐您购买福特
[22:17] <BradBarrow> @Good,我之前从未听说过。 Angular UI团队为状态驱动的开发提供了一个出色的解决方案,其中包括嵌套视图http://angular-ui.github.io/ui-router/sample
[22:17] <phil> @MacCurtis –听起来值得一试。 如果您没有遇到类似的问题,那么我将继续进行处理。 谢谢
[22:18] <MalCurtis>我支持BradBarrow关于ui路由器的说法。 它非常出色,可以解决您可能遇到的所有路由/状态问题
[22:18] <MalCurtis>支持嵌套视图,ala ember,还具有多个同级视图等。
[22:18] <Randyman5775>是,我希望将基于关键字的汇总内容纳入每日更新的内容中
[22:18] <MalCurtis>通过州而非路线运行,这非常好
[22:19] <MalCurtis> Randyman5775是的,如果您可以通过JS获取数据,则将其导入Angular不会有任何问题。
[22:19] <BradBarrow> @bloopjs我真的很喜欢在Web导航南站点http://webdirections.org/wds13/中使用angular
[22:19] <BradBarrow> @bloopjs有一些很棒的指令用于诸如触摸事件之类的事情,以使其可移动访问
[22:19] <MalCurtis>如果您以前从未使用过Angular,则应该知道Directives是使它强大的原因
[22:20] <MalCurtis>您可以定义新标签(或类等),这些标签封装了整个功能块
[22:20] <Good>好的,很好的链接,确实所有信息都移至“ json文档”格式,并且越来越多的nosql db包含了angularjs可以在客户端和服务器端处理的文档...
[22:20] <MalCurtis>使重用变得非常容易,以及测试等。
[22:20] <BradBarrow>除此之外,依赖项注入意味着您可以创建可在整个应用程序中访问的资源。 这促进了去耦,正如我们前面所看到的,它使测试变得更加容易
[22:21] <MalCurtis>“依赖注入” =轻松获取对类的访问权限,而不必担心如何访问它们或污染全局范围
[22:22] <HAWK>欢迎您,如果您最近加入。 随时随时提出问题。
[22:22] <BradBarrow> Randyman5775如果您有兴趣使用RESTful API, https://github.com/mgonto/restangular是一个很棒的小模块,它提供了一些有用的工具来实现
[22:22] <MalCurtis>,即当您创建控制器时,您可以创建一个函数:function(MyClass,MyOtherClass){…},并根据参数名称,Angular将提供这些类(只要已注册它们) )给您的控制器
[22:23] <Randyman5775> Tank BradBarrow –我会检查一下。
[22:23] <Good>好点了,既然您提到了全局范围。 关于何时不应该在$ scope中包括更多变量的建议,或者它有多大(可以处理多少KB / MB?)。
[22:24] <MalCurtis> @Good何时在$ scope中放东西应该很明显
[22:24] <MalCurtis>如果仅在控制器中需要变量,则在$ scope中不需要
[22:24] <MalCurtis>如果您在模板中需要它,则在$ scope中需要它
[22:24] <BradBarrow> @Good,有一个Google chrome开发人员扩展名为Angular Batarang,它可以帮助您检查浏览器中angular的覆盖范围。 这对于调试和跟踪可重构的杂散变量很有帮助
[22:25] <Good>好吧,因为范围是视图和模型之间的粘合剂……但是,如果我们需要将大量数据移入视图,该怎么办? 示波器有没有实时给您带来尺寸问题?
[22:25] <Good> BradBarrow,谢谢,我来看看,我已经将它写在TOREAD列表中
[22:25] <MalCurtis>有趣的问题。 我不认为在范围内拥有事物比在范围之外具有更大的“权重”,除非当角度必须处理变化时
[22:26] <MalCurtis>如果要将大量更改数据放到不需要的范围内,则可能会导致处理开销,但不会造成“内存”占用空间
[22:26] <BradBarrow> @Good,我最近创建了一个API端点和一个Angular工厂来使用它。 它推倒了一个json结构,其中包含将近2000条记录,每条记录都有大约40个属性。 这些直接进入一个范围变量,而angular可以实时地对集合进行排序/过滤,而不会出现问题
[22:26] <phil>你们如何看待未来几年Angular的发展。 它似乎已经异常强大,并且在指令功能的基础上建立了大型的小部件库。 你怎么看?
[22:26] <MalCurtis>即Angular知道事情何时发生变化,但是它必须通过观察函数值和范围变量来做到这一点,因此,如果您要大量更改这些值,则需要更频繁地检查
[22:26] <BradBarrow>也就是说,这是一个原型,我建议在处理大型数据集时使用分页方法
[22:26] <MalCurtis>如果您可以将预处理移到控制器中,而仅将输出移到示波器中,那么这将减少处理量
[22:27] <nanda>什么时候使用Angular,什么时候不使用?
[22:27] <Good> BradBarrow好的,我明白了,谢谢你分享我的经验,现在我知道了一些数字……谢谢
[22:27] <MalCurtis> @phil如果我们看到更多社区项目被捆绑到核心,或者至少是一个更具模块化的系统中,例如ui-router,我不会感到惊讶。
[22:27] <BradBarrow> @phil我认为他们将越来越多地朝着Javascript OOP方法发展,并且会稍微远离他们所谓的“语言”。 您已经可以使用'this'关键字(而不是$ scope)将属性绑定到角度控制器本身,这意味着javascript开发人员会更喜欢这种语言。
[22:28] <BradBarrow>(处于不稳定版本中)
[22:28] <Maciek>与Sencha的Ext相比,您将如何定义AngularJS? 我的意思是目的,范围和功能。
[22:28] <phil> @bradbarrow –那么,您看到它朝着飞镖的方向发展吗?
[22:29] <phil>(对于OO位,我是说)
[22:29] <MalCurtis> Maciek Angular是更多框架,更少的小部件库
[22:29] <MalCurtis> @phil AngularJS内核刚刚宣布了nG的Dart兼容端口
[22:29] <MalCurtis> ng
[22:29] <MalCurtis> Ng
[22:29] <MalCurtis>无论缩写是什么
[22:30] <MalCurtis> https://github.com/angular/angular.dart
[22:30] <phil>回答了我的问题!
[22:30] <MalCurtis>;)
[22:30] <MalCurtis> http://news.dartlang.org/2013/11/angular-announces-angulardart.html
[22:31] <Good>关于AngularJS与Google的另一个项目(Web开发框架)之间的兼容性有什么想法? 我不记得这个名字了,但它像是投影机或原型之类的东西。
[22:31] <phil>我可以看到它进入了DOM有点像浏览器的汇编语言的阶段
[22:31] <phil>汇编器
[22:31] <BradBarrow> @good您可能在想聚合物?
[22:31] <MalCurtis> @good Google Web Developer或类似的东西?
[22:31] <Good>是的,就是这样
[22:31] <MalCurtis> s / developer / designer
[22:31] <Good>谢谢你,聚合物
[22:31] <Good>它们彼此兼容吗?
[22:32] <BradBarrow> Polymer借用了Angle的许多想法,但我想说它们是对一个问题的两种独立解决方案。
[22:32] <MalCurtis>哦,还没有看到Polymer。 感觉有点像Mozilla
[22:32] <MalCurtis> http://mozilla.github.io/brick/
[22:33] <BradBarrow>随着Shadow Dom的兴起,开发人员对Angular指令之类的东西越来越满意-封装的UI组件具有DOM中的动态行为
[22:33] <MalCurtis>此^
[22:33] <Good>好的,谢谢您的链接MalCurtis,我不了解Brick,请阅读一下
[22:35] <BradBarrow>远离当前的javascript应用程序逻辑和表示形式之间的隔离。 “使逻辑保持在视图之外”的一句老话仍然存在–但是我们当然可以从使视图更具声明性的角度受益,从而节省了开发人员的时间并创建了更强大的应用程序
[22:35] <MalCurtis>有人有未回答的问题吗?
[22:35] <Good>我希望AngularJS有助于统一浏览器的行为……全部整合到Google Chrome或Mozilla Firefox中
[22:35] <Good>我的意思是我希望
[22:36] <MalCurtis>在创建可在所有浏览器上使用的单个“界面”方面?
[22:36] <MalCurtis>还是使使用IE和Safari的人减少了?
[22:36] <Good>哈哈
[22:36] <Good> IE…
[22:37] <Good>我希望他们能赶上AngularJs…否则我不知道IE家伙们会如何发展
[22:37] <MalCurtis>截至本周为止,我对IE没问题
[22:37] <MalCurtis>当前+最后=正常
[22:37] <MalCurtis> AngularJS在10+上应该没问题
[22:37] <Good>好的。
[22:37] <BradBarrow> @Good Google就其Docs平台和其他一些平台,已不再支持IE9。 他们是趋势的引领者,所以我们可以期待使用IE10 +,它确实可以
[22:37] <MalCurtis> 10是第一个最终在几乎所有使用它们的地方都接受标准的IE。
[22:37] <MalCurtis>包括CORS等。
[22:38] <BradBarrow>如果有人希望快速开始使用Angular,我强烈建议您看一看Brian Brian所维护的AngularJS Yeoman Generator: https : //github.com/yeoman/generator-angular
[22:40] <BradBarrow>它可以帮助您在几分钟内建立一个静态站点,AngularJS和一个快速的开发环境。 我用它来快速原型化Angular应用程序,而不是JSfiddle / CodePen之类的东西
[22:40] <HAWK>如果有人有未解决的问题,现在是提问的好时机。
[22:41] <HAWK>欢迎来到刚加入的人们:)
[22:41] <RogerC>你好
[22:41] <Mikef>嗨
[22:41] <Jayfang>你好
[22:42] <BradBarrow>大家好,您以前使用过AngularJS吗? 到目前为止,您的经验/看法是什么? 对我们有任何疑问吗?
[22:42] <Good>好的,谢谢。 您会说AngularJS不能比其他人好或不能轻易开发。 当我认为MEAN配置文件将成为未来……或看起来是这样时,许多人都不想离开LAMP,但我想知道AngularJS是否存在Misjo没有告诉我们的任何缺点: d
[22:42] <Good>我认为没有。
[22:43] <MalCurtis> @Good您无需离开LAMP即可运行Ng
[22:43]但是, <MalCurtis> LAMP是您的后端。
[22:43] <MalCurtis> Angular最大
[22:43] <Good>啊,对不起
[22:43] <MalCurtis>“问题” –是它的学习曲线很陡
[22:44] <MalCurtis>因此很难击败jquery的“简单性”
[22:44] <BradBarrow> @Good,我认为它将始终取决于应用程序本身。 Mongo与Mysql –它们是截然不同的解决方案。 Node vs Apache ..再次专门研究实时服务器行为。 这是为正确的应用程序选择正确的工具。
[22:45] <phil>您如何看待MEAN堆栈作为LAMP的替代方案。 还是您认为它们相似?
[22:45] <Good>好的。 还有……关于Promise及其在AngularJS中的使用。 您认为对我来说,将promise应用于后端代码而不是拥有可怕的身份piramid对我来说值得吗?
[22:45] <BradBarrow>我们必须记住,开发人员将涌向最新,最强大的产品,因此MEAN无疑是受欢迎的……但这并不意味着您无法将Angular集成到您对RoR感到满意的现有堆栈中/灯
[22:46] <MalCurtis> @Good,假设您的后端代码使用回调汤语,例如JS
[22:46] <Good>我读了Q库开发人员的一篇文章,说为什么节点应该使用它们或类似的东西……我记不清了……对不起
[22:46] <Good>好的
[22:47] <Mikef>嗨,我正在通过Angular中运行的fabric.js在画布上做一些事情,到目前为止,它运行得很顺利,这是个好消息,因为我不是JS专家。 我需要开始在视图之间共享数据,并且想知道是否要使用参数或共享服务。
[22:47] <BradBarrow> @phil我认为MEAN堆栈非常适合较小的快照程序和高度交互的应用程序。 它使Socket.IO等的使用更加顺畅,使我们现在正在轻松使用的聊天应用程序(例如此聊天应用程序)的构建变得容易(对Mal?)。 另一方面,LAMP和RoR堆栈已经过尝试和测试……通过配置进行约定,并且了解
[22:47] <BradBarrow> o在高流量负载下要可靠。
[22:47] <MalCurtis> @mikef数据在哪里,视图在哪里?
[22:48] <MalCurtis>通常,视图连接有一个控制器,该控制器使用$ scope将它们绑定在一起
[22:48] <Mikef>目前,数据位于本地存储中,并且视图是路由器模块在其自己的文件中切换的部分文件。
[22:48] <BradBarrow> @Good我个人认为,关于异步语言,promise是近年来最好的发展之一,我发现它们比回调更通用,可读性和功能更强大。 任何使用它们的机会我都会跳上它
[22:49] <MalCurtis>好的,因此您需要有一个控制器,可以在那里进行一些按摩
[22:49] <Good>谢谢BradBarrow
[22:49] <MalCurtis>在您的视图中,您可以访问添加到附加控制器的$ scope中的任何内容
[22:49] <MalCurtis>因此,您的控制器可能会从本地存储中获取内容,然后将其推送到$ scope.myData中
[22:49] <MalCurtis>,您的视图可能会在myData上进行迭代(它不需要范围位)
[22:50] <MalCurtis>,例如<ul> <li ng-repeat =” myData中的数据”> {{data.someProperty}} </ li> </ ul>
[22:50] <MalCurtis> Angular知道数据何时更改,因此您无需担心在完成数据调用时就告诉它
[22:51] <BradBarrow>一个用于本地/会话存储的漂亮模块: https : //github.com/gsklee/ngStorage
[22:53] <HAWK>我们的课程还有大约5分钟的时间。 有人还有其他问题吗?
[22:53] <MalCurtis> BradBarrow刚刚看到您的评论,是的,构建此应用程序真是轻而易举。 不发誓...
[22:53] <MalCurtis> / sarcasm
[22:54] <BradBarrow>该频道中有一些关于Javascript开发的精彩视频,包括Node的异步特性,对感兴趣的人(@Good)的promise和REST api(@Good) http://www.youtube.com/user / webdirections / videos
[22:54] <好>我只想感谢您分享您的知识。 要知道,我将向西班牙的一些明星发送良好的业力/积极的业报,以便在美国与您联系! :D
[22:54] <Mikef>谢谢大家的建议::0)
[22:55] <MalCurtis>我在NZ;)Brad在AU
[22:55] <MalCurtis>布拉德*
[22:55] <BradBarrow>没问题! 使用Angular的人越多,社区将变得越发支持:)
[22:55] <Good>对不起。 因此,对于NZ和AU而言,他们走了!
[22:55] <MalCurtis>:D
[22:55] <Jayfang>谢谢,即使在最近的10分钟之内,我也一定会抓住成绩单的内容! :)
[22:55] <HAWK>酷。 我今天晚些时候把成绩单放好。
[22:56] <BradBarrow>我强烈建议您留意AngularJS的google +页面: https : //plus.google.com/+AngularJS
[22:56] <MalCurtis>如果有人来这里想知道是否应该“试着”弯腰,答案是完全可以的-是的:试一试。 请记住,尽管如此,它仍然具有一定的学习曲线。
[22:56] <BradBarrow> Youtube频道: http : //www.youtube.com/user/angularjs
[22:56] <HAWK>在我裁掉专家之前还有什么问题吗?
[22:56] <BradBarrow>和Google网上论坛: https ://groups.google.com/forum/#!forum / angular
[22:56] <MalCurtis>一个不错的第一篇教程是Alex的@ Sitepoint: http : //www.sitepoint.com/angularjs-tutorial-build-an-app-using-directives-and-data-binding/
[22:57] <Jayfang> MalCurtis 100%同意,在emberjs之后使用-较难学习,但远胜于“优越”
[22:57] <BradBarrow> \ m /
[22:57] <HAWK>太棒了。 好,谢谢您今天上午的宝贵时间MalCurtis和BradBarrow
[22:58] <BradBarrow>没问题–很好玩:)
[22:58] <MalCurtis> np
[22:58] <Good>鼓掌
[22:58] <HAWK>感谢所有参加并提出问题的人。 祝您白天/夜晚都愉快。
[22:59] <Good>你也是,谢谢
[22:59] <BradBarrow>再见!
From: https://www.sitepoint.com/talk-angularjs-experts-transcript/