“用AngularJS思考”如果我有jQuery背景?[关闭]

javascript jquery angularjs Tomoyo | 2020-02-02 19:35:06


关闭。这个问题需要更加集中。它目前不接受答案。



四年前关闭。

锁定。这个问题及其答案之所以被锁定,是因为这个问题没有话题,但具有历史意义。它目前不接受新的答案或交互。


假设我熟悉在jQuery中开发客户端应用程序,但现在我想开始使用AngularJS。你能描述一下范式转换的必要性吗?以下几个问题可能有助于您确定答案:
如何以不同的方式设计和设计客户端web应用程序?最大的区别是什么?
我应该停止做/使用什么;我应该开始做/使用什么?
是否有服务器端的注意事项/限制?
我不是在寻找jQuery和AngularJS之间的详细比较





15 答案



一。不要设计页面,然后使用jQuery中的DOM manipulations
更改页面,设计一个页面,然后使其动态。这是因为jQuery是为增强而设计的,并且在这个简单的前提下得到了难以置信的发展。
但是在AngularJS中,您必须从一开始就考虑到您的体系结构。不要一开始就想“我有这个DOM,我想让它做X”,你必须从你想完成的事情开始,然后开始设计你的应用程序,最后开始设计你的视图。
2。不要用AngularJS来扩充jQuery
类似地,不要从jQuery执行X、Y和Z的想法开始,所以我将在模型和控制器的基础上添加AngularJS。当你刚开始的时候,这真的很吸引人,这就是为什么我总是建议新的AngularJS开发人员不要使用jQuery,至少在他们习惯于用“角度方式”做事之前是这样的。
我在这里和邮件列表中看到很多开发人员使用jQuery插件创建这些复杂的解决方案,这些插件由150或200行代码组成然后,它们通过一组回调函数和复杂的回调函数粘到AngularJS中,但最终还是成功了!问题是,在大多数情况下,jQuery插件可以用AngularJS在代码的一小部分中重写,在这里,一切突然变得可以理解和简单。
底线是:在解决问题时,首先“用AngularJS思考”;如果你想不出解决方案,请咨询社区;如果在所有这些之后都没有简单的解决方案,那么可以随意访问jQuery。但不要让jQuery成为一个拐杖,否则你将永远无法掌握AngularJS。
3。总是从架构的角度考虑
首先要知道单页应用程序是应用程序。它们不是网页。因此,除了像客户端开发人员那样思考之外,我们还需要像服务器端开发人员那样思考。我们必须考虑如何将我们的应用程序划分为单独的、可扩展的、可测试的组件。
那么,如何做到这一点呢?你怎么“用安格拉斯语思考”?以下是一些与jQuery不同的一般原则。
视图是jQuery中的“正式记录”
我们通过编程更改视图。我们可以有一个下拉菜单,定义为一个类似于这样的ul
的下拉菜单:


在jQuery中,在我们的应用程序逻辑中,我们会用类似于这样的东西来激活它:
$('.main-menu').dropdownMenu();

当我们只是查看视图时,这里没有任何功能是显而易见的。对于小型应用程序来说,这很好。但是对于非平凡的应用程序,事情很快就会变得混乱和难以维护。
在AngularJS中,视图是基于视图的功能的官方记录。我们的
ul
声明应该是这样的:


这两个做相同的事情,但是在AngularJS版本中,任何查看模板的人都知道应该发生什么。每当开发团队的新成员加入时,她都可以看到这一点,然后知道有一个名为
dropdownMenu
的指令在上面运行;她不需要直觉知道正确的答案或筛选任何代码。景色告诉我们应该发生什么。更干净。
刚接触AngularJS的开发人员经常会问这样一个问题:如何找到所有特定类型的link并向它们添加一个指令。当我们回答:你没有,开发人员总是目瞪口呆,但你没有这样做的原因是,这就像半个jQuery,半个AngularJS,没有什么好处。这里的问题是开发人员试图在AngularJS的上下文中“执行jQuery”。那永远不会起作用的。这是官方记录。除了一个指令(下面更多内容),您永远不会,永远,永远不会更改DOM。在视图中应用了指令,因此目的很明确。
记住:不要设计,然后标记。您必须先进行架构设计,然后再进行设计。
数据绑定
这是AngularJS迄今为止最棒的功能之一,并且不需要进行我在上一节中提到的那种DOM操作。AngularJS会自动更新你的视图,所以你不必!在jQuery中,我们响应事件,然后更新内容。类似于:
[7 ] < /代码> < /PRE> > BR>这样的视图:
< PRE> >代码> [代码8 ] /代码> < /PRE> > BR>除了混合关注之外,我们也有前面提到过的表示意图的相同问题。但更重要的是,我们必须手动引用和更新DOM节点。如果我们想删除一个日志条目,我们也必须针对DOM进行编码。除了DOM之外,我们如何测试逻辑?如果我们想更改演示文稿呢?
这有点乱,有点虚弱。但是在AngularJS中,我们可以这样做:
$http( '/myEndpoint.json' ).then( function ( response ) {
$scope.log.push( { msg: 'Data Received!' } );
});

