如何在AngularJS中插入新元素
如何在AngularJS中插入新元素
关闭。这个问题需要更加集中。它当前不接受回答。
锁定。该问题及其答案因为超出话题范畴但有历史意义而已被锁定。目前它不接受新的回答或互动。
假设我熟悉使用jQuery开发客户端应用程序,但现在我想开始使用AngularJS。你能描述一下必须进行的范式转变吗?以下是一些可能有助于你构建答案的问题:
- 我应该如何不同地构建和设计客户端Web应用程序?最大的不同点是什么?
- 我应该停止使用什么/做什么;相应地应该使用什么/做什么?
- 是否有任何服务器端考虑/限制?
我不是要求在jQuery
和AngularJS
之间进行详细比较。
从命令式到声明式
在 jQuery 中,选择器用于查找 DOM 元素,然后将事件处理程序绑定/注册到它们上面。当事件触发时,该(命令式)代码执行以更新/改变 DOM。
在 AngularJS 中,你想要考虑的是视图,而不是 DOM 元素。视图是(声明式) HTML,包含 AngularJS 指令。指令为我们在后台设置事件处理程序,同时提供动态数据绑定。选择器很少使用,因此 ID(以及某些类型的类)的需求大大减少。视图与模型通过作用域相关联。视图是模型的投影。事件会改变模型(即数据,作用域属性),投射这些模型的视图会自动更新。
在 AngularJS 中,思考模型,而不是选择 jQuery 选定的 DOM 元素来保存数据。思考视图作为这些模型的投影,而不是注册回调函数来操作用户看到的内容。
责任分离
jQuery 使用不侵入式 JavaScript-行为(JavaScript)与结构(HTML)分开。
AngularJS 使用控制器和指令(每个都可以有自己的控制器和/或编译和链接函数)从视图/结构(HTML)中删除行为。Angular 还拥有服务和过滤器来帮助分离/组织你的应用程序。
另请参阅https://stackoverflow.com/a/14346528/215945
应用程序设计
设计 AngularJS 应用程序的一种方法:
- 考虑你的模型。为这些模型创建服务或自己的 JavaScript 对象。
- 考虑如何呈现你的模型--你的视图。为每个视图创建 HTML 模板,使用必要的指令来获取动态数据绑定。
- 将控制器附加到每个视图上(使用 ng-view 和路由或 ng-controller)。让控制器仅找到视图需要的任何模型数据。使控制器尽可能轻薄。
原型继承
你可以在不知道 JavaScript 原型继承如何工作的情况下使用大量的 jQuery。开发 AngularJS 应用程序时,如果你对 JavaScript 继承有很好的了解,那么你将避免一些常见的陷阱。建议阅读:What are the nuances of scope prototypal / prototypical inheritance in AngularJS?