Javascript &引用；“用AngularJS思考”；如果我有jQuery背景？

假设我熟悉在中开发客户端应用程序，但现在我想开始使用。你能描述一下必要的范式转换吗？以下几个问题可能会帮助您确定答案：

• 如何以不同的方式构建和设计客户端web应用程序？最大的区别是什么
• 我应该停止做什么/使用什么；我应该开始做什么/使用什么
• 是否存在任何服务器端注意事项/限制

我不想详细比较

jQuery

和

AngularJS

命令→ 声明的 在jQuery中，选择器用于查找元素，然后将事件处理程序绑定/注册到元素。当事件触发时，该（命令式）代码将执行以更新/更改DOM

在AngularJS中，您需要考虑的是视图，而不是DOM元素。视图是包含AngularJS指令的（声明性）HTML。指令在幕后为我们设置事件处理程序，并为我们提供动态数据绑定。选择器很少使用，因此对ID（和某些类型的类）的需求大大减少。视图与模型绑定（通过作用域）。视图是模型的投影。事件会更改模型（即数据、范围属性），投影这些模型的视图会“自动”更新

在AngularJS中，考虑模型，而不是保存数据的jQuery选定DOM元素。将视图视为这些模型的投影，而不是注册回调来操纵用户看到的内容

关注点分离 jQuery-behavior（JavaScript）与结构（HTML）分离

AngularJS使用控制器和指令（每个指令都可以有自己的控制器和/或编译和链接函数）从视图/结构（HTML）中删除行为。Angular还提供服务和过滤器，以帮助分离/组织应用程序

另见

应用程序设计 设计AngularJS应用程序的一种方法：

想想你的模特。为这些模型创建服务或您自己的JavaScript对象

想想你想如何展示你的模型——你的观点。使用必要的指令为每个视图创建HTML模板，以获得动态数据绑定

将控制器连接到每个视图（使用ng view and routing或ng controller）。让控制器仅查找/获取视图执行其工作所需的任何模型数据。使控制器尽可能薄

原型遗传 您可以在不了解JavaScript原型继承如何工作的情况下使用jQuery做很多事情。在开发AngularJS应用程序时，如果您对JavaScript继承有很好的理解，就可以避免一些常见的陷阱。建议阅读：

你能描述一下必要的范式转换吗

命令式与声明式

使用jQuery可以一步一步地告诉DOM需要做什么。使用可以描述想要的结果，而不是如何实现。更多关于这个。还有，看看马克·拉科克的答案

如何以不同的方式构建和设计客户端web应用程序

AngularJS是一个完整的客户端框架，它使用该模式（查看它们的示例）。它非常注重关注点的分离

最大的区别是什么？我应该停止做什么/使用什么；我应该开始做什么/使用什么

jQuery是一个库

AngularJS是一个漂亮的客户端框架，高度可测试，它结合了大量很酷的东西，比如MVC、数据绑定等等

它侧重于测试和测试（以及端到端测试），这有助于测试驱动的开发

最好的开始方式是经历。你可以在几个小时内完成这些步骤；然而，如果你想掌握幕后的概念，它们包含了大量的参考资料供进一步阅读

是否存在任何服务器端注意事项/限制

您可以在已经使用纯jQuery的现有应用程序上使用它。但是，如果您想充分利用angurjs特性，您可以考虑使用一种方法对服务器端进行编码。 这样做可以让您充分利用它们的功能，从而创建服务器端RESTful的抽象，并使服务器端调用（获取、保存、删除等）变得非常简单。

1。不要设计你的页面，然后通过操纵来改变它 在jQuery中，设计一个页面，然后使其成为动态页面。这是因为jQuery是为增强而设计的，并且从这个简单的前提发展而来，其增长速度令人难以置信

但是在AngularJS中，您必须从头开始，牢记您的体系结构。不要一开始就认为“我有一块DOM，我想让它做X”，你必须从你想要完成的事情开始，然后开始设计你的应用程序，最后开始设计你的视图

2.不要用AngularJS扩充jQuery 类似地，不要从jQuery执行X、Y和Z开始，因此我将在模型和控制器的基础上添加AngularJS。这在刚开始的时候很有诱惑力，这就是为什么我总是建议新的AngularJS开发人员不要使用jQuery，至少在他们习惯用“角度方式”做事之前

我在这里和邮件列表中看到许多开发人员使用150或200行代码的jQuery插件创建了这些精心设计的解决方案，然后他们通过回调和

$apply

s的集合将这些插件粘到AngularJS中，这些插件既混乱又复杂；但他们最终还是成功了！问题是在大多数情况下，jQuery插件可以用AngularJS在c语言的一小部分中重写

<a ng-click="toggle()">Menu</a>
<ul ng-show="menu.visible">
  ...
</ul>

<a ng-mouseenter="unfold()" ng-mouseleave="fold()">Menu</a>
<ul ng-show="menu.visible">
  ...
</ul>

<input ng-model="user.name" />

<p>
  {{user.name}}
</p>

myApp.service('FlickrService', function() {
  return {
    getFeed: function() { // do something here }
  }
});

myApp.controller('myController', ['FlickrService', function(FlickrService) {
  FlickrService.getFeed()
}]);