JavaScript MVW 框架 AngularJS

JavaScript MVW 框架 AngularJS

MIT
JavaScript 查看源码»
跨平台
Google
2011-01-20
红薯

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 Web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,兼容主流浏览器,与 jQuery 配合良好。

数据绑定可能是 AngularJS 最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的 Web 应用可能包含了 80% 的代码用来处理,查询和监听 DOM。数据绑定使得代码更少,你可以专注于你的应用。

传统来说,当 Model 变化了。 开发人员需要手动处理 DOM 元素并且将属性反映到这些变化中。这个一个双向的过程。一方面,Model 变化驱动了 DOM 中元素变化,另一方面,DOM 元素的变化也会影响到 Model。这个在用户互动中更加复杂,因为开发人员需要处理和解析这些互动,然后融合到一个 Model 中,并且更新 View。这是一个手动的复杂过程,当一个应用非常庞大的时候,将会是一件非常费劲的事情。

特性二:模板

在 AngularJS 中,一个模板就是一个 HTML 文件。但是 HTML 的内容扩展了,包含了很多帮助你映射 Model 到 View 的内容。

HTML 模板将会被浏览器解析到 DOM 中。DOM 然后成为 AngularJS 编译器的输入。AngularJS 将会遍历 DOM 模板来生成一些指导,即,directive(指令)。所有的指令都负责针对 View 来设置数据绑定。

我们要理解 AuguarJS 并不把模板当做 String 来操作。输入 AngularJS 的是 DOM 而非 string。数据绑定是 DOM 变化,不是字符串的连接或者 innerHTML 变化。使用 DOM 作为输入,而不是字符串,是 AngularJS 区别于其它的框架的最大原因。使用 DOM 允许你扩展指令词汇并且可以创建你自己的指令,甚至开发可重用的组件。

特性三:MVC

针对客户端应用开发 AngularJS 吸收了传统的 MVC 基本原则。MVC 或者 Model-View-Controll 设计模式针对不同的人可能意味不同的东西。AngularJS 并不执行传统意义上的 MVC,更接近于 MVVM(Model-View-ViewModel)。

特性四:依赖注入(Dependency Injection,即 DI)

AngularJS 拥有内建的依赖注入子系统,可以帮助开发人员更容易的开发,理解和测试应用。

DI 允许你请求你的依赖,而不是自己找寻它们。比如,我们需要一个东西,DI 负责找创建并且提供给我们。

特性五:Directives(指令)

指令是我个人最喜欢的特性。你是不是也希望浏览器可以做点儿有意思的事情?那么 AngularJS 可以做到。
指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作 DOM 属性。

该条目收录的是 1.x 版本,因为官方将 1.x 系列与 Angular 2 及后面的版本分开维护,所以有了这个条目 — Angular

的码云指数为
超过 的项目
加载中

评论(46)

Skyogo
Skyogo
还可以
Bd999
Bd999
没有Vue速度快,但是很经典
开源小熊猫
开源小熊猫
什么是model?什么是demo?分别代表是是什么?
可译网
可译网
#AngularJS# 2 和 Angular 4 的功能和性能的比较 https://coyee.com/a/12371
任重道元
任重道元
最喜欢它的双向数据绑定了,最近在学
用一个花开的季节温暖眼瞳
这个目前 比jQuery还火?
PG_wcw
PG_wcw
好用吗?
空腔
空腔
Angular 2目前RC,估计还得大半年才能出正式版,所以等着用的宝宝们可以先玩玩别的 #AngularJS#
MartinBockZhu
MartinBockZhu

Angular.js 1.7.7 发布,Web 前端框架

