javascript - " AngularJS"怎么样? 如果我有jQuery的知识背景.
1 。 不设计页面，将其修改为 DOM 操纵
你在JQuery，你先设计页面，然后让它变成动态的。 这是因为JQuery设计成扩展和扩展极为简单。
但是在AngularJS，你的架构必须从最基础的开始。 而不是从一个角度去想" 我以前那个DOM, 然后我想让它做X "，你可以从你想实现的目标开始，然后开始干活，究竟应该设计系统，最后一个是设计视图。
2 。 AngularJS不是增强版的JQuery
这是真诱人的，当你开始时，所以我总是建议新AngularJS开发者根本不使用JQuery，至少直至习惯采用" Angular Way " 。
我见过许多开发人员来创建这些精美的解决方案，然后在邮件列表JQuery插件150 - 200行代码，然后然后粘附到AngularJS拿到一组回调和 $applys 的混乱和繁复的成功，却最终明白了 ！ 问题就出在 大多数情况下，它可以重写成JQuery插件AngularJS用比代码，其中突然一切都变得更易懂和简洁的。
基本原则是： 在解决问题时，先"思考"，如果想不出一个解决方案，问社区, 如果整个社区的所有内容都没有简单的办法，然后随时使用JQuery 。 但不要让JQuery成为阻碍，否则你再也别想成为AngularJS高手 。
3 。 总在体系结构方面思考
首先知道单页程序是 应用程序。 他们不是网页。 这样我们就需要像一个服务器端开发者思考, 除了思考像一个客户端开发者。 我们不得不思考如何将我们的应用程序分解为独立的，可扩展，可测试的组件。
于是 你是怎么办到的？ 你怎么在AngularJS " 思考"？ 以下是相比JQuery的一些一般原则
视图是" official record "
在JQuery中，我们以编程方式更改视图。 我们可以有一个下拉菜单定义为 ul就像这样：
<ul class="main-menu">
<li class="active">
<a href="#/home">Home</a>
</li>
<li>
<a href="#/menu1">Menu 1</a>
<ul>
<li><a href="#/sm1">Submenu 1</a></li>
<li><a href="#/sm2">Submenu 2</a></li>
<li><a href="#/sm3">Submenu 3</a></li>
</ul>
</li>
<li>
<a href="#/home">Menu 2</a>
</li>
</ul>
在JQuery，具有类似于在我们的应用程序逻辑时，我们可以将其激活：
$('.main-menu').dropdownMenu();当我们看看这里有任何功能的观点来看，不是很明显。 实现一些小型应用，没关系的 但是，事情很快变得杂乱而非普通的应用程序难以维护。
但在AngularJS中，视图是基于视图的正式记录的功能。 我们 ul声明类似于如下代码：
<ul class="main-menu" dropdown-menu>
...
</ul>
这两个模板AngularJS版本中执行相同的操作,但是别人在看就知道什么是注定要发生的 每当有新的成员加入开发团队的时候，都可以看看这个然后 那里是指令打的电话 dropdownMenu上运行它，能够直接获得正确的答案或者筛选一下她不需要任何代码。 告诉我们到底是应该发生的视图。 要更清晰一些。
开发人员熟悉AngularJS经常问的一个问题是这样的： 如何找到一种特定类型的所有链接并将指令添加到它们。 开发人员总是flabbergasted当我们回复： 你最好别关。 但是你不这样做的原因是，它就变成一半JQuery，一半AngularJS，不行。 其问题在于，开发者正试图" 做JQuery " AngularJS的上下文中。 那是永远都不可能正常工作。 是官方记录的视图。 外部的指令( 下面是详细信息)，则大到从不更改DOM 。 和指令在视图中应用，所以目的很明确。
请记住： 不要设计，然后标记。 必须架构，然后设计。
数据绑定
这是到目前为止最棒的功能之一AngularJS熄火了创造出更多的人来做这一类的DOM操纵以上一节所述。 AngularJS会自动更新view，不必吧 ！ 在JQuery中，我们对事件进行响应，然后更新内容。 就像这样：
$.ajax({
url: '/myEndpoint.json',
success: function ( data, status ) {
$('ul#log').append('<li>Data Received!</li>');
}
});
对于的视图如下所示：
<ul class="messages" id="log">
</ul>除了针对某些意图，即我前面提到的混合的关注，我们也有相同的问题。 更重要的是，我们得手动引用和更新DOM节点。 如果我们想删除日志项，我们必须编写针对DOM它了太。 我们如何测试逻辑的DOM分开？ 那么假如我们想要更改该演示文稿？
为一点小事这有点混乱和脆弱。 但是在AngularJS，我们可以这样做：
$http( '/myEndpoint.json' ).then( function ( response ) {
$scope.log.push( { msg: 'Data Received!' } );
});
我们的view可以如下所示：
<ul class="messages">
<li ng-repeat="entry in log">{{ entry.msg }}</li>
</ul>
但在这个问题以上，我们的视图看起来可能类似于：
<div class="messages">
<div class="alert" ng-repeat="entry in log">
{{ entry.msg }}
</div>
</div>
现在，而不是使用无序列表，我们使用的是Bootstrap提示对话框。 和我们根本无需更改控制器代码 ！ 但是更重要的是，不管 或者 日志如何获得更新，视图的位置也会改变的。 自动进行。 整齐 ！
虽然我不在这里展示给大家，数据绑定是双向的。 所以这些日志信息，也可以编辑该视图中只需这样做： <input ng-model="entry.msg" />. 然后大受鼓舞，天降神牛。
不同的model层
在JQuery，DOM有点像模型。 但我们期望AngularJS，我们有一个单独的model层，我们可以任何方式管理，完全独立于视图。 对上面的数据绑定，这有助于维护的分离，并引入了更强的可测试性。 其他答案提到了这一点，所以我就不要再讨论这个问题。
关注分离
及其所有上面的绑定事情给拱着背⣺数据 你所关心的问题保持独立。 view作为正式记录的情况到底是什么( 在大多数情况下)，模型代表了你的数据，你有一个服务层执行的可重用任务，你Dom操作并增加你的视图和控制器的指令，并且将其粘附到一起。 这也是其他答案中提到的，我唯一要添加和可测试性有关，它下面的另一节中讨论。
依赖注入
帮我们跟关注分离他会依赖注入 ( DI ) 。 如果是从服务器端语言( 从 Java 到 PHP ) 中你可能已经熟悉这个概念,但是如果你是一个客户端的人来自JQuery，这个概念可以从愚蠢到什么多余的感觉- 时髦。 可是没办法 = = = = =
从广泛的角度来看，di意味着你可以非常自由地声明组件然后从其他组件，只不过想讨回它的示例，它将被拒绝。 你不必知道加载顺序，或者文件位置，或者其他类似的。 可以自由选择可能无法立即可见,但是我只提供一个( 一般) 例如： 测试。
假设在我们的应用程序中，我们需要一个服务，以实现服务器端存储通过 REST APi多少，也应用程序状态，本地存储。 我们不想在我们的控制器，当运行测试和服务器通信我们测试毕竟 控制器。 我们可以加在名称和我们最初组件相同的mock服务，并自动注入器能够确保我们的controller获得一个假冒我们的controller时，不会也没必要知道子弹是假的
说到测试的- -
4 。 测试驱动开发(TDD)总是
这其实就是以上节3 体系结构的一部分,但是它很重要，我会把它作为自己的顶级节。
在众多的众多JQuery插件或者编写的，你所看到的，使用了多少台机器有了对应测试套件？ 不是太多，因为JQuery不是很乐意接受的。 但AngularJS是。
在JQuery，唯一的方式就是经常创建使用针对这我们的测试可以执行Dom操作sample/demo页单独的组件。 所以我们需要单独开发一个组件，然后 将它集成到我们的应用程序了。 多不方便啊 ！ 你太多的时间，使用JQuery进行开发时，我们倾向于采用迭代而不是测试驱动开发(TDD)。 谁能怪我们？
而是因为我们关注分离，我们才能够在AngularJS测试驱动开发(TDD)反复 ！ 例如，假设我们想要一个超级简单的指令以指示我们的菜单了解企业当前路由。 我们可以声明我们想要在我们的应用程序的视图：
<a href="/hello" when-active>Hello</a>好了，现在我们来编写一个测试用于非顺差 when-active指令：
it( 'should add "active" when the route changes', inject(function() {
var elm = $compile( '<a href="/hello" when-active>Hello</a>' )( $scope );
$location.path('/not-matching');
expect( elm.hasClass('active') ).toBeFalsey();
$location.path( '/hello' );
expect( elm.hasClass('active') ).toBeTruthy();
}));
当我们运行我们的测试，我们可以确认它将失败。 不过现在我们要创建我们的指令：
.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操作全部都得离开，然后就是基本完成了。 但是如果指令类似于一个" widget "，有一个模板，它还应该 关注分离应有的尊重 即在link和controller模板太应保持很大程度以上独立于其实现的功能。
AngularJS附带了一个完整的工具集，使疾病这个非常方便， ngClass我们可以动态地更新class ： ngModel支持双向数据绑定， ngShow和 ngHide以编程方式显示或者隐藏一个元素，更多的人，包括那些我们自己写。 换句话说，我们可以做各种各样的有多厉害没有 Dom操作。 Dom操作较少，较简单的指令来测试，而是如何样式，则它们在将来更改起来越容易，越re可用和可分配它们。
我看到很多开发者第一次AngularJS使用指令设定成throw一群JQuery 。 换句话说，他们认为" 因为我做不到Dom操作在控制器中，我把你的代码放进一个指令" 。 虽然这确实好多了，经常犯错 。
我们把记录器第3 节的编程。 即使我们把它写到一个指令，我们仍然 要做到" Angular Way " 。 它仍然 不带任何Dom操作 ！ 有许多有时候Dom操作是必要的，而且这是一个 极少数比你想得还 ！ 在执行Dom操作 在应用程序中任何地方，问问自己是否真的需要。 可能会有一个更好的方法。
这里是一个简单的示例来说明我看得最频繁的模式。 我们想要一个toggleable按钮。 ( note: 本示例实现的功能是有点勉强和skosh详细表示更复杂的情况，问题还没使用同样的方法) 。
.directive( 'myDirective', function () {
return {
template: '<a class="btn">Toggle me!</a>',
link: function ( scope, element, attrs ) {
var on = false;
$(element).click( function () {
on = !on;
$(element).toggleClass('active', on);
});
}
};
});
有些问题是这个问题：
- 首先，JQuery从来不是必要的。 我们在这做的没有什么东西需要JQuery吧 ！
- 其次，即使我们已经有了我们在这里页面，则没有必要使用它，我们可以简单地使用JQuery On
angular.element我们的组件放入一个项目，没有JQuery时仍然有效。 - 再次，即使假设JQuery 是这里指令生效，jqLite ( hadoop
angular.element) 将使用JQuery 总是，如果加载了 ！ 这样我们就没有必要使用$我们可以直接使用angular.element. - 四是密切相关的第三个，就是jqLite元素不必是包装在
$。element传递给link函数将已经 JQuery元素 ！ - 和第五点我们以上一节中提到的，我们为什么要合成模板的东西进入我们的逻辑？
此指令可被改写( 即使是非常复杂的情况下，) 变得更加简单的如下所示：
.directive( 'myDirective', function () {
return {
scope: true,
template: '<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',
link: function ( scope, element, attrs ) {
scope.on = false;
scope.toggle = function () {
scope.on = !scope.on;
};
}
};
});
同样，这些样板的东西是在模板中，因此你( 或者你的用户) 可以很容易地把它取出的一个必需符合任何样式和 逻辑也不需要被人碰触 可重用性又怎样 ！
而且还有这好处，比如测试这很简单的 不管是在模板中，指令将内部APi后不会有任何改动，所以重构并不难。 则可以更改模板腿毛而不碰到袋子以上的指令。 不管你怎么改变，你的测试仍然能通过。
w00t ！
所以如果指令不把JQuery的集合和函数不同，他们是什么？ 指令实际上是延长HTML 。 如果HTML不做了就需要它们来达到这里目的，你需要编写一个指令，然后再用它就好像它是HTML的一部分。
换句话说，如果AngularJS不进行一些mac，想根据你的意见想实现可以被很容易的， ngClick, ngClass，et al 。
摘要
甚至不使用JQuery 。 甚至不包括该数据类型。 抓着你的人们。 当你们来到JQuery已经中而你所知道的问题如何解决，才能寻求相应的 $在保护区内过着，努力地想如何做到AngularJS 。 如果你不知道，你问 ！ 十九/ 20，最好的解决的办法不需要使用JQuery JQuery并试图解决这一问题将导致更多的工作给你
命令性→声明性
在JQuery，选择器用于寻找 DOM 元素然后对其bind/register事件处理函数。 当事件触发时，( 命令性) 代码执行到update/change DOM 。
在AngularJS，从这件事情 视图而不是DOM元素。 视图( 声明式) 的html包含AngularJS 指令。 我们告诉我们的指令在后台设置了事件处理程序的动态数据绑定。 选择器是很少使用，因此无需( 和某些类型的类) 的ID是太重了。 视图是模型绑定到 ( 使用范围) 。 视图是模型的投影。 事件模型( 即数据发生变化，作用域属性)，这些模型的视图项目更新" 自动"
在AngularJS，千万不要思考，而不是选择JQuery DOM模型元素的数据。 想想那些视图作为预测模型，而不是注册回调来处理向用户显示的内容。
关注分离
jquery采用了低调 Javascript 行为( Javascript ) 分开结构( HTML ) 。
AngularJS使用控制器 ( 其中每一个都可以有自己的控制器和指令，编译和链接的函数) 来删除行为和/ 或者view/structure ( HTML ) 。 Angular还有服务和 separate/organize 过滤器，以帮助你的应用程序。
另请参见 http://stackoverflow .com/a/14346528/215945
应用程序设计
一个方法设计一个AngularJS应用程序：
- 考虑你的模型。 创建服务或者自有Javascript对象用于这些模型。
- 想想你要展示你的模型视图。 为每个视图创建HTML模板，使用必要的指令，以获得动态数据绑定。
- 一个控制器连接到每个view ( 视图和路由，或者使用ng ng控制器) 。 有只find/get随模型数据的视图的控制器需要完成它的工作。 使控制器尽可能精简。
原型继承
你可以做大量使用JQuery而不知道如何Javascript原型继承工作。 在开发AngularJS Javascript的程序，你将会避免一些常见的问题如果你能很好地理解继承。 推荐阅读： AngularJS中埋藏的细微/ 原型继承的scope原型是什么？
AngularJS vs 。 JQuery
AngularJS和JQuery采取截然不同的意识形态。 如果你是来自JQuery你可能会发现一些令人惊讶的差异。 Angular可能会让你生气
这是正常的，你要通过部署。 Angular都是有必要的
最大的差别( TLDR )
jquery提供了一个工具箱，选择任意位DOM并对其进行特殊更改。 一点点地可以执行几乎任何你想要的操作。
使你能够以编译器 AngularJS相反。
言下之意，AngularJS读取整个DOM从上到下的顺序并将其视为代码理论以上讲是对编译器的指令。 随着遍历的DOM，寻找特定 指令( 在AngularJS编译器指令)，它告诉编译器怎样表现自己的举止和该做什么。 指令是充满Javascript小对象，并且可以满足属性，标签类，甚至注释。 这些指令可以反过来又请求添加Angular组件。
他拿出底部的编译器是格式完全Web应用，好了，你可以连接到具有以下
Javascript模板驱动的，而不是相反。 这是一个激进的不同的规则，可能需要一些时间来适应
如果这听起来像是对规范和限制，任何事情都可能会远离真相 因为AngularJS对待你的HTML代码，你会发现HTML粒度级别在你的web应用程序。 一切皆有可能，而最重要的是都出奇地简单，只要做一些概念以上的飞跃。
我们来看一下如何nitty坚韧不拔。
首先Angular不能代替JQuery
Angular和JQuery是不一样， AngularJS提供了一组工具来生成web应用程序。 jquery主要是提供了一些工具，用于修改DOM 。 在页面以上如果有JQuery )，angularjs会自动加以利用。 如果不是，AngularJS随JQuery Lite后得到减少,但是还完全可用JQuery的事实，
misko喜欢JQuery并不反对你使用它们。 但是你会发现当你切换，可以得到一个几乎所有的事情都按作用域，在可能时，应首选这里工作流模板和指令的组合，因为你的代码将更加离散，更加容易配置，多个Angular 。
如果确实要使用JQuery管子，你不应该喷它到处都是。 为Dom操作AngularJS中处于正确的位置指令。 以后将详细介绍这些。
低调和Selectors Javascript vs 。 声明性Templates
jquery一般应用unobtrusively 。 你提到Javascript代码是连以上了头，这是仅有的一个是。 我们使用选择器在页面中挑选位并编写插件来修改这些部分。
Javascript位于控件。 HTML是个完全独立的存在。 onclick属性是非常不好的做法。
你可能会注意到的第一个东西的地方是AngularJS自定义属性无处不在， 你的HTML将随处可见丰满的实质onClick ng的属性( attribute ) 的属性 这些指令( 编译器指令) 以及所使用的主要方法之一是模板的挂钩到模型中。
当你第一次看到这个你可能会尝试编写以下发言AngularJS，老方法侵入Javascript ( 就像我一开始) 。 事实上，AngularJS不遵守上述规则。 在AngularJS，Html5是模板匹配。 它是由AngularJS编译生成web页。
这是第一个差异非常大。 是DOM JQuery，你的web页面进行操作。 在HTML AngularJS，要编译的代码。 AngularJS逐字读取你的整个网页中，并将其编译到新网页使用其内置的编译器。
模板应该是声明性的，它的意义应该清楚简单地读取它。 我们使用自定义属性使用有意义的名称。 我们重新组成新的HTML元素，使用有意义的名称。 设计人员以最小的HTML知识和任何编码技能可以读你AngularJS模板并了解发生的事情。 该用户随后可以进行修改。 这是Angular路。
The template is in the driving seat.
我问自己的第一个问题AngularJS开始并贯穿教程时 " 我的代码在哪" 。 我写不Javascript，可是我都能接触到这些行为。 答案是显而易见的。 因为AngularJS DOM，AngularJS一样对待你的HTML是编译的代码。 对于许多简单情况下，通常足以只写一个模板给你，让AngularJS编译丢到一个应用程序。
模板驱动的应用程序。 则将其视为 DSL 。 在编写AngularJS组件以及AngularJS人会负责把它们并使之可在正确的时间基于模板的结构。 这将区别于标准 MVC 输出的模式，这里的模板是。
它更类似于 XSLT比 Rails以上Ruby 为例：
这是一个激进的Inversion控件可以接受一些时间来。
Stop试图从Javascript驱动你的应用程序。 让模板驱动的应用程序，并让AngularJS照顾将组件连接在一起。 这也是Angular方式。
语义HTML vs 。 语义Models
你使用JQueryHtml页面应包含语义有意义的内容。 如果Javascript处于关闭状态( 当用户或者搜索引擎) 你的内容仍然是可以访问的。
因为你Html页面AngularJS处理作为模板。 该模板并不应该作为你的内容通常存储在语义模型，它最终来自于你的API 。 在使用模型以生成语义webDOM AngularJS编译页面。
在源不再是语义，而是你APi HTML和DOM编译是语义。
在HTML AngularJS，这意味着生活中的模型中，只是一个模板，仅用于显示。
此时你可能会有各种各样的问题，对 SEO 和可访问性也有一定道理。 原因是在这里出现的一些问题。 大多数屏幕阅读器现在将分析Javascript 。 搜索引擎也可以索引 AJAXed 内容。 然而，你需要确保使用pushstate URL并有一个不错的站点地图。 请单击这里查阅有关这个问题的讨论： http://stackoverflow .com/a/23245379/687677
关注分离( SOC ) vs 。 MVC
Separation顾虑 ( SOC ) 是一种模式，该模式通过多年的成长Web开发由于各种各样的原因包括SEO，可访问性和浏览器不兼容问题。 它看起来像这样：
- htmL语义意义。 HTML应单独使用。
- css样式，不使用CSS页面被读取。
- Javascript行为,但是不包含脚本的内容保留。
同样，AngularJS不遵守他们的规则 在笔触，AngularJS "闯了十年的智慧接收，而不是实现一个MVC模式模板不再语义，一点也不在其中。
它看起来像这样：
- 构建你的模型包含在语义数据。 模型通常 JSon 对象。 模式作为对象的元素称为$scope了。 还可以存储模板便可访问所需的便利实用功能$scope以上。
- 查看你的视图将被写在HTML中。 通常生活在模型中没有语义，因为你的数据的视图。
- controller控制器是一款Javascript函数，该挂钩到模型的视图。 其功能是将initialise $scope 。 根据应用程序的不同，你可能希望或者不需要创建一个控制器。 在页面以上可以有许多控制器。
mvc和SOC不在相同的端点以上的相对尺度，它们是完全不同的轴。 soc在AngularJS上下文中都没有意义。 你得忘了一切，继续生活
就好像，你经历了浏览器大战，你会对这个主意非常冒犯性。 和好吧，这将值得去做的，我保证
插件vs 。 指令
Plugins扩展JQuery 。 AngularJS Directives扩展浏览器的功能。
在JQuery我们来定义插件增加功能到JQuery .prototype 。 然后，我们将这些数字挂钩DOM通过选择图元，并在结果以上调用该插件。 它的目的是扩展JQuery的功能。
例如，如果你希望旋转木马放到页面以上，你可以定义一个数字，比如包装在nav的无序列表元素。 之后你可能编写一些JQuery选择页面以上的列表和右列它作为库通过使用配额来做滑动动画。
在AngularJS中，我们定义的指令。 指令是一个函数，它能返回一个JSON对象。 这个对象告诉AngularJS DOM元素来查找哪些内容，并对其进行哪些更改。 指令就会着迷到模板使用属性或者元素中的所发明的， 它的目的是扩展的功能和新的HTML属性和元素。
AngularJS方法是扩展的功能机HTML看。 应编写类似于HTML的HTML，扩展使用自定义属性和元素。
如果你想要一个旋转木马，只是换了 <carousel />元素，然后定义一个指令来引入一个模板，并使这东西的工作。
有许多小指令vs 。 大的插件，配置开关
要写入的趋向使用JQuery大大的插件如同收藏夹，然后我们通过传入多个值和配置选项。
错了- 在AngularJS 。
把下拉列表的例子。 你也许希望在编写一个dropdown插件单击处理程序，配套的功能添加在尖括号中的代码可以是上下展开或者更改的类元素，显示隐藏菜单中所有有用的东西。
除非你想进行一些小改动。
说你有要展开菜单悬停时。 好，现在我们有麻烦了 我们可以在插件具有有线的click处理程序，对我们来说，我们需要添加一个配置选项，使其在这里特定情况下表现不同。
以及小AngularJS我们所写的指令。 我们拉指令将会越来越小。 它可能保持折叠状态，并提供方法来fold( )，unfold( ) 或者toggle( ) 。 这些方法只需更新$scope 。menu .visible这是一个boolean对象中保存了状态。
现在我们最多可以连接这个 在我们的模板：
<a ng-click="toggle()">Menu</a>
<ul ng-show="menu.visible">
...
</ul>
需要更新在mouseover？
<a ng-mouseenter="unfold()" ng-mouseleave="fold()">Menu</a>
<ul ng-show="menu.visible">
...
</ul>
模板驱动的应用程序，这样我们得到HTML级别的粒度。 如果我们想让个案例外，模板使你轻松运行。
Closure vs. $scope
JQuery插件都被创建为终结。 隐私的闭包中保持。 那么就需要由你来维护你的闭包中的作用域链。 你只有真正JQuery，以及任何可以访问DOM节点传递给插件的集合的闭包中定义的本地变量以及任何已定义的全局变量。 这意味着，插件是完全自包含的。 这是个好东西,但是也可能会限制在创建一个完整的应用程序。 想在动态页面的各区域之间数据传递变成烦琐。
AngularJS有$scope对象。 这些是由AngularJS特殊对象的创建和维护，可用于存储你的模型。 某些指令会产生一个新$scope，缺省情况下，从其换行使用Javascript $scope继承原型继承。 $scope对象中可访问的控制器和视图。
这就是聪明的地方。 因为$scope继承的结构大致如下所示的结构DOM，元素，最高可无缝访问包含它们的作用域，以及任何作用域为全局$scope ( 这不同于在全局作用域) 。
这样可以极大地简化数据传递四周，然后将数据存储在适当的级别。 如果一个dropdown下拉$scope展开，只需要知道这件事。 如果用户更新自己的喜好，可能需要更新全局听取用户首选项$scope，以及所有嵌套作用域就会自动收到通知。
这可能听起来很复杂，其实只要放松对着电脑就像开飞机。 你不需要创建该对象，并将其配置为你实例化类AngularJS $scope正确且恰当地根据模板分层结构。 然后AngularJS组件使用的魔法使其可供依赖注入( 稍后进一步讨论) 。
手动DOM更改vs 。 数据绑定
在你用手工进行所有DOM更改JQuery 。 你通过编程的方式构造新DOM元素。 如果你有一个JSON数组，并且想把它生成HTML和DOM，必须编写一个函数来将其插入。
在AngularJS也可以执行这里操作，但是我们建议你利用数据绑定。 更改你的模型，并且因为在DOM DOM绑定到它通过模板会自动更新，无需干预。
因为数据绑定的实现是通过模板，使用属性或者大括号语法，则它超级容易做。 几乎没有认知的成本与其关联的所以你会发现自己一直在做这件事。
<input ng-model="user.name" />将input元素绑定到 $scope.user.name. 更新输入将更新当前作用域中的值，反之亦然。
与这里类似：
<p>
{{user.name}}
</p>
将输出在段落中的用户名。 这是个动态绑定，所以如果 $scope.user.name数据更新时，将更新过的模板。
ajax的所有时间。
在JQuery令Ajax调用起来非常简单,但是它仍有可能换用。 有的复杂性考虑，和一定的脚本块来维护。
在AngularJS，ajax是默认转到解决方案，常有的事，几乎没有你留意的。 可以用ng括模包括。 可以将一个样板应用提供最简单的自定义指令。 你可以包装一个Ajax中调用服务并自己创建一个 GitHub 服务或者 Flickr 服务，你可以用惊人的方便访问。
服务Objects vs Helper Functions
在JQuery中，如果我们想实现的一个小的非dom相关的任务，例如提取一个提要从一个API，则可能需要编写一个简单的函数完成它在我们的终结。 一个有效的解决方案，但是如果我们需要经常访问的源？ 如果我们要在其他应用程序中重用的代码？
AngularJS给我们服务对象。
服务是简单的对象，这些对象包含数据和函数。 他们总是Singleton，这意味着永远不能有一个以上的人。 假定需要访问Stack Overflow API，则可能需要编写一个 StackOverflowService它定义了方法来实现这里目的。
假设我们有一个购物车。 我们可能会定义一个所维系ShoppingCartService购物车，包括添加和移除项的方法。 因为服务是一个单例，并且是所有其他组件所共享，任何对象都需要能写到了购物车，从中取数据。 永远都是这样的马车。
自足AngularJS组件给我们提供我们认为合适的方式使用和重用作为服务对象的。 它们被简单的包含函数和Data JSON对象。 他们总是Singleton在服务以上，因此如果你将数据存储在一个地方，可以把这些数据从别的地方只要请求相同的服务。
Dependency注入 ( DI ) vs 。 instatiation又称de spaghettification
AngularJS替你管理依赖项。 如果你希望一个对象，只需使用ado访问数据源，AngularJS会拿给你
在开始之前，要使用这里选项，则很难解释这个时间正是一个巨大的利好的事情。 一点也不像AngularJS Di JQuery内存在。
di表示，而不是编写应用程序并将其连接在一起，你只需定义的库组件，每个部分都由字符串指定。
假设我有一个名为'组件FlickrService'用以定义拉从Flickr JSON订阅源的方法。 现在，如果我想写一个控制器，它可以访问Flickr，我只需参考'FlickrService'时按名称声明的控制器。 AngularJS会负责实例化组件并使其可供我控制器。
举个例子，这里我定义了一个服务：
myApp.service('FlickrService', function() {
return {
getFeed: function() { // do something here }
}
});
我要是想使用这项服务，我只按名称来引用它，如下所示：
myApp.controller('myController', ['FlickrService', function(FlickrService) {
FlickrService.getFeed()
}]);
AngularJS会将它识别需要FlickrService对象来实例化该控制器，能够为我们提供一个。
这使得事情连接在一起很轻松，几乎可以消除这些趋势spagettification 。 我们的简单列表组件，和AngularJS小手给我们做一个一个将我们需要他们时，
模块化的服务架构
jquery说根本不了解应该如何组织你的代码。 AngularJS有意见。
AngularJS使你可以在其中放置代码的模块。 如果你在写一个脚本，例如，你可能要创建一个新的对话，Flickr Flickr模块所有Flickr相关函数用h 。 模块可以包含其他模块( DI ) 。 你的主应用程序通常是一个模块，它应包含所有应用程序将依赖于其他模块。
你就简单的基于Flickr代码重用，如果需要编写另一个应用程序，你可以只需包含Flickr模块和好，就可以访问所有你Flickr相关的功能在新的应用程序中。
模块包含AngularJS组件。 当我们以一个简单的清单包含一个模块，该模块中的所有组件即可供我们由其唯一标识字符串。 我们可以把这些组件注射到对方使用AngularJS的依赖注入机制。
总结
AngularJS和JQuery不是敌人。 我们可以只使用JQuery AngularJS中很好地结合起来。 如果你使用的是AngularJS ( 模板，数据绑定，$scope指令等)，你会发现你需要一个比你少多 JQuery否则可能要求。
最主要的要知道这是你的模板驱动的应用程序。 打算要写插件来完成每一件事。 而不是写小的指令完成一件事，然后编写一个简单的模板，将它们连接起来。
低调的报道中认为Javascript恰恰相反，考虑的是HTML扩展。
我的书
就是那种AngularJS感到激动，我编写了一个简短的书压扁了我们非常欢迎你的阅读在线 http://nicholasjohnson .com/angular book/ 。 我希望是有帮助的。
你能描述一下必要的模式变化？
Imperative vs Declarative
与 JQuery 你指示DOM需要满足什么条件的逐步活性化 与 AngularJS 你介绍什么是想要的渲染效果而不是如何做。 这里 是详细信息。? 时，可查询Mark Rajcok的回答。
如何构建和设计客户端web应用不一样呢？
AngularJS是整个客户端框架使用的MVC 图案( 检出 图形表示形式) 。 它极大地关注关注分离。
最大的不同是什么？ 我应该停止doing/using，我可以手动启动doing/using来代替？
JQuery 是库
AngularJS 是美丽的，高度可测试的客户端框架，结合了一大堆很酷的工具如MVC，依赖注入数据绑定等等。
它专注于的关注点分离对单元测试和测试( ，以及端到端测试)，测试驱动的开发提供了便利。
最好的方法start察看其特效教程 。 时可能会经历几个小时中的步骤,但是在幕后，以防要把握概念，请参见对象存储和大量的进一步的阅读参考。
有没有服务器端considerations/restrictions？
你可以用它在现有的应用程序中如果已经使用了纯JQuery 。 但是，如果想要完全利用AngularJS功能你可以考虑编写服务器端使用 RESTful 方法。
这样做将使你充分利用其资源
jquery是一个Dom操作库。
AngularJS是MV*框架。
事实上，angularjs是为数不多的几个Javascript MV* Javascript MVC的框架( 很多工具仍然属于类别库) 。
作为一个框架，它托管代码和抉择时需要调用和内容具有所有权的 ！
其中包括JQuery lite版AngularJS本身。 因此，对于一些基本的DOM selection/manipulation JQuery，你真的不需要包含的库( 它的字节数保存到运行在网络以上)
AngularJS有UiDom操作的" 指令" 的概念和设计重用组件，所以你应该使用什么时候都觉得有必要做Dom操作相关的东西( 指令仅地方应写入代码在使用JQuery AngularJS ) 。
AngularJS涉及一些学习曲线( 多于JQuery ：) 。
>for任何开发人员来自JQuery背景，我的第一个建议是" 作为一个一流语言后跳到了一个功能丰富的框架比如AngularJS Javascript那里了解" 上面的事实来硬的我明白了
好运。
他们是苹果和橘子。 你不想做比较。 它们完全不是一回事。 AngularJS已经JQuery精简版JQuery构建，你可以执行基本Dom操作甚至没有包括在其中完全暴露了。
jquery的所有关于Dom操作。 它解决了所有跨浏览器痛苦的话，你将不得不面对,但是它不是一个框架，该框架允许你将你的应用分成多个组件，如AngularJS 。
AngularJS妙处在于它允许你在Dom操作separate/isolate指令。 可以投入使用有内置指令如ng单击。 你可以创建自己的自定义指令，它将包含所有的视图逻辑或者Dom操作所以你不需要重复而怯于Dom操作控制器或者服务中的代码应该能搞定业务逻辑。
Angular分解你的应用到视图及控制器服务。
还有一件事，就是这个指令。 它是一个属性可以附加到任何DOM元素，且其中可以使用JQuery发疯你永远JQuery AngularJS组件或者有冲突，而不必担心会打乱及其体系结构。
我收到了我参加个meetup，的创建者之一Angular说他们很努力才分离出"Dom操作别想包括这些文件签入。