我们的视图可以是这样的:

  • {{ entry.msg }}



但是对于这一点,我们的视图可以是这样的:


{{ entry.msg }}



现在我们使用的不是无序列表,而是引导警报框。而且我们从不需要更改控制器代码!但更重要的是,无论日志在何处或如何更新,视图也将更改。自动。整洁!
虽然我没有在这里显示,但是数据绑定是双向的。因此,只要这样做,这些日志消息也可以在视图中编辑:
。在jQuery中,
不同的模型层,DOM有点像模型。但是在AngularJS中,我们有一个单独的模型层,我们可以以任何方式管理它,完全独立于视图。这有助于上述数据绑定,保持关注点的分离,并引入更大的可测试性。其他的答案也提到了这一点,所以我就把它放在这里吧。
关注点的分离
以上所有这些都与这个主题紧密相关:保持关注点的分离。您的视图充当了应该发生的事情的官方记录(在大多数情况下);您的模型表示您的数据;您有一个服务层来执行可重用的任务;您执行DOM操作,并用指令扩展您的视图;您将其与控制器结合在一起。这一点在其他答案中也提到过,我唯一要补充的是可测试性,我将在下面的另一节中讨论这个问题。
依赖注入
帮助我们分离关注点的是依赖注入(DI)。如果您来自服务器端语言(从Java到PHP),那么您可能已经熟悉了这个概念,但是如果您是来自jQuery的客户机端人员,那么这个概念可能看起来有点傻,有点多余,有点时髦。但事实并非如此。:-)
从广泛的角度来看,DI意味着您可以非常自由地声明组件,然后从任何其他组件声明组件,只要请求它的一个实例,它就会被授予。您不必知道加载顺序、文件位置或诸如此类的内容。这种能力可能不会立即显现出来,但我只提供一个(常见的)示例:测试。
假设在我们的应用程序中,我们需要一个通过REST API实现服务器端存储的服务,并且,根据应用程序状态,还需要本地存储。在我们的控制器上运行测试时,我们不想与服务器通信——毕竟,我们是在测试控制器。我们只需添加一个与原始组件同名的模拟服务,注入器将确保我们的控制器自动获取假服务-我们的控制器不需要知道差异。
说到测试…
4。测试驱动的开发——总是
这确实是关于架构的第3节的一部分,但是我把它作为自己的顶级部分是非常重要的。
在您看到、使用或编写的所有jQuery插件中,有多少有一个附带的测试套件?不是很多,因为jQuery不太适合这样做。但是AngularJS是。
在jQuery中,测试的唯一方法通常是使用一个示例/演示页面独立创建组件,我们的测试可以根据该页面执行DOM操作。因此,我们必须单独开发一个组件,然后将其集成到我们的应用程序中。真不方便!很多时候,在使用jQuery开发时,我们选择迭代开发,而不是测试驱动开发。谁能责怪我们呢?
但是因为我们有关注点的分离,所以我们可以在AngularJS中迭代地进行测试驱动开发!例如,假设我们想要一个超级简单的指令,在我们的菜单中指明我们当前的路线是什么。我们可以在我们的应用程序中声明我们想要的东西:BR> < PRE> >代码> [代码] < /PRE> > BR>好的,现在我们可以编写一个不存在的测试

>代码> [代码14 ] /代码> < /PRE>指令:
< PRE> >代码>(15)< /代码> /PRE> > BR>,当我们运行测试时,我们可以确认它失败了。我们现在才应该创建指令:

