假设我熟悉在jQuery中开发客户端应用程序,但现在我想开始使用AngularJS。你能描述一下必要的范式转变吗?以下几个问题可能有助于您确定答案:
如何以不同的方式构建和设计客户端web应用程序?最大的区别是什么?我应该停止做什么/使用什么;我应该开始做什么?是否有服务器端的考虑/限制?
我不想详细比较jQuery和AngularJS。
假设我熟悉在jQuery中开发客户端应用程序,但现在我想开始使用AngularJS。你能描述一下必要的范式转变吗?以下几个问题可能有助于您确定答案:
如何以不同的方式构建和设计客户端web应用程序?最大的区别是什么?我应该停止做什么/使用什么;我应该开始做什么?是否有服务器端的考虑/限制?
我不想详细比较jQuery和AngularJS。
当前回答
AngularJS和jQuery:
除了JQLite功能之外,AngularJs和JQuery在每个级别上都完全不同,一旦开始学习AngularJ的核心功能,您就会看到它(我将在下面解释)。
AngularJs是一个客户端框架,用于构建独立的客户端应用程序。JQuery是一个围绕DOM运行的客户端库。
AngularJs酷原则-如果您想对UI进行一些更改,请从模型数据更改的角度考虑。更改数据,UI将重新呈现自身。除非几乎不需要DOM,否则不需要每次都使用DOM,这也应该通过Angular Directive来处理。
为了回答这个问题,我想与AngularJS分享我在第一个企业应用程序上的经验。这些是Angular提供的最棒的功能,我们开始改变jQuery的思维方式,我们得到的Angular就像一个框架,而不是库。
双向数据绑定令人惊叹:我有一个具有UPDATE、DELTE和INSERT功能的网格。我有一个使用ng repeat绑定网格模型的数据对象。您只需编写一行简单的JavaScript代码即可进行删除和插入,就可以了。随着网格模型的即时变化,网格会自动更新。更新功能是实时的,没有代码。你感觉太棒了!!!
可重用指令是超级的:在一个地方编写指令并在整个应用程序中使用。天啊!!!我将这些指令用于分页、正则表达式、验证等。这真的很酷!
路由强大:如何使用它取决于您的实现,但它需要很少的代码行来将请求路由到指定HTML和控制器(JavaScript)
控制器很棒:控制器负责自己的HTML,但这种分离对公共功能也很有效。如果您想在主HTML上单击按钮时调用相同的函数,只需在每个控制器中写入相同的函数名并编写单独的代码。
插件:还有许多其他类似的功能,如在应用程序中显示覆盖。您不需要为它编写代码,只需使用wc覆盖插件,这将自动处理所有XMLHttpRequest(XHR)请求。
RESTful体系结构的理想选择:作为一个完整的框架,AngularJS非常适合使用RESTful架构。调用REST CRUD API非常简单
服务:使用服务编写公共代码,在控制器中编写更少的代码。服务可用于在控制器之间共享公共功能。
可扩展性:Angular使用Angular指令扩展了HTML指令。在html中编写表达式,并在运行时对其求值。创建自己的指令和服务,并在另一个项目中使用它们,而无需任何额外的工作。
其他回答
为了描述“范式转变”,我认为一个简短的答案就足够了。
AngularJS改变了查找元素的方式
在jQuery中,通常使用选择器来查找元素,然后将它们连接起来:$('#id.class').click(doStuff);
在AngularJS中,您使用指令直接标记元素,将它们连接起来:<a ng click=“doStuff()”>
AngularJS不需要(也不希望)使用选择器查找元素——AngularJS的jqLite与完整的jQuery之间的主要区别是jqLite不支持选择器。
因此,当人们说“根本不包括jQuery”时,主要是因为他们不希望您使用选择器;他们希望你学会使用指令。直接,而不是选择!
请收听播客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:
除了JQLite功能之外,AngularJs和JQuery在每个级别上都完全不同,一旦开始学习AngularJ的核心功能,您就会看到它(我将在下面解释)。
AngularJs是一个客户端框架,用于构建独立的客户端应用程序。JQuery是一个围绕DOM运行的客户端库。
AngularJs酷原则-如果您想对UI进行一些更改,请从模型数据更改的角度考虑。更改数据,UI将重新呈现自身。除非几乎不需要DOM,否则不需要每次都使用DOM,这也应该通过Angular Directive来处理。
为了回答这个问题,我想与AngularJS分享我在第一个企业应用程序上的经验。这些是Angular提供的最棒的功能,我们开始改变jQuery的思维方式,我们得到的Angular就像一个框架,而不是库。
双向数据绑定令人惊叹:我有一个具有UPDATE、DELTE和INSERT功能的网格。我有一个使用ng repeat绑定网格模型的数据对象。您只需编写一行简单的JavaScript代码即可进行删除和插入,就可以了。随着网格模型的即时变化,网格会自动更新。更新功能是实时的,没有代码。你感觉太棒了!!!
可重用指令是超级的:在一个地方编写指令并在整个应用程序中使用。天啊!!!我将这些指令用于分页、正则表达式、验证等。这真的很酷!
路由强大:如何使用它取决于您的实现,但它需要很少的代码行来将请求路由到指定HTML和控制器(JavaScript)
控制器很棒:控制器负责自己的HTML,但这种分离对公共功能也很有效。如果您想在主HTML上单击按钮时调用相同的函数,只需在每个控制器中写入相同的函数名并编写单独的代码。
插件:还有许多其他类似的功能,如在应用程序中显示覆盖。您不需要为它编写代码,只需使用wc覆盖插件,这将自动处理所有XMLHttpRequest(XHR)请求。
RESTful体系结构的理想选择:作为一个完整的框架,AngularJS非常适合使用RESTful架构。调用REST CRUD API非常简单
服务:使用服务编写公共代码,在控制器中编写更少的代码。服务可用于在控制器之间共享公共功能。
可扩展性:Angular使用Angular指令扩展了HTML指令。在html中编写表达式,并在运行时对其求值。创建自己的指令和服务,并在另一个项目中使用它们,而无需任何额外的工作。