在学习Angular时一个最常被问到的问题是:我有jQuery开发的背景,我应该怎样思考Angular?
jQuery本身是一个简单地DOM操作的实用JS库。它是一个对于DOM操作必要的包装,而不是一个构建web应用的工具。显然我们可以使用jQuery来构建动态网站,但是这就好比使用一个锤子来锯木头一样...为什么不买一个锯子来做正确事呢?
本文旨在阐述如何在不抛弃jQuery的前提下思考Angular。jQuery是一个经过多年的发展后非常成熟的工具,它可以同Angular一起使用,我们在项目中也会使用它。
在本文中,我们将经历怎样来思考Angular以及最终提供一个用于构建高效、快捷稳定的Angular应用的模型。
在下面的部分中,我们将通过一个jQuery应用来证明如何用Angular来构建它。
怎样实用jQuery来构建web应用
$(document).ready(function() {
$("#article").click(function(evt) {
$("#article_placeholder").append("Angular for the jQuery developer");
});
});
过去,作为开发者我们常常需要人为改变DOM内容来构建一个动态页面。
我们首先布局好网页结构,然后根据内容来设计CSS,最后为页面添加互动性。也就是说,我们将互动性放置在构建过程的后面,互动性被当做了第二类公民被对待。
为什么jQuery不适合构建web应用?
观察源码,我们将动作通过ID绑定到了特定的DOM上。要是一个团队成员认为#message并不足以指定DOM元素该怎么办?我们可能会改变整个DOM来适应新的设计,或者我们会增加一个新的功能来包含#name这个ID。
紧耦合
我们的Javascript与HTML之间的关联太紧密了。如此紧密的联系在保持Javascript与HTML同步时常常会需要花费大量的工作。每当我们改变DOM时我们必须要加倍小心注意乙方Javascript的功能发生改变。
代码混乱
当使用jQuery时,web应用的功能代码并没有清晰的组织结构;怎么组织代码完全有我们决定。
用低级工具创建高级功能
当我们创建任何复杂程度的web应用时,我们会被强制的使用低级DOM操作工具来编写我们的自定义行为而不是专注于功能的实现。
Angular使用一种完全不同的方式来构建web应用:它将构建互动性当做一种原生组件并且鼓励在开发应用的过程中使用互动性。
当我们创建Angular应用时需要记住下面8个核心观点:
1)在HTML中声明互动性
但我们编写Angular应用时,我们不回把页面和互动性分开;相反,我么会在HTML中定义功能。如果我们想在点击按钮时执行一个动作,我们就把动作绑定在按钮上:
<!-- 调用 runAction() 方法 -->
<button ng-click="runAction()">Run action</button>
这样做允许我们显式的声明DOM行为。另外,DOM元素也显式的告诉我们它们在浏览器中的行为动作。
命令式编程(imperative programming):告诉“机器”怎么做,你想要发生的就会发生。
声明式编程(declarative programming):告诉机器你想要什么发生,然后让机器自己决定应该怎么做。
2)单独编写DOM
Angular使用一个非常明确的策略是用数据来驱动功能。我们与一个数据对象进行互动(叫做$scope),而不是构建一个页面去操作。
当你想要改变视图(view)中的内容时,我们改变与其绑定的数据然后让Angular来决定怎么改变DOM。
<!-- 在浏览器中展示名字 -->
<h1>Welcome {{ name }}</h1>
<!-- 将input绑定到name -->
<input ng-model="name"
name="name"
placeholder="Enter your name" />
在这个例子中我们完全不需要去操纵DOM。这一点允许我们在编写HTML时就设计DOM的行为。
3)架构应用
编写一个Angular应用允许我们从构建一个应用的角度来思考。我们能够专注于功能,比如理解我们的应用如何同服务器端的API互动,以及当我们点击一个按钮时发生的路由行为。
我们需要考虑如何将功能分割为一些小的模块使我们的应用更容易扩展和测试。
4)改正jQuery的坏习惯
当我们刚开始学士Angular时,常常会不由自主的区使用jQuery当做拐杖。我们强烈推荐在一开是学习Angular时不要引入jQuery。
所有jQuery能做的事情,我们也能用Angular做到,而且只需要很少的代码。
如果我们坚持使用Angular而不依赖于那些作为拐杖的工具,我们就可以写出更有效率,更具扩展性以及测试性更加好的应用。如果你想要构建一个Angular中不存在的功能,看看Angular社区,也许已经有人创建好了。
5)视图是状态的官方记录
Angular应用使用视图作为互动性和数据的容器。我们使用指令为视图添加功能,反过来,使用数据绑定在应用中创建一个显示的数据动作链。
上面代码中使用的fs-modal指令非常清楚的阐明了
元素的职责所在。改变视图职责的唯一方式是改变HTML,而不是像在命令式编程中需要在需要在一个外部文档中做出改变。
6)模型改变视图,视图改变模型
Angular中一个最基本最酷的特征是我们除了编写HTML之外不需要担心DOM。
不像jQuery中我们在运行过程中保持状态或者查询document时需要命令式的构建元素并绑定它们,使用Angular可以让我们专心于构建基于数据的功能。
例如,为了展示一个载入指示器,我们可以更具一个模型的值来设置一个布尔标记用于显示或者隐藏元素:
<div ng-show="isLoading">
<img src="/images/loading.gif" />
</div>
现在,无论我们何时需要载入新数据,我们可以简单的改变这个“开关”(通过将isLoding设置为true)。当我们的数据载入完成时,我们可以将开关关闭,然后指示器就会隐藏。
$scope.loadNewData = function() {
$scope.isLoading = true;
$http.get('/api/data.json')
.success(function(data) {
$scope.data = data;
$scope.isLoading = false;
})
.error(function(reason) {
$scope.isLoading = false;
});
}
如果我们在控制器中更新了模型,视图也会更新。如果我们在视图中改变了模型,控制器中的模型也会改变,所有的部分都有保持同步。
Angular的魔法是在全过程中,我们不需要思考 -- 只需要专心于我们构建的功能即可。
7)依赖,依赖,依赖 -- 我的天!
另外一个Angular中幕后的无缝处理器是依赖注入:我们只需要告诉Angular我们需要什么去操作应用,只要Angular发现它,Angular就会自动帮我们载入它。
8)驱动测试开发
Angular中一个非常好的成分是它从开始构建到结束,都是可测试的。当我们编写测试时,我们不仅能保证我们的web应用是可运行的,我们使用的成分也是按照预期可运行的。
Angular时时刻刻都是在由测试驱动构建,因此,我们可以非常容易的编写可测试的应用。
我们可以为应用的任何一个部分编写测试 -- 为模型层,服务层,视图层,等等。
我们可以从开发者的角度测试(以及单元测试每一个组件)或者从用户的角度测试(通过端到端的测试,当我们在浏览器中个字啊如应用时,我们告诉测试框架去点击按钮以测试视图是否按照我们期待的显示)。
当我们每次进行一个微小的改动后想测试一下功能是否能运行时再也不需要人为的去点击按钮了。
总结
当我们从Angular的角度思考时,我们需要考虑:
视图,而不是DOM元素
指令,而不是事件绑定
模型作为视图的工程
功能分离
转:http://www.angularjs.cn/A0o6
分享到:
相关推荐
这种结合可以帮助开发者利用 Angular 的强项管理数据和状态,同时利用 jQuery 的优势实现流畅的用户体验。 此外,你可能还会遇到一些关于如何在 Angular 中优雅地集成 jQuery 的最佳实践,比如使用 Angular's ...
1. **双向数据绑定**:Angular 1的核心特性之一是能够自动同步模型(Model)和视图(View),任何一方的改变都会实时反映到另一方,通过`ng-model`指令实现。 2. **依赖注入**:Angular 1提供了一个强大的依赖注入...
在AngularJS框架中,`angular.element`是一个非常有用的工具,它允许开发者将DOM元素转换为jQuery对象,从而利用jQuery丰富的API来操作DOM。这在处理复杂的DOM操作或需要与jQuery库进行集成时特别有用。本篇文章将...
本示例中,"Jquery结合angular.js与bootstrap.js实现的无刷新翻页+查找特效源码"是将这三个强大的JavaScript库融合在一起,以创建高效、流畅的前端应用。让我们详细探讨这三个库各自的功能以及它们如何协同工作来...
本资源提供了一个基于AngularJS、jQuery和Bootstrap的后台管理模板,旨在为开发者创建高效、美观且功能丰富的Web应用程序界面提供便利。这个模板融合了这三个强大的JavaScript库和技术,以实现高度交互性和响应式的...
Angular EasyUI 是一个基于 Angular 框架的前端组件库,它为开发者提供了一套与 jQuery EasyUI 相似的用户界面组件,旨在简化 Web 应用程序的开发过程。jQuery EasyUI 是一个流行的选择,但随着前端技术的发展,...
为了在jQuery Mobile(一个专注于移动设备的UI框架)和Angular.js(一个MVC风格的前端开发框架)之间实现无缝集成,开发者们创建了jQuery Mobile Angular适配器。 **jQuery Mobile 简介** jQuery Mobile是一款专为...
总之,Angular2权威教程将引导你从基础到高级,全面掌握这个强大的框架,无论你是初学者还是有经验的开发者,都能从中受益匪浅。通过学习和实践,你将能够创建高效、可维护的Web应用,应对不断变化的前端开发需求。
然而,现代的Angular(2+版本)已经不再依赖jQuery,所以这个插件可能主要是为AngularJS设计的,但依然考虑到了与jQuery的兼容性。 在实际使用中,集成这个分页插件通常包括以下步骤: 1. **安装**:通过npm或...
jQuery 的设计受到了 .NET Framework 中 LINQ(Language Integrated Query)的影响,允许开发者以链式调用的方式来执行一系列操作。例如: ```javascript $("#element").addClass("highlight").slideUp(500).data(...
综合来看,这个压缩包似乎是一个前端开发资源集合,涵盖了从基本的jQuery库到更高级的UI框架EasyUI,再到复杂的单页应用框架AngularJS,以及一系列的jQuery插件,可以满足开发者在构建Web应用时的各种需求。...
综上所述,虽然Angular2不鼓励直接使用jQuery,但出于实际需要,我们仍然可以通过上述方法将jQuery集成到Angular2项目中。不过,我们也应当意识到这种做法可能会降低组件的独立性和项目的整体性能。在可能的情况下,...
什么是Angular AngularJS是动态Web应用程序的结构框架。 它允许您使用HTML作为模板语言,并允许您扩展HTML的语法以清晰,简洁地表达应用程序的组件。AngularJS的数据绑定和依赖注入消除了许多你不得不编写的代码。这...
在给定的"angularOtpPin"项目中,这个指令是专为Angular框架设计的,并且还集成了jQuery库来实现更流畅的用户体验。 ### OTP验证的基本概念 OTP验证是一种基于时间、事件或密钥的一次性密码生成机制,用于防止恶意...
通过阅读jQuery的源代码,开发者可以学习到优秀的编程模式、技巧和算法。同时,理解源码中的设计思想有助于在实际开发中更合理地使用jQuery。 综合以上知识点,专业的jQuery使用不仅包括对库本身的熟练掌握,还需要...
【标题】:“Angular-...开发者可以从中学习到如何结合AngularJS和jQuery实现文件上传功能,以及如何处理相关的前端和后端问题。对于想要深入了解文件上传机制和实践的开发者来说,这个项目仍然具有一定的学习意义。
至今,jQuery仍然是Web开发中不可或缺的一部分,尽管现代框架如React、Angular和Vue.js等已崭露头角,但jQuery在简化DOM操作和快速实现功能方面仍有着不可替代的优势。对于那些不希望使用完整框架或只想解决特定问题...
自2006年发布以来,jQuery迅速成为开发者首选的JavaScript工具,因为它提供了一种简单的方式来处理复杂的网页交互。 一、jQuery核心概念 1. 简化DOM操作:jQuery通过选择器语法,如`$("#id")`或`$(".class")`,使得...
3. **无需 jQuery**:尽管 Bootstrap 原生依赖 jQuery,但 Angular UI Bootstrap 只依赖 AngularJS,因此可以避免引入额外的库,降低页面加载时间。 4. **响应式设计**:所有组件都遵循 Bootstrap 的响应式设计原则...