.directive( 'whenActive', function ( $location ) {
return {
scope: true,
link: function ( scope, element, attrs ) {
scope.$on( '$routeChangeSuccess', function () {
if ( $location.path() == element.attr( 'href' ) ) {
element.addClass( 'active' );
}
else {
element.removeClass( 'active' );
}
});
}
};
});

我们的测试现在通过,我们的菜单按要求执行。我们的开发是迭代和测试驱动的。太酷了。
5。从概念上讲,指令不是打包的jQuery
您经常会听到“只在指令中进行DOM操作”。这是必须的。以应有的尊重对待它!
但是让我们再深入一点……
一些指令只是修饰视图中已经存在的内容(想想
ngClass
),因此有时直接进行DOM操作,然后基本上就完成了。但是,如果一个指令像一个“小部件”并且有一个模板,它也应该尊重关注点的分离。也就是说,模板也应该在很大程度上独立于其在链接和控制器功能中的实现。
AngularJS提供了一整套工具,使这一过程变得非常简单;通过
ngClass
我们可以动态更新类;
ngModel
允许双向数据绑定;
ngShow
ngHide
以编程方式显示或隐藏一个element;还有更多-包括我们自己编写的。换言之,我们可以在没有DOM操作的情况下完成所有种类的awesomeness。DOM操作越少,测试指令就越容易,它们的样式就越容易

2020-02-02 19:35:18
神兽木马


命令→声明
在jQuery中,选择器用于查找DOM元素,然后将事件处理程序绑定/注册到它们。当事件触发时,执行(命令)代码来更新/更改DOM。
在AngularJS中,您需要考虑视图而不是DOM元素。视图是包含AngularJS指令的(声明性)HTML。指令为我们在幕后设置事件处理程序,并为我们提供动态数据绑定。选择器很少使用,因此对id(和某些类型的类)的需求大大减少。视图绑定到模型(通过作用域)。视图是模型的投影。事件会更改模型(即数据、作用域属性),投影这些模型的视图会“自动”更新。在AngularJS中,考虑模型,而不是jQuery选择的保存数据的DOM元素。将视图视为这些模型的投影,而不是注册回调来操作用户看到的内容。
关注点分离
jQuery使用不显眼的JavaScript-行为(JavaScript)与结构(HTML)分离。
AngularJS使用控制器和指令(每个都可以有自己的控制器,和/或编译和链接函数),以从视图/结构(HTML)中删除行为。AngularJS还提供服务和过滤器,帮助分离/组织应用程序。
另请参见https://stackoverflow.com/a/14346528/215945
应用程序设计
设计AngularJS应用程序的一种方法:
考虑您的模型。为这些模型创建服务或您自己的JavaScript对象。
考虑您希望如何呈现模型——您的视图。为每个视图创建HTML模板,使用必要的指令获取动态数据绑定。
将控制器附加到每个视图(使用ng视图和路由,或ng控制器)。让控制器只查找/获取视图执行其工作所需的任何模型数据。使控制器尽可能薄。
原型继承
您可以使用jQuery做很多事情,而不必知道JavaScript原型继承是如何工作的。在开发AngularJS应用程序时,如果您对JavaScript继承有很好的理解,就可以避免一些常见的陷阱。推荐阅读:在AngularJS中,作用域原型/原型继承有哪些细微差别?

2020-02-02 19:35:18
zealot


