angularjs和js的区别
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularjs和js的区别相关的知识，希望对你有一定的参考价值。
1.不要首先设计好你的页面，然后再通过DOM操作去修改它在jQuery中，你首先设计了一个page，然后再去动态修改它的内容，这是因为jQuery被设计用来进行扩展并在这个前提下大幅度地增加和修改内容，但是在angularjs中，你必须在心中先设计好你的架构，
从一开始，你就要摒弃“我拥有一个DOM元素并且想让它去做某件事”，代之为“需要完成什么任务，然后接着设计你的应用，最后再去设计你的视图view层”。
2.不要使用angularjs去扩展jQuery
相应地，不要存在说让jQuery去干某些事情，然后在此基础上添加angularjs的功能让它去管理model以及controller的想法。所以一般不推荐AngularJS开发新手同时使用jQuery，至少在他们还没有适应AngularJS的开发模式之前不会去推荐这样做，但是当你真正开始适应angularjs 的方式之后，你会发觉这是一件很诱人的事情。
曾经看到过很多开发者采用将150到200行代码的jQuery插件利用angularjs的回调以及$apply方法封装起来，这种方式使得代码看起来极其复杂，但是实际上他们让这些插件跑起来了！问题在于，在大部分情况下jQuery插件能够用angularjs进行重写，并且可能只会使用很少量的代码，同时这种重写使得代码很直观且易于理解，这显然好过于将jQuery代码直接做封装。
所以最后说，当你遇见问题的时候，首先要以angularjs的思维进行思考，如果找不到解决方案，可以求助于社区，如果说没有人能够给出一个简单的方案，那么才考虑使用jQuery，不要让jQuery成为你的拐杖，否则你永远掌握不了AngularJS。
3.要以架构为中心进行思考
首先你要知道单页应用属于web应用，它们不是传统的多网页网站，所以要同时作为一个服务端和客户端开发者的思维进行思考，需要思考如何将我们的应用分为独立的，可扩展的以及可测试的部分。
数据绑定
这是到目前为止AngularJS最令人瞩目的特性了，在数据绑定方面它舍弃了对DOM的操作方式，而这一切都是由AngularJS来自动更新视图，你不必写操作dom的代码，在jQuery中，常常按照响应事件并修改视图
区别model层
在jQuery中，DOM类似于一种model，但是在AngularJS中，拥有不同于jQuery中的model层以便可以以任何我们想要的方式去管理它，它是完全独立于视图之外的。这种方式是有助于进行数据绑定并且可以保持对分离的关注，而且可以具备更好的可测试性。
关注点分离
以上所讲都和这个总体的话题相关：让你关注分离，你的视图层显示记录，你的model层代表数据，你还有个服务层用来执行这些可复用的任务。你使用directive来执行dom操作并扩展你的视图，并将它和controller连接起来，这也就是在其他方面提到的有关于增强可测试性的原因。
依赖注入
帮助解决关注点分离的是依赖注入（DI），如果你是一个服务端开发者（Java或者php），你可能已经很熟悉这个概念了，但是如果你是从事客户端开发的，你会觉得这个概念可能有些多余和纯属追求时髦，但是实际上不是这样。
从广义的角度讲，DI意味着你可以自由地声明组件然后从这些组件中进行实例化，这是理所当然的。你不必知道加载顺序，文件位置等诸如此类的事情，这种魔力不是能够立即看到，但是会给出一个例子：测试。
说在应用中，需要一个依赖于应用状态和本地存储的服务用来通过一个rest API来执行服务端存储，当我们测试我们的controller时，不必和服务端进行通信，毕竟只是在测试controller而已。仅添加一个与我们最初组件相同的mock服务，注入器能够确保controller获得一个虚拟的服务，controller自身不必也不需要了解这种差异。
4.以测试驱动的开发
这部分是一个架构的第三部分，但是他是很重要的，以至于需要将它放在最重要的位置。
在所有见过的，用过的以及写过的jQuery插件中，有多少具有一套测试组件呢？其实并不多，这是因为jQuery在测试上不易控制，但是AngularJS却与此不同。
在jQuery中，测试的唯一方法是使用一个demo页去创建一个独立组件来使得的测试可以执行dom操作。接下来我们必须开发一个独立的组件然后将它集成到的应用中来，这是多不方便啊！在很多情况下，当使用jQuery开发实际上是做了很多重复开发而不是以测试驱动的开发，
但是在AngularJS中我们可以关注分离点，所以可以做一些测试驱动的开发。
5.从概念上讲，指令不是打包的jQuery
你常常听说，dom操作只能在指令中，这是必须的，你必须严肃对待。
深入讨论，
某些指令仅仅是装饰视图（例如ngClass），因此有时候直接操作dom是可以的，但是当一个指令类似于一个小物件并且拥有自己的模板，那么它应该当做一个分离的关注点，这就是说，它的模板需要和link中的执行逻辑以及其他controller函数分离开。
AngularJS拥有一整套的工具可以是这种分离更简单，使用ngClass指令，可以动态地更新class,使用ngBind可以进行双向数据绑定，使用ngShow和ngHide 我们
可以采用编程的形式显示和隐藏一个元素，也包括自己写的很多指令。换句话说，可以不用Dom操作而完成所有工作，dom操作越少，指令越容易测试，越容易指定他们的style属性，就越容易在将来改变他们，那么他们就越容易复用和分发。
看过很多AngularJS新手使用指令封装一大串 jQuery代码，换句话说，既然不能在controller里面进行dom操作，那么我可以将他放在指令中，虽然这相对于直接操作dom好很多，但是任然是错误的。
看看在上面的记录，即使我们将其放在一个指令中，任然需要以Angular的方式去操作它，这种方式不执行dom操作！在很多时候dom操作是需要的，但是这种情况比你想的要少得多。当需要做dom操作的时候先问问自己这里是否必须这样做，这才是一种更好的方式。
总结
不要总使用jquery ,甚至不要去引用它，它会阻止你前进，当回到这个问题—你知道你怎么在AngularJS中以jquery方式解决问题，但是当你使用诸如$等选择器时，你要想想它们实际上是禁锢了AngularJS，如果你不知道怎么不用jQuery实现，那么去请教别人，一次一次去问，最好的方式是不需要使用jQuery，使用jQuery只会导致你的工作量提升。 参考技术A angularjs和js的区别如下 ：
1、范围不同
angularjs是一套封装了诸多功能的js框架，而js是通用的javascript代码的缩写。
2、实现方式不同
angularjs只要引用现成的js文件就可以使用了，js需要在<script>之间自定义实现一些函数。
angularjs用法：
<!doctype html>
<html ng-app>
<head>
<script src="./js/angular-1.0.1.min.js"></script>
</head>
<body>
Hello 'World'!
</body>
</html> 参考技术B 这个问题你完全可以度娘 比在这里简单快捷多了
angularJS中& vs @和=有啥区别
【中文标题】angularJS中& vs @和=有啥区别【英文标题】：What is the difference between & vs @ and = in angularJSangularJS中& vs @和=有什么区别 【发布时间】：2013-02-01 05:18:06 【问题描述】：我对 AngularJS 很陌生。谁能解释一下这些 AngularJS 运算符之间的区别：&, @ and = 在用适当的例子隔离范围时。
【问题讨论】：
另见***.com/questions/14050195/… 【参考方案1】：@ 允许将指令属性上定义的值传递给指令的隔离范围。该值可以是一个简单的字符串值 (myattr="hello")，也可以是一个带有嵌入表达式的 AngularJS 插值字符串 (myattr="my_helloText")。将其视为从父范围到子指令的“单向”通信。 John Lindquist 有一系列简短的截屏视频来解释其中的每一个。 @ 的截屏在这里：https://egghead.io/lessons/angularjs-isolate-scope-attribute-binding
& 允许指令的隔离范围将值传递到父范围，以便在属性中定义的表达式中进行评估。请注意，指令属性是隐式表达式，不使用双花括号表达式语法。这在文字中更难解释。 & 的截屏在这里：https://egghead.io/lessons/angularjs-isolate-scope-expression-binding
= 在指令的隔离范围和父范围之间设置双向绑定表达式。子范围中的更改会传播到父范围，反之亦然。将 = 视为 @ 和 & 的组合。 = 的截屏在这里：https://egghead.io/lessons/angularjs-isolate-scope-two-way-binding
最后是一个截屏视频，在一个视图中显示了所有三个一起使用：https://egghead.io/lessons/angularjs-isolate-scope-review
【讨论】：
这些链接似乎已更改，它们现在分别为：egghead.io/lessons/angularjs-isolate-scope-attribute-binding、egghead.io/lessons/angularjs-isolate-scope-expression-binding、egghead.io/lessons/angularjs-isolate-scope-two-way-binding、egghead.io/lessons/angularjs-isolate-scope-review。 感谢您的关注，我用正确的 URL 更新了我的答案。 当可能有大量包含相同信息的免费内容时，评分最高的答案链接到付费墙后面的视频，这有点可惜。 有很多视频是egghead免费提供的:) 付费内容减一。【参考方案2】：我想从 JavaScript 原型继承的角度来解释这些概念。希望有助于理解。
有三个选项可以定义指令的范围：
scope: false：角度默认值。该指令的范围正是其父范围之一 (parentScope)。
scope: true：Angular 为这个指令创建了一个作用域。范围原型继承自 parentScope。
scope: ...：隔离范围解释如下。
指定scope: ... 定义isolatedScope。 isolatedScope 不继承 parentScope 的属性，尽管 isolatedScope.$parent === parentScope。它是通过以下方式定义的：
app.directive("myDirective", function()
return
scope:
... // defining scope means that 'no inheritance from parent'.
,
)
isolatedScope 无法直接访问parentScope。但有时指令需要与parentScope 通信。他们通过@、= 和& 进行通信。 关于使用符号@、=和&的话题正在讨论使用isolatedScope的场景。
它通常用于不同页面共享的一些通用组件，例如Modal。隔离范围可防止污染全局范围，并且易于在页面之间共享。
这是一个基本指令：http://jsfiddle.net/7t984sf9/5/。要说明的图像是：
@: 单向绑定
@ 只是将属性从parentScope 传递给isolatedScope。它被称为one-way binding，这意味着您不能修改parentScope 属性的值。如果您熟悉 JavaScript 继承，您可以轻松理解这两种场景：
如果绑定属性是原始类型，例如示例中的interpolatedProp：您可以修改interpolatedProp，但不会更改parentProp1。但是，如果您更改 parentProp1 的值，interpolatedProp 将被新值覆盖（当 angular $digest 时）。
如果绑定属性是某个对象，比如parentObj：因为传递给isolatedScope的是一个引用，修改值会触发这个错误：
TypeError: Cannot assign to read only property 'x' of "x":1,"y":2
=: 双向绑定
=被称为two-way binding，这意味着childScope中的任何修改也会更新parentScope中的值，反之亦然。此规则适用于基元和对象。如果把parentObj的绑定类型改成=，你会发现可以修改parentObj.x的值。一个典型的例子是ngModel。
&: 函数绑定
& 允许指令调用一些parentScope 函数并从指令中传递一些值。例如，检查JSFiddle: & in directive scope。
在指令中定义一个可点击的模板，如：
<div ng-click="vm.onCheck(valueFromDirective: vm.value + ' is from the directive')">
并使用如下指令：
<div my-checkbox value="vm.myValue" on-check="vm.myFunction(valueFromDirective)"></div>
变量valueFromDirective通过valueFromDirective: ...从指令传递到父控制器。
参考：Understanding Scopes
【讨论】：
默认情况下，指令使用共享范围。如果指令具有“范围：true”，则它使用继承范围，其中子可以看到父属性但父不能看到子内部属性。 AngularJS – 独立作用域 – @ vs = vs & ---------- 简短的例子和解释可以在下面的链接中找到：codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs跨度> 【参考方案3】：不是我的小提琴，但 http://jsfiddle.net/maxisam/QrCXh/ 显示了差异。关键是：
scope:
/* NOTE: Normally I would set my attributes and bindings
to be the same name but I wanted to delineate between
parent and isolated scope. */
isolatedAttributeFoo:'@attributeFoo',
isolatedBindingFoo:'=bindingFoo',
isolatedExpressionFoo:'&'
【讨论】：
【参考方案4】：@：单向绑定
=：双向绑定
&：函数绑定
【讨论】：
对@的一个重要警告不仅是单向，而且是在路上的字符串 @Shawson：那么如何绑定单向非字符串（例如 int 或 bool）？ 如果你愿意的话，你可以把@的值转换成一个int/bool？否则我只会使用 = 或 【参考方案5】：AngularJS – 独立作用域 – @ vs = vs &
带有解释的简短示例可在以下链接中找到：
http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs
@ - 单向绑定
在指令中：
scope : nameValue : "@name"
在视图中：
<my-widget name="nameFromParentScope"></my-widget>
= – 双向绑定
在指令中：
scope : nameValue : "=name" ,
link : function(scope)
scope.name = "Changing the value here will get reflected in parent scope value";
在视图中：
<my-widget name="nameFromParentScope"></my-widget>
& – 函数调用
在指令中：
scope : nameChange : "&"
link : function(scope)
scope.nameChange(newName:"NameFromIsolaltedScope");
在视图中：
<my-widget nameChange="onNameChange(newName)"></my-widget>
【讨论】：
【参考方案6】：我花了很长时间才真正掌握了这一点。我的关键是要理解“@”用于您想要在原地评估并作为常量传递到指令中的东西，其中“=”实际上传递了对象本身。
有一篇很好的博客文章解释了这一点：http://blog.ramses.io/technical/AngularJS-the-difference-between-@-&-and-=-when-declaring-directives-using-isolate-scopes
【讨论】：
以上是关于angularjs和js的区别的主要内容，如果未能解决你的问题，请参考以下文章