Web 前端框架 Angular.js 1.7.7发布了,更新内容如下: Bug 修复 ngRequired: 在ngRepeat内部时正确设置错误,默认情况下设置为false (5ad4f5, #16814, #16820) 更新日志...

02/05 07:38

Angular.js 1.7.6 发布,Web 前端框架

Web 前端框架 Angular.js 1.7.6 发布了,更新内容如下: Bug 修复 $compile: 修复 ng-prop-* 未定义值的问题 (772440, #16797, #16798) compile: 用 JQuery 正确处理 boolean 参数的 false ...

01/18 07:43

Angular.js 1.7.5 发布,Web 前端框架

Angular.js 1.7.5 已发布,这是一个很小的 bug 修复版本: ngClass: do not break on invalid values (f3a565, #16697, #16699) 以往版本更新记录可查阅: https://github.com/angular/angul...

2018/10/06 07:09

Angular.js 1.7.4 发布,Web 前端框架

Angular.js 1.7.4 已发布,包含以下修复更新: ngAria.ngClick: prevent default event on space/enter only for non-interactive elements (61b335, #16664, #16680) ngAnimate: remove th...

2018/09/08 07:24

Angular.js 1.7.3 发布,Web 前端框架

Angular.js 1.7.3 已发布。主要更新内容如下: Bug 修复 $location: fix infinite recursion/digest on URLs with special characters (e68697, #16592, #16611) avoid unnecessary $locatio...

2018/08/12 07:09

Angular.js 1.7.2 发布,Web 前端框架

Angular.js 1.7.2 已发布。主要更新内容如下: 在之前的版本中,AngularJS 移除了私人、未公开的 API。而一些流行的 UI 库(如 AngularJS Material,UI Bootstrap,ngDialog 等)都依赖于该 ...

2018/06/13 07:30

Angular.js 1.7.1 发布,Web 前端框架

Angular.js 1.7.1 已发布。主要更新内容如下: Bug 修复 $compile: 支持 transcluding 多元素指令 (789db8,#15554,#15555) ngModel: 如果视图值在销毁范围上发生变化,请不要抛出 (2b6c98,#1...

2018/06/09 07:19

Angular.js 1.7.0 发布,Web 前端框架

Angular.js 1.7.0 发布了。1.7.0 是 AngularJS 的最后一个预定版本,包括重大更改。1.7.x 补丁版本将继续更新,直到AngularJS 于 2018 年 7 月 1 日进入长期支持模式(LTS)。 该版本包含部分...

2018/05/12 07:58

Angular 6.0 即将发布,承诺更小更快更易用

本月早些时候,Angular 团队发布了 6.0 的第五版候选版本,其中包括一些错误修复以及添加令牌标记和支持配置导航网址。 根据 Angular 的开发者支持者 Stephen Fluin 的说法,RC 意味着团队已...

2018/04/24 08:05

构建 Web 应用程序的开发平台 Angular 6.0.0-rc.5 发布

Angular 6.0.0-rc.5 发布了。Angular 是一个使用 TypeScript / JavaScript 和其他语言构建移动和桌面 Web 应用程序的开发平台。 官方暂未提供更新内容,您可以查看以下页面保持关注: 发布主...

2018/04/15 07:50

没有更多内容

加载失败,请刷新页面

3
回答
前端学习路线

对前端的学习道路有点蒙,哪位大神可以说一下

02/12 17:31
1
回答
ng-bind-html不生效

有一段html代码,里面有字体大小,颜色,倾斜度的设置,但是使用ng-bind-html绑定在文本域中没有效果,我已引用了ngSanitize模块。请问这...

2016/09/07 14:53
1
回答
bootstrap datepicker控制日期选择

页面点击按钮弹出模态框如下图所示: 第一次选择日期,开始日期、结束日期选择如图所示;选择完后直接关闭模态框,再次点击按钮弹出模态框,点击开始日期输入框弹出...

2018/11/21 18:49
3
回答
IONIC+AngularJS 动态插入幻灯片图片

请教一个关于动态插入幻灯片图片的问题 目前在使用ionic+angular做开发,页面中使用了<ion-slide-box></ion-slide-box...

2014/08/24 14:03
2
回答
angularjs实现Excel导出

1、controller.js hkdd.excel=function(){ var hkkds={ headers: { 'Content-Type':...

2018/07/10 14:05
1
回答
结果是js内存泄露,但过程不是稳定的线性增长,会是什么原因?

运行一个脚本,使得浏览器中网页反复运行一段逻辑,1个半小时js heap会达到600M+,但1个小时的时候仅有30M+,在我看来的这个内存泄露是非线性的增...

2018/07/02 19:27
3
回答
ionic项目中怎么进行用图片代替checkbox

如上面的图,我怎样选择一个或多个??选中的时候,不改变图片,可以只是改变背景色

2016/08/15 10:27
1
回答
Angular2中如何在插件的异步操作中返回Observable?
哎码 的回答 2018/04/23 19:48
最佳答案
解决了 import {Subject} from 'rxjs/Subject'; chooseImage(): Observable<any> { let subj = new Subject(); wx.chooseImage({ count: 1, // 默认9 sizeType: ['...
1
回答
Angular2中如何处理多个http请求的结果?
哎码 的回答 2018/04/18 21:40
最佳答案
解决了https://my.oschina.net/eima/blog/1797481
1
回答
AngularJS && HighCharts

项目中出现这样的问题: 有按钮控制切换显示柱状图($scope.shape="column")或线状图($scope.shape="line") 另有下拉...

2016/12/12 16:47

没有更多内容

加载失败,请刷新页面

Egghead.io AngularJS视频教程

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

2014/02/08 14:36
115
0
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript 框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web 开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高...

2015/07/25 16:46
162
1
AngularJS 中文资料+工具+库+Demo 大搜集

AngularJS 中文资料+工具+库+Demo 大搜集

2013/12/28 16:11
168
0
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

2018/11/09 09:16
89
0
AngularJs

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。它可通过

2015/07/10 16:49
30
0
[Angularjs] 第一步开始一个项目

[Angularjs] 第一步开始一个项目 一、什么是angularjs angularjs是2009年兴起的,目前由Google维护一个采用mvc模式的js框架,很多时候用来创建单页面应用。我也经常将其和phonegap一起来开发...

2014/10/12 12:21
36
0
6个强大的AngularJS扩展应用

AngularJS现在非常热门,是Google推出的一款非常优秀的前端JS框架。AngularJS最核心的概念是MVC、模块化、自动化双向数据绑 定、语义化标签、依赖注入等。目前AngularJS扩展还比较少,本文就...

2015/06/30 15:15
94
1

没有更多内容

加载失败,请刷新页面

返回顶部
顶部