AngularJS和jQuery采用截然不同的意识形态。如果您来自jQuery,您可能会发现一些令人惊讶的差异。棱角分明会让你生气。
这很正常,你应该挺身而出。Angular是值得的。
TheBigDifference(TLDR)
jQuery为您提供了一个工具箱,用于选择DOM的任意位并对其进行特殊更改。你可以做任何你喜欢的事情。
AngularJS给你一个编译器。
这意味着AngularJS从上到下读取你的整个DOM,并把它当作代码,字面上就是编译器的指令。当它遍历DOM时,它会寻找特定的指令(编译器指令),这些指令告诉AngularJS编译器如何操作和做什么。指令是充满JavaScript的小对象,可以与属性、标记、类甚至注释匹配。
当角度编译器确定某个DOM片段与某个特定的指令匹配时,它调用该指令函数,将DOM元素、任何属性、当前的$scope(这是一个局部变量存储)和一些其他有用的位传递给它。这些属性可能包含可以由指令解释的表达式,这些表达式告诉指令如何呈现,以及何时应该重新绘制自身。
然后指令可以依次引入额外的角度组件,如控制器、服务等。编译器的底部是一个完全成形的web应用程序,连接好准备出发。
这意味着角度是模板驱动的。你的模板驱动JavaScript,而不是相反。这是角色的根本转变,与我们过去10年左右一直在编写的不引人注目的JavaScript完全相反。这可能需要一些人去适应。
如果这听起来像是过度规定和限制,没有什么能比事实更离谱。因为AngularJS将HTML视为代码,所以可以在web应用程序中获得HTML级别的粒度。一切皆有可能,一旦你有了一些概念上的飞跃,大多数事情都会出人意料地简单。
让我们深入到细节。
首先,角度不能取代jQuery
角度和jQuery做不同的事情。AngularJS为您提供了一套生成web应用程序的工具。jQuery主要提供修改DOM的工具。如果jQuery出现在您的页面上,AngularJS将自动使用它。如果不是,AngularJS会附带jQuery-Lite,这是jQuery的一个精简版,但仍然是完全可用的版本。
Misko喜欢jQuery,并不反对您使用它。但是,随着您的深入,您会发现您可以使用范围、模板和指令的组合完成几乎所有的工作,并且您应该尽可能喜欢此工作流,因为您的代码将更加离散、更加可配置和更加有角度。
如果您使用jQuery,你不应该把它洒得到处都是。在AngularJS中,DOM操作的正确位置是在一个指令中。稍后将详细介绍这些内容。
带有选择器的不引人注目的JavaScript与声明性模板的比较
jQuery通常是不引人注目地应用的。JavaScript代码链接在页眉(或页脚)中,这里是唯一提到它的地方。我们使用选择器来挑选页面的位,并编写插件来修改这些部分。
JavaScript处于控制之中。HTML有一个完全独立的存在。即使没有JavaScript,HTML仍然保持语义。Onclick属性是非常糟糕的做法。
关于AngularJS,您首先会注意到的一点是,自定义属性无处不在。您的HTML将散落着ng属性,本质上是类固醇的onClick属性。这些是指令(编译器指令),是模板与模型挂钩的主要方式之一。
当您第一次看到这一点时,您可能会想把AngularJS写成旧式的侵入式JavaScript(就像我刚开始做的那样)。事实上,AngularJS并没有遵守这些规则。在AngularJS中,HTML5是一个模板。它是由AngularJS编译来生成你的网页的。
这是第一个很大的区别。对于jQuery,您的web页面是一个要操作的DOM。对于AngularJS,HTML是要编译的代码。AngularJS读取整个web页面,并使用内置编译器将其编译成一个新的web页面。
模板应该是声明性的;只要读取它,它的含义就应该很清楚。我们使用具有有意义名称的自定义属性。我们用有意义的名称组成新的HTML元素。一个只有最少的HTML知识和没有编码技能的设计师可以阅读你的AngularJS模板并理解它在做什么。他或她可以修改。这是有角度的方式。
模板在驾驶座上。
当我开始AngularJS并运行教程时,我首先问自己的问题之一是“我的代码在哪里?”。我没有写过JavaScript,但我有所有这些行为。答案显而易见。因为AngularJS编译DOM,所以AngularJS将HTML视为代码。对于许多简单的情况,只要编写一个模板并让AngularJS为您编译成一个应用程序就足够了。
模板驱动您的应用程序。它被视为DSL。您编写了AngularJS组件,AngularJS将负责将它们拉入并根据模板的结构在正确的时间使它们可用。这与标准的MVC模式非常不同,模板只用于输出。
例如,它比Ruby on Rails更类似于XSLT。
这是一种彻底的控制反转,需要一些人去适应。
停止尝试从JavaScript驱动应用程序。让模板驱动应用程序,让AngularJS负责将组件连接在一起。这也是有角度的方式。
语义HTML vs.语义模型
使用jQuery,HTML页面应该包含有语义意义的内容。如果JavaScript被关闭(由用户或搜索引擎关闭),您的内容仍然可以访问。
因为AngularJS将您的HTML页面视为模板。模板不应该是语义的,因为内容通常存储在最终来自API的模型中。AngularJS使用模型编译您的DOM以生成语义web页面。
您的HTML源代码不再是语义的,相反,您的API和编译的DOM是语义的。
在AngularJS中,意思是存在于模型中,HTML只是一个模板,仅用于显示。
此时您可能会遇到各种有关SEO和可访问性的问题,没错。这里有一些悬而未决的问题。大多数屏幕阅读器现在将解析JavaScript。搜索引擎也可以索引AJAXed内容。不过,你要确保你使用的是pushstate网址,你有一个像样的网站地图。关于这个问题的讨论,请看这里:https://stackoverflow.com/a/23245379/687677
关注点分离(SOC)与MVC
关注点分离(SOC)是一种在多年的web开发过程中成长起来的模式,其原因包括SEO、可访问性和浏览器不兼容。它看起来是这样的:
HTML-语义含义。HTML应该是独立的。
CSS-样式化,没有CSS,页面仍然可读。
JavaScript-行为,没有脚本,内容仍然存在。
同样,AngularJS不按规则运行。在一次中风中,AngularJS消除了十年来的智慧,而是实现了一个MVC模式,在这个模式中,模板不再是语义的,甚至一点也不是。模型通常是JSON对象。模型作为对象的属性存在,称为$范围。您还可以在$scope上存储方便的实用程序函数,然后您的模板可以访问这些函数。
视图-您的视图是用HTML编写的。视图通常不是语义的,因为您的数据存在于模型中。
Controller-您的控制器是一个JavaScript函数,它将视图挂接到模型上。它的功能是初始化$scope。根据应用程序的不同,您可能需要也可能不需要创建控制器。页面上可以有多个控制器。
MVC和SOC不在同一刻度的两端,它们在完全不同的轴上。SOC在AngularJS上下文中没有意义。你必须忘掉它,继续前进。
如果你像我一样经历过浏览器大战,你可能会觉得这个想法很不礼貌。算了吧,这是值得的,我保证。
插件vs.指令
插件扩展jQuery。AngularJS指令扩展了浏览器的功能。
在jQuery中,我们通过向jQuery.prototype添加函数来定义插件。然后,通过选择元素并调用结果上的插件,将这些元素挂接到DOM中。这样做的目的是扩展jQuery的功能。
例如,如果您希望在页面上有一个carousel,您可以定义一个无序的图形列表,可能包装在nav元素中。然后,您可以编写一些jQuery来选择页面上的列表,并将其重新样式为带有超时的库,以执行滑动动画。
在AngularJS中,我们定义了指令。指令是返回JSON对象的函数。这个对象告诉AngularJS要查找哪些DOM元素,以及要对它们进行哪些更改。指令使用您发明的属性或元素连接到模板。其思想是用新的属性和元素扩展HTML的功能。
AngularJS的方法是扩展看起来像本机的HTML的功能。您应该编写类似于HTML的HTML,并使用自定义属性和元素进行扩展。
如果您想要旋转木马,只需使用
元素,然后定义一个指令来拉入模板,让这个吸盘工作。
许多小指令与带有配置开关的大插件相比
jQuery的趋势是编写像lightbox这样的大插件,然后我们通过传递许多值和选项来配置它。
这是AngularJS中的一个错误。
以一个下拉列表为例。在编写下拉插件时,您可能会尝试在单击处理程序中编写代码,可能会尝试添加一个向上或向下的V形的函数,可能会更改展开元素的类,显示hide the me

