假设我熟悉在jQuery中开发客户端应用程序,但现在我想开始使用AngularJS。你能描述一下必要的范式转变吗?以下几个问题可能有助于您确定答案:
如何以不同的方式构建和设计客户端web应用程序?最大的区别是什么?我应该停止做什么/使用什么;我应该开始做什么?是否有服务器端的考虑/限制?
我不想详细比较jQuery和AngularJS。
假设我熟悉在jQuery中开发客户端应用程序,但现在我想开始使用AngularJS。你能描述一下必要的范式转变吗?以下几个问题可能有助于您确定答案:
如何以不同的方式构建和设计客户端web应用程序?最大的区别是什么?我应该停止做什么/使用什么;我应该开始做什么?是否有服务器端的考虑/限制?
我不想详细比较jQuery和AngularJS。
当前回答
请收听播客JavaScript Jabber:第32集,其中介绍了AngularJS的原创创作者:Misko Hevery&Igor Minar。他们谈论了很多来自其他JavaScript背景,特别是jQuery的AngularJS的感觉。
播客中的一点让我对你的问题有了很多看法:
MISKO:[…]在Angular中,我们很难想到的一件事是,我们如何提供大量逃生舱口,以便您能够逃出去,并基本上找到解决问题的方法。对我们来说,答案是“指令”。有了指令,你就基本上变成了一个普通的小jQueryJavaScript,你可以做任何你想做的事情。IGOR:所以把指令想象成编译器的指令,当你在模板中遇到这个特定的元素或这个CSS时,它会告诉你,你保留这类代码,而这类代码负责DOM树中元素及其下面的所有内容。
可以通过上面提供的链接获得整个事件的记录。
所以,直接回答你的问题:AngularJS非常固执己见,是一个真正的MV*框架。然而,您仍然可以在指令中使用jQuery完成所有您知道和喜爱的非常酷的事情。这不是“我如何做我在jQuery中曾经做过的事情?”的问题,而是“我如何用我在jQuery中曾经做的所有事情来补充AngularJS?”
这是两种截然不同的心态。
其他回答
这些都是很好但很长的答案。
总结我的经验:
控制器和提供者(服务、工厂等)用于修改数据模型,而不是HTML。HTML和指令定义了模型的布局和绑定。如果需要在控制器之间共享数据,请创建一个服务或工厂-它们是在应用程序中共享的单体。如果您需要HTML小部件,请创建一个指令。如果您有一些数据并且正在尝试更新HTML。。。停下!更新模型,并确保HTML绑定到模型。
jQuery是一个DOM操作库。
AngularJS是一个MV*框架。
事实上,AngularJS是为数不多的JavaScript MV*框架之一(许多JavaScript MVC工具仍然属于类别库)。
作为一个框架,它托管您的代码,并决定何时调用什么!
AngularJS本身包含一个jQuery-lite版本。因此,对于一些基本的DOM选择/操作,您真的不必包含jQuery库(它节省了许多在网络上运行的字节)
AngularJS为DOM操作和设计可重用UI组件提供了“指令”的概念,因此当您觉得需要做与DOM操作相关的事情时,应该使用它(指令是在使用AngularJS时编写jQuery代码的唯一地方)。
AngularJS涉及一些学习曲线(不仅仅是jQuery:-)。
-->对于任何来自jQuery背景的开发人员,我的第一个建议是“在跳到像AngularJS这样的富框架之前,将JavaScript作为第一类语言学习!”我很难了解到上述事实。
祝你好运
实际上,如果您使用的是AngularJS,那么就不再需要jQuery了。AngularJS本身具有绑定和指令,这是一个非常好的“替代品”,可以替代jQuery中的大多数功能。
我通常使用AngularJS和Cordova开发移动应用程序。jQuery中我唯一需要的就是选择器。
通过谷歌搜索,我发现有一个独立的jQuery选择器模块。这是Sizzle。
我决定制作一个小代码片段,帮助我利用jQuery Selector(使用Sizzle)的强大功能快速启动一个使用AngularJS的网站。
我在这里分享了我的代码:https://github.com/huytd/Sizzular
jQuery:您对DOM元素的“QUERYing the DOM”进行了很多思考,并做了一些事情。
AngularJS:模型是事实,你总是从这个角度思考。
例如,在jQuery中,当您从THE服务器获取要以某种格式显示在DOM中的数据时,需要“1”。FIND”在DOM中要放置此数据的位置,即“2”。通过创建新节点或仅设置其innerHTML,UPDATE/APPEND”。然后,当您要更新此视图时,请选择“3”。查找位置和“4”。更新”。在AngularJS中,在从服务器获取和格式化数据的同一上下文中完成的查找和更新循环已经消失。
有了AngularJS,你就有了你的模型(你已经习惯了JavaScript对象),模型的值告诉了你关于模型(显然)和视图的信息,模型上的操作会自动传播到视图,所以你不必考虑它。你会发现自己在Angular JS中不再在DOM中找到东西。
换言之,在jQuery中,您需要考虑CSS选择器,也就是说,具有类或属性等的div或td在哪里,这样我就可以获得它们的HTML或颜色或值,但在AngularJS中,您会发现自己这样想:我在处理什么模型,我会将模型的值设置为true。您不必担心反映该值的视图是复选框还是驻留在td元素中(在jQuery中通常需要考虑的细节)。
通过AngularJS中的DOM操作,您发现自己添加了指令和过滤器,可以将其视为有效的HTML扩展。
在AngularJS中,你会体验到另一件事:在jQuery中,你经常调用jQuery函数,在AngularJS中,AngularJS会调用你的函数,所以AngularJS将“告诉你怎么做”,但好处是值得的,所以学习AngularJS通常意味着学习AngularJS想要什么,或者AngularJS要求你呈现函数的方式,它会相应地调用它。这是AngularJS成为框架而不是库的原因之一。
请收听播客JavaScript Jabber:第32集,其中介绍了AngularJS的原创创作者:Misko Hevery&Igor Minar。他们谈论了很多来自其他JavaScript背景,特别是jQuery的AngularJS的感觉。
播客中的一点让我对你的问题有了很多看法:
MISKO:[…]在Angular中,我们很难想到的一件事是,我们如何提供大量逃生舱口,以便您能够逃出去,并基本上找到解决问题的方法。对我们来说,答案是“指令”。有了指令,你就基本上变成了一个普通的小jQueryJavaScript,你可以做任何你想做的事情。IGOR:所以把指令想象成编译器的指令,当你在模板中遇到这个特定的元素或这个CSS时,它会告诉你,你保留这类代码,而这类代码负责DOM树中元素及其下面的所有内容。
可以通过上面提供的链接获得整个事件的记录。
所以,直接回答你的问题:AngularJS非常固执己见,是一个真正的MV*框架。然而,您仍然可以在指令中使用jQuery完成所有您知道和喜爱的非常酷的事情。这不是“我如何做我在jQuery中曾经做过的事情?”的问题,而是“我如何用我在jQuery中曾经做的所有事情来补充AngularJS?”
这是两种截然不同的心态。