假设我熟悉在jQuery中开发客户端应用程序,但现在我想开始使用AngularJS。你能描述一下必要的范式转变吗?以下几个问题可能有助于您确定答案:
如何以不同的方式构建和设计客户端web应用程序?最大的区别是什么?我应该停止做什么/使用什么;我应该开始做什么?是否有服务器端的考虑/限制?
我不想详细比较jQuery和AngularJS。
假设我熟悉在jQuery中开发客户端应用程序,但现在我想开始使用AngularJS。你能描述一下必要的范式转变吗?以下几个问题可能有助于您确定答案:
如何以不同的方式构建和设计客户端web应用程序?最大的区别是什么?我应该停止做什么/使用什么;我应该开始做什么?是否有服务器端的考虑/限制?
我不想详细比较jQuery和AngularJS。
当前回答
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编程是Node.js和AngularJS。我从未学习过jQuery,我想这是一件好事,因为我不必忘记任何东西。事实上,我积极避免使用jQuery解决我的问题,而是只寻找一种“AngularJS方法”来解决它们。因此,我想我对这个问题的回答基本上可以归结为,“像从未学习过jQuery的人一样思考”,并避免任何直接合并jQuery的诱惑(显然AngularJS在某种程度上在幕后使用了它)。
它们是苹果和橘子。你不想比较它们。它们是两种不同的东西。AngularJs已经内置了jQuery lite,它允许您执行基本的DOM操作,甚至不包括完整的jQuery版本。
jQuery完全是关于DOM操作的。它解决了所有跨浏览器的问题,否则您将不得不处理,但它不是一个允许您将应用程序划分为AngularJS等组件的框架。
AngularJs的一个优点是它允许您在指令中分离/隔离DOM操作。有内置指令可供您使用,例如ng-click。您可以创建自己的自定义指令,这些指令将包含所有视图逻辑或DOM操作,这样您就不会在应该处理业务逻辑的控制器或服务中混合DOM操作代码。
Angular将应用程序分解为-控制器-服务-视图-等等。
还有一件事,那就是指令。它是一个可以附加到任何DOM元素的属性,您可以在其中使用jQuery,而不必担心jQuery会与AngularJs组件冲突或破坏其架构。
我从我参加的一次会议上听到,Angular的创始人之一表示,他们非常努力地将DOM操作分离出来,所以不要试图将它们重新纳入其中。
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”时,主要是因为他们不希望您使用选择器;他们希望你学会使用指令。直接,而不是选择!
jQuery
jQuery使getElementByHerpDerp等长得离谱的JavaScript命令变得更短,并且跨浏览器。
角度JS
AngularJS允许您制作自己的HTML标记/属性,这些标记/属性可以很好地处理动态web应用程序(因为HTML是为静态页面设计的)。
编辑:
说“我有jQuery背景,我在AngularJS中如何思考?”就像说“我拥有HTML背景,我如何在JavaScript中思考?”你问这个问题的事实表明你很可能不理解这两个资源的基本目的。这就是为什么我选择通过简单地指出根本区别来回答这个问题,而不是通过列表来回答“AngularJS使用指令,而jQuery使用CSS选择器来创建一个jQuery对象,该对象执行这和那等操作……”。这个问题不需要冗长的回答。
jQuery是一种使浏览器中的JavaScript编程更容易的方法。更短的跨浏览器命令等。
AngularJS扩展了HTML,因此您不必为了创建应用程序而到处放置<div>。它使HTML实际上适用于应用程序,而不是它的设计目的,即静态的教育网页。它使用JavaScript以迂回的方式实现了这一点,但基本上它是HTML的扩展,而不是JavaScript。