2020-02-02 19:35:18
非常に强いよ


你能描述一下必要的范式转换吗?
命令式与声明式
使用jQuery可以一步一步地告诉DOM需要发生什么。用AngularJS你可以描述你想要什么结果,但不是怎么做。更多关于这个的信息。另外,请查看Mark Rajcok的答案。
如何以不同的方式设计和设计客户端web应用程序?
AngularJS是一个使用MVC模式的完整客户端框架(查看它们的图形表示)。它非常注重关注点的分离。
最大的区别是什么?我应该停止做/使用什么;我应该开始做/使用什么?
jQuery是一个库
AngularJS是一个漂亮的客户端框架,高度可测试,它结合了很多很酷的东西,比如MVC、依赖注入、数据绑定等等。
它专注于关注点和测试(单元测试和端到端测试)的分离,这有助于测试驱动的开发。
最好的开始方式是通过他们的精彩教程。你可以在几个小时内完成这些步骤;但是,如果你想掌握幕后的概念,它们包含了大量的参考资料,以便进一步阅读。
是否有服务器端的注意事项/限制?您可以在已经使用纯jQuery的现有应用程序上使用它。但是,如果你想充分利用AngularJS的特性,你可以考虑使用RESTful方法对服务器端进行编码。
这样做可以让你充分利用他们的资源工厂,这将创建一个服务器端RESTful API的抽象,并使服务器端调用(get、save、delete等)变得非常容易。

