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.5 发布,Web 前端框架

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

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...

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...

08/12 07:09

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

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

06/13 07:30

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

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

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)。 该版本包含部分...

05/12 07:58

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

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

04/24 08:05

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

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

04/15 07:50

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

Angular 6.0.0-rc.4 发布了。Angular 是一个使用 TypeScript / JavaScript 和其他语言构建移动和桌面 Web 应用程序的开发平台。 主要更新内容: Bug 修复 bazel: set rollup output.name an...

04/13 07:15

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

Angular 6.0.0-rc.2 发布。 Angular 是一个使用 TypeScript / JavaScript 和其他语言构建移动和桌面 Web 应用程序的开发平台。 Bug 修复 common: locales 未起作用。 (#23136) (7ca7720) com...

04/06 06:43

没有更多内容

加载失败,请刷新页面

1
回答
bootstrap datepicker控制日期选择

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

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':...

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

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

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

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

2016/08/15 10:27
1
回答
Angular2中如何在插件的异步操作中返回Observable?
哎码 的回答 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请求的结果?
哎码 的回答 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
17
回答
模板框架选用问题
sxgkwei 的回答 04/13 15:46
最佳答案
看项目类型吧。 一般做网站公共服务类型的,适合现在正流行的前后端分离方式来做。前面的 @ManderSF 已经说的很清楚了,这些好处还是显而易见的。说不定哪天,老板就想支持到其它端上的业务去了。 然而,做企业内部应用的,甚至连 Spring boot 都不适合使用。因为企业一般就一个服务器运行...
1
回答
在使用Angular的时候如何避免破坏html结构?
哎码 的回答 04/10 21:59
最佳答案
解决了,用了ng-container

没有更多内容

加载失败,请刷新页面

Egghead.io AngularJS视频教程

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

2014/02/08 14:36
101
0
《AngularJS学习整理》系列分享专栏

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

11/09 09:16
42
0
给 Web 开发者的 25 款最有用的 AngularJS 工具

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

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

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

2013/12/28 16:11
147
0
AngularJs

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

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

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

2014/10/12 12:21
33
0
Angular成系统的学习资料整理

中文学习资料: http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的官方的Guide http://www.ituring.com.cn/minibook/303 翻译的官方的tutorial http://www.lovelucy.in...

2014/08/15 13:05
70
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部