Angularjs为什么在JS框架中排名第一

很多人感觉jquery 比 Angularjs 火太多啦,Angularjs怎么会是排名第一

首先说明一下,Angularjs 是JS的一个框架,而jquery 是一个JS库

jquery 就像一个工具箱,为我们提供了非常丰富好用的工具,我们想怎么用就怎么用,jquery只负责让我们更便利,不关心我们的工作方式和流程

Angularjs 则定义了一套工作规范,只能按照他的规则来工作,Angularjs是依靠高效的工作规范来提高我们的开发效率的

Angularjs的显著优势

数据双向绑定

举一个angular最简单的例子

<body ng-app>

<span>Insert your name:</span>

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

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

</body>

执行后,在 input 中输入的内容会立即在 h3 中显示出来,input 和 h3 的内容完全同步

这就是数据的双向绑定,大概思路:

ng-model 指令在作用域中添加了一个名为 user.name 的数据模型,input 的值一变,数据模型也跟着改变{{user.name}} 是Angularjs的模板语言,用来显示名为user.name的数据模型的值,当数据模型的值改变时,会通知{{user.name}}进行改变

这样,通过隐藏的数据模型就实现了数据的双向绑定

如果没有Angularjs定义的这个规则,通过jquery来实现的话还是稍显复杂的

强大的内置指令

指令为html引入了新的语法,使html更强大

Angularjs内置了很多强大的指令,例如 repeat循环指令

<body ng-app="app" ng-controller="MainCtrl">
 <ul>
   <li ng-repeat="person in developers">
     {{person.name}} from {{person.country}}
   </li>
 </ul>
</body>

ng-repeat 指令非常简单的实现了 li 的循环处理

如果使用jquery实现,可能要引入模板插件,编写li循环模板代码,然后调用模板处理数据,从代码复杂度和代码可读性上看,Angularjs的指令都更加有优势

可自定义扩展指令

内置指令毕竟有限,Angularjs允许我们自定义指令,例如

app.directive('hello', function() {
  return {
    restrict: "E",
    replace: true,
    template: "<div>Hello readers</div>"
  }
});

这里简单定义了一个名为 'hello' 的标签,在html中就可以直接使用了 <hello></hello>

再看个例子,我们通过jquery的插件显示饼图

在html中定义一个容器节点

<div id="chart"></div>

在JS中调用饼图插件

$('#chart').pieChart({ ... });

在这里,如果不去看js代码,只看html很难理解这个节点的含义

如果使用指令,就会清晰很多

<pie-chart width="400" height="400" data="data"></pie-chart>

通过上面的几个例子,看到了Angularjs的一些优势,Angularjs的设计的确很优秀,例如通过模板和控制器使代码和逻辑层次分明,还引入了依赖注入、服务等后端框架常用的概念,对表单验证和单元测试也有非常好的支持,Angularjs还是非常值得学习的

原文发布于微信公众号 - 性能与架构(yogoup)

原文发表时间:2015-10-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

9 个使用前必须再三小心的 Linux 命令

Linux shell/terminal 命令非常强大,即使一个简单的命令就可能导致文件夹、文件或者路径文件夹等被删除。 在一些情况下,Linux 甚至不会询问...

36860
来自专栏熊二哥

快速入门系列--WCF--06并发限流、可靠会话和队列服务

这部分将介绍一些相对深入的知识点,包括通过并发限流来保证服务的可用性,通过可靠会话机制保证会话信息的可靠性,通过队列服务来解耦客户端和服务端,提高系统的可服务数...

23370
来自专栏前端杂货铺

XSS分析及预防

XSS(Cross Site Scripting),又称跨站脚本,XSS的重点不在于跨站点,而是在于脚本的执行。在WEB前端应用日益发展的今天,XSS漏洞尤其容...

37370
来自专栏星汉技术

HBase工作原理

501110
来自专栏机器学习算法与Python学习

Python:爬虫系列笔记(2) -- 基本了解及urllib的使用

1.什么是爬虫 爬虫,即网络爬虫,大家可以理解为在网络上爬行的一直蜘蛛,互联网就比作一张大网,而爬虫便是在这张网上爬来爬去的蜘蛛咯,如果它遇到资源,那么它就会抓...

36560
来自专栏枕边书

PHP 调用 Go 服务的正确方式 - Unix Domain Sockets

问题 可能是由于经验太少,工作中经常会遇到问题,探究和解决问题的过程总想记录一下,所以我写博客经常是问题驱动,首先介绍一下今天要解决的问题: 服务耦合 我们在开...

389110
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(55)-Web打印

系列目录 前言 1.本次主要弥补工作流,用户表单数据的打印 2.使用JQprint做为web打印插件 3.兼容:FireFox,Chrome,IE、 4...

43050
来自专栏卡少编程之旅

在Windows上切换node版本的实践

362120
来自专栏较真的前端

关于网络请求的面试题总结

27650
来自专栏蓝天

揭开Linux的Swap之谜

为什么选择Linux?因为Linux能让你掌握你所做的一切!   为什么痛恨Windows?因为Windows让你不知道自己在做什么!   这就是我喜欢Linu...

17330

扫码关注云+社区

领取腾讯云代金券