2020-02-02 19:35:18
花鳥玲愛


为了描述“范式转换”,我认为一个简短的答案就足够了。
AngularJS改变了在jQuery中查找元素的方式,通常使用选择器查找元素,然后将它们连接起来:
$('#id .class').click(doStuff);

在AngularJS中,使用指令直接标记元素,要将它们连接起来:

AngularJS不需要(或希望)使用选择器来查找元素-AngularJS的jqLite与完全成熟的jQuery之间的主要区别是jqLite不支持选择器。
所以当人们说“根本不包括jQuery”时,主要是因为他们不想让您使用选择器;他们想让您学习使用指令。直接,不是选择!

2020-02-02 19:35:18
kane


jQuery
jQuery使得像
getElementByHerpDerp
这样的长得离谱的JavaScript命令变得更短、跨浏览器。
AngularJS
AngularJS允许您创建自己的HTML标记/属性,这些标记/属性可以很好地处理动态web应用程序(因为HTML是为静态页面设计的)。
编辑:
说“我有一个jQuery”背景:我怎么看待安格拉斯语?”就像是说“我有一个HTML背景,在JavaScript中我是怎么想的?”你问这个问题的事实表明你很可能不理解这两个资源的基本目的。这就是为什么我选择通过简单地指出根本的区别来回答这个问题,而不是通过一个列表来回答“AngularJS使用指令,而jQuery使用CSS选择器来生成jQuery对象,从而实现这一点等等……”。这个问题不需要冗长的回答。
jQuery是一种使在浏览器中编程JavaScript变得更容易的方法。更短的、跨浏览器的命令等。
AngularJS扩展了HTML,因此您不必为了制作应用程序而到处乱放
。它使HTML实际上可以为应用程序工作,而不是为它设计的静态的、教育性的web页面。它使用JavaScript以一种迂回的方式实现了这一点,但基本上它是HTML的扩展,而不是JavaScript。

2020-02-02 19:35:18
chiyi1908


jQuery:你想了很多关于“查询DOM”DOM元素和做一些事情的事情。
AngularJS:模型是事实,你总是从这个角度来思考。
例如,当你从服务器获取数据,你打算在DOM中以某种格式显示时,在jQuery中,你需要'1。找到“要在DOM中放置此数据的位置”2。通过创建一个新节点或仅仅设置其innerHTML来更新/追加它。然后当你想更新这个视图时,你就3。找到“位置”和“4”。更新'。在从服务器获取和格式化数据的同一上下文中查找和更新所有内容的循环在AngularJS中消失了。
对于AngularJS,您拥有自己的模型(您已经习惯了JavaScript对象),模型的值告诉您模型(显然)和视图,模型上的操作会自动传播到视图中,因此您不必考虑它。你会发现自己在AngularJS中找不到DOM中的任何东西。
换言之,在jQuery中,你需要考虑CSS选择器,也就是说,有类或属性的
div
td
在哪里,这样我就可以得到它们的HTML、颜色或值,但是在AngularJS中,你会发现自己这样想:我在处理什么模型,我会将模型的值设置为真。您不必担心反映该值的视图是一个复选框还是位于
td
元素中(在jQuery中通常需要考虑的详细信息)。
并且使用AngularJS中的DOM操作,您会发现自己添加了指令和过滤器,在AngularJS中还有一件事你会体验到:在jQuery中你经常调用jQuery函数,在AngularJS中,AngularJS会调用你的函数,所以AngularJS会“告诉你怎么做”,但是它的好处是值得的,所以学习AngularJS通常意味着学习AngularJS想要什么或者AngularJS要求您呈现函数并相应地调用它的方式。这是使AngularJS成为一个框架而不是一个库的原因之一。

2020-02-02 19:35:18
夏色の砂时计


这些都是一些非常好但冗长的答案。
总结一下我的经验:
控制器和提供者(服务、工厂等)用于修改数据模型,而不是HTML。
HTML和指令定义布局并绑定到模型。
如果需要在控制器之间共享数据,创建一个服务或工厂-它们是在应用程序中共享的单个组件。
如果需要HTML小部件,请创建一个指令。
如果您有一些数据,正在尝试更新HTML。。。住手!更新模型,并确保HTML已绑定到模型。

2020-02-02 19:35:18
睡不醒的虾米


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作为一门一流的语言来学习!”
我很难理解上述事实。
祝你好运。

2020-02-02 19:35:18
CrAzy橙


它们是苹果和桔子。你不想比较它们。它们是两种不同的东西。AngularJs已经构建了jQuery-lite,它允许您执行基本的DOM操作,甚至不包括成熟的jQuery版本。
jQuery完全是关于DOM操作的。它解决了所有跨浏览器的麻烦,否则你将不得不处理,但它不是一个框架,允许你把你的应用程序分成像AngularJS这样的组件。
AngularJs的一个优点是它允许您分离/隔离指令中的DOM操作。有一些内置指令可供您使用,例如ng click。您可以创建自己的自定义指令,该指令将包含所有视图逻辑或DOM操作,这样您就不会在应该负责业务逻辑的控制器或服务中混合DOM操作代码。
Angular将应用程序分解为
-controllers
-services
-Views
-etc.
还有一件事,这是指令。这是一个可以附加到任何DOM元素的属性,您可以在其中疯狂地使用jQuery,而不必担心jQuery与AngularJs组件冲突或破坏其体系结构。
我从参加的一个会议上听说,Angular的一位创始人说,他们非常努力地将DOM操作分离出来,所以不要试图将它们再包含进来。

2020-02-02 19:35:18
你说这咋整啊?


请收听播客JavaScript Jabber:32集,该集介绍了AngularJS的原始创建者:Misko Hevery和Igor Minar。他们谈论了很多来自其他JavaScript背景,特别是jQuery的AngularJS的感觉。
播客中的一点让我对你的问题有了很多想法:
MISKO:[…]我们很难从角度考虑的一件事是,我们如何提供大量的转义舱口,让你能从中脱身并找到解决办法。所以对我们来说,答案就是这个叫做“指令”的东西。有了指令,你基本上就变成了一个普通的jQuery小JavaScript,你可以做任何你想做的事情。
IGOR:所以把指令想象成编译器的指令,当你在模板中遇到某个元素或这个CSS时,它会告诉编译器,你保留这类代码,这些代码负责DOM树中元素和元素下面的所有内容。
在上面提供的链接中可以找到整个事件的转录本。
所以,直接回答你的问题:AngularJS非常固执己见,是一个真正的MV*框架。但是,您仍然可以在指令中使用jQuery来做所有您知道并喜欢的非常酷的事情。这不是一个“我该怎么做我以前在jQuery中做的事”的问题就像“如何用我在jQuery中所做的所有事情来补充AngularJS?”
这其实是两种截然不同的心态。

2020-02-02 19:35:18
ザラキ


我觉得这个问题很有趣,因为我第一次接触JavaScript编程是Node.js和AngularJS。我从来没有学过jQuery,我想这是件好事,因为我不必忘记任何东西。事实上,我积极地避免使用jQuery解决我的问题,而是只寻找一种“AngularJS方法”来解决它们。所以,我想我对这个问题的回答基本上可以归结为“像一个从未学过jQuery的人一样思考”,并避免任何诱惑直接合并jQuery(显然AngularJS在某种程度上是在幕后使用的)。

2020-02-02 19:35:18
逆向弹幕


AngularJS和jQuery:
AngularJS和jQuery在每个级别上都完全不同,除了JQLite功能之外,一旦您开始学习AngularJS的核心功能(我在下面解释了它),您就会看到它。
AngularJS是一个客户端框架,提供了构建独立客户端应用程序的功能。JQuery是一个围绕DOM运行的客户端库。
AngularJs Cool Principle-如果您想要对UI进行一些更改,请从模型数据更改的角度考虑。更改数据后,UI将重新呈现自身。你不必每次都玩弄DOM,除非它不是必需的,而且也应该通过角度指令来处理它。
要回答这个问题,我想与AngularJS分享我在第一个企业应用程序上的经验。这些是Angular提供的最棒的功能,我们开始改变jQuery的思维方式,我们得到的Angular就像一个框架,而不是库。
双向数据绑定是惊人的:
我有一个包含所有功能更新、DELTE和INSERT的网格。我有一个使用ng repeat绑定网格模型的数据对象。你只需要写一行简单的JavaScript代码就可以删除和插入了。网格模型立即更改时,网格会自动更新。更新功能是实时的,不需要代码。
你会感觉棒极了!!!
可重用指令是超级的:
在一个地方编写指令并在整个应用程序中使用它。天啊!!! 我把这些指令用于分页、regex、验证等,真的很酷!
路由很强:
如何使用它取决于您的实现,但是路由请求需要很少的代码行来指定HTML和控制器(JavaScript)
控制器很好:
控制器处理自己的HTML,但是这种分离对于公共功能也很好。如果你想在主HTML上点击一个按钮调用同一个函数,只需在每个控制器上写下相同的函数名,然后编写单独的代码即可。
插件:
还有很多类似的功能,比如在你的应用中显示覆盖图。您不需要为它编写代码,只需使用wc overlay提供的overlay插件,这将自动处理所有XMLHttpRequest(XHR)请求。
非常适合RESTful架构:
作为一个完整的框架,AngularJS非常适合使用RESTful架构。调用REST CRUD api非常简单,而且
服务:使用服务编写公共代码,在控制器中编写更少的代码。服务可用于在控制器之间共享公共功能。
可扩展性:Angular使用Angular指令扩展了HTML指令。在html中编写表达式并在运行时对其求值。创建自己的指令和服务,并在其他项目中使用它们,而无需任何额外的努力。

2020-02-02 19:35:18
morry


作为一个JavaScript MV*初学者,纯粹关注应用程序架构(而不是服务器/客户端问题),我当然会推荐以下资源(我很惊讶还没有提到):Addy Osmani的JavaScript设计模式,作为对不同JavaScript设计模式的介绍。此答案中使用的术语取自上述链接文档。我不打算在已被接受的答案中重复那些措辞很好的话。相反,这个答案可以追溯到支持AngularJS(和其他库)的理论背景。
像我一样,你会很快意识到AngularJS(或者Ember.js、Durandal和其他MV*框架)是一个复杂的框架,集合了许多不同的JavaScript设计模式。
我发现测试起来也更容易(1)在跳入一个全局框架之前,分别为每个模式提供本地JavaScript代码和(2)较小的库。这使我能够更好地理解框架所处理的关键问题(因为您个人面临这个问题)。
例如:
JavaScript面向对象编程(这是一个Google搜索链接)。它不是一个库,但肯定是任何应用程序编程的先决条件。它告诉我原型、构造函数、单体和装饰器模式的原生实现:BrasejQuery /下划线用于外观模式(如WysiWyg的用于操纵DOM):原型/构造器/MIXIN模式的BR>原型。发布/订阅模式
注意:这个列表不完整,也不是“最佳库”;它们恰好是我使用的库。这些库还包括更多的模式,其中提到的只是它们的主要焦点或原始意图。如果您觉得列表中缺少某些内容,请在评论中提及,我很乐意添加。

2020-02-02 19:35:18
白兔酱


实际上,如果您使用AngularJS,就不再需要jQuery了。AngularJS本身具有绑定和指令,这是一个很好的“替代品”,可以替代jQuery的大部分功能。
我通常使用AngularJS和Cordova开发移动应用程序。我只需要jQuery中的选择器。
通过google,我看到有一个独立的jQuery选择器模块。它的嘶嘶声。
我决定用jQuery选择器(使用Sizzle)的强大功能,用AngularJS快速创建一个网站,
我在这里分享了我的代码:https://github.com/huytd/Sizzular

2020-02-02 19:35:18
KOKO


World is powered by solitude
备案号:湘ICP备19012068号