AngularJS的五个超酷特性

AngularJS是一个超棒的javascript框架,不单单对于开发人员来说非常有吸引力,对于UI设计师来说也同样出色。在这篇教程中,我们将简单的介绍AngularJS几个重量级必备特性,并且介绍它如何能够让你的web应用更加强大!

AugularJS简单介绍


AngularJS是一个新出现的强大客户端技术,提供给大家的一种开发强大应用的方式。这种方式利用并且扩展HTMLCSSjavascript,并且弥补了它们的一些非常明显的不足。本应该使用HTML来实现而现在由它开发的动态一些内容。

在这篇文章中,我们讲述了一些最重要的AngularJS功能和特性。我们的目标在于阅读后,你可以开始自己开发一些有趣的应用。

特性一:双向的数据绑定

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

我们想象一下Model是你的应用中的简单事实。你的Model是你用来读取或者更新的部分。数据绑定指令提供了你的Model投射到view的方法。这些投射可以无缝的,毫不影响的应用到web应用中。

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

这里肯定有更好的解决方案!那就是AngularJS的双向数据绑定,能够同步DOM和Model等等。

这里有一个非常简单的例子,用来演示一个input输入框和<h1>元素的双向绑定:

<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello, {{yourName}}!</h1>
</div>
</body>
</html>

特性二:模板

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

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

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

最大的好处是为设计师和开发者创建了一个紧密的工作流。设计师可以像往常一样开发标签,然后开发者拿过来添加上功能,通过数据绑定将会使得这个过程非常简单。

这里有一个例子,我们使用ng-repeat指令来循环图片数组并且加入img模板,如下:

function AlbumCtrl($scope) {
scope.images = [
{"image":"img/image_01.png", "description":"Image 01 description"},
{"image":"img/image_02.png", "description":"Image 02 description"},
{"image":"img/image_03.png", "description":"Image 03 description"},
{"image":"img/image_04.png", "description":"Image 04 description"},
{"image":"img/image_05.png", "description":"Image 05 description"}
];
}

<div ng-controller="AlbumCtrl">
<ul>
<li ng-repeat="image in images">
<img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
</li>
</ul>
</div>

这里还有一件事值得提一句,AngularJS并不强制你学习一个新的语法或者从你的应用中提出你的模板。

特性三:MVC

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

Model

model是应用中的简单数据。一般是简单的javascript对象。这里没有必要继承框架的classes,使用proxy对象封装或者使用特别的setter/getter方法来访问。事实上我们处理vanilla
javascript的方法就是一个非常好的特性,这种方法使得我们更少使用应用的原型。

ViewModel

viewmodel是一个用来提供特别数据和方法从而维护指定view的对象。

viewmodel是$scope的对象,只存在于AnguarJS的应用中。$scope只是一个简单的js对象,这个对象使用简单的API来侦测和广播状态变化。

Controller

controller负责设置初始状态和参数化$scope方法用以控制行为。需要指出的controller并不保存状态也不和远程服务互动。

View

view是AngularJS解析后渲染和绑定后生成的HTML
。这个部分帮助你创建web应用的架构。$scope拥有一个针对数据的参考,controller定义行为,view处理布局和互动。

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

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

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

为了而得到核心的AngularJS服务,只需要添加一个简单服务作为参数,AngularJS会侦测并且提供给你:

function EditCtrl($scope, $location, $routeParams) {
// Something clever here...
}

你也可以定义自己的服务并且让它们注入:

angular.
module(‘MyServiceModule‘, []).
factory(‘notify‘, [‘$window‘, function (win) {
return function (msg) {
win.alert(msg);
};
}]);

function myController(scope, notifyService) {
scope.callNotify = function (msg) {
notifyService(msg);
};
}

myController.$inject = [‘$scope‘, ‘notify‘];

特性五:Directives(指令)

指令是我个人最喜欢的特性。你是不是也希望浏览器可以做点儿有意思的事情?那么AngularJS可以做到。

指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。

这里是一个例子,它监听一个事件并且针对的更新它的$scope ,如下:

myModule.directive(‘myComponent‘, function(mySharedService) {
return {
restrict: ‘E‘,
controller: function($scope, $attrs, mySharedService) {
$scope.$on(‘handleBroadcast‘, function() {
$scope.message = ‘Directive: ‘ + mySharedService.message;
});
},
replace: true,
template: ‘<input>‘
};
});

然后,你可以使用这个自定义的directive来使用:

<my-component ng-model="message"></my-component>

使用一系列的组件来创建你自己的应用将会让你更方便的添加,删除和更新功能。

额外的特性:测试

AngularJS内含了测试用例可以帮助你更方便的执行测试。为什么不用呢?

JS是一个动态的解析性语言,而不是编译类型的,因此非常的难写测试。

AngularJS被开成一个可测试的框架。它甚至包含了点对点的单元测试runner。如果你喜欢这个特性,看看这个项目:https://github.com/angular/angular-seed

一但你运行这个项目,你可以看到如下输出:

API文档是完整的点对点测试,说明了整个架构师如何工作的。通过查看这些测试,你会对AngularJS有更深刻的了解。

总结

在这篇教程中,我们总结了6个AngularJS的关键特性。如果大家对于AngularJS有兴趣,请访问http://angularjs.org

AngularJS的五个超酷特性,码迷,mamicode.com

时间: 04-28

AngularJS的五个超酷特性的相关文章

Javascript教程:AngularJS的五个超酷特性

AngularJS是一个超棒的javascript框架,不单单对于开发人员来说非常有吸引力,对于UI设计师来说也同样出色.在这篇教程中,我们将简单的介绍AngularJS几个重量级必备特性,并且介绍它如何能够让你的web应用更加强大! AugularJS简单介绍 AngularJS是一个新出现的强大客户端技术,提供给大家的一种开发强大应用的方式.这种方式利用并且扩展HTML,CSS和javascript,并且弥补了它们的一些非常明显的不足.本应该使用HTML来实现而现在由它开发的动态一些内容.

AngularJS的五个特性

AngularJS的五个超酷特性 特性一:双向的数据绑定 数据绑定是AngularJS最酷最实用的特性.它能够帮助你避免书写大量的初始代码从而节约开发时间.一个典型的web应用可能包含了80%的代码用来处理,查询和监听DOM.数据绑定使得代码更少,你可以专注于你的应用. 想象一下,Model是你的应用中的简单事实.你的Model是你用来读取或者更新的部分.数据绑定指令提供了你的Model投射到view的方法.这些投射可以无缝的,毫不影响的应用到web应用中. 传统来说,当model变化了,开发人

精选10款超酷的HTML5/CSS3菜单

今天向大家精选了10款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧. 1.CSS3手风琴菜单 下拉展开带弹性动画 利用CSS3技术可以实现各种各样的网页菜单,我们之前也在CSS3菜单栏目中分享了许多CSS3菜单.今天我们分享的这款是CSS3手风琴菜单,菜单项在展开和收缩的时候菜单项会有弹性动画效果.每一层父级菜单有一个小三角,菜单项在展开的时候这个小三角也会出现动画,非常酷. 在线演示 / 源码下载 2.CSS3动画下拉菜单 带动画图标 利用CSS3可以制作很多精

18 款超酷的 HTML5 和 JavaScript 游戏引擎库

现在的游戏开发变得越来越复杂,需要制作各种炫丽的效果,还要制作各种基于 2D 或者 3D 的场景.为了节省游戏开发者的时间,让开发者集中精力在游戏的创新上,出现了许许多多的游戏引擎.而现在为了实现跨平台,HTML5 和 JavaScript 成功为了游戏开发者必备的利器,特别是移动端的开发者,必须要能很好的掌握 HTML5 和 JavaScript. 现在这么多的游戏引擎,各有各的优点和缺点,为了帮助开发者们找到属于自己的那款游戏开发引擎,我们综合了许多方面的考虑,选出来以下的 18 个超酷的

超酷创意HTML5动画演示及代码

HTML5是未来的网页开发神器,今天分享的这些HTML5动画大部分利用了CSS3的动画属性来实现,废话不多说,直接上演示和代码. HTML5/CSS3实现大风车旋转动画 这次我们要来分享一款很酷的HTML5动画,是一个可以旋转的大风车动画效果,回顾一下利用HTML5实现的旋转动画,我们可以看HTML5/CSS3实现3D旋转陀螺动画,它们的实现都是利用CSS3的transform:rotate属性,这款大风车动画的确比较厉害的. 在线演示        源码下载 用HTML5/CSS3给女朋友送个

超酷MWC四轴飞行器DIY全套教程

本帖最后由 hitor 于 2013-8-17 22:06 编辑一.自己玩四轴的经历介绍.      各位模友大家好,我是哈工大航院的一名学生.我接触四轴的时间较早,由于我室友大二做科创就是做四轴的,那时候我们俩一人负责一个项目,他做四轴我做电动独轮车,我不太喜欢我的项目,烧了好多钱,最后也只能草草了事.我对四轴倒是很感兴趣,所以他一焊电路.写程序或是调试PID参数,我都像跟班似的死死的盯着他做的东西,有不懂的就向他请教,时间长了我也掌握了四轴的一些基本知识.几个月前我突发了做四轴的想法,但我不

16款最佳HTML5超酷动画演示及源码

1.HTML5/CSS3图片选择动画 可选择多张图片 之前我们已经分享过几款很酷的HTML5图片特效,像HTML5 3D图片折叠特效.HTML5 3D旋转图片相册等应用.今天我们来分享一款既炫酷又实用的HTML5图片选择特效,当图片被选中时,图片上就会覆盖一个半透明的层,上面有一个勾,并且在选中的时候图片出现弹跳的动画效果. 在线演示 源码下载 2.HTML5/CSS3折叠动画登录表单 之前我们分享过一款仿facebook的登录表单,效果的确很赞.今天我们再来分享一款很有特色的CSS3登录表单,

超酷算法:喷泉码

今天的主题是喷泉码,或者称为“无率码”.喷泉码是将一些数据,例如文件,转化为一个有效的任意数量的编码包的方法,这样只要你接收到稍大于信源数据包数量的编码包的子集,就可以恢复信源数据.换句话说,你创建了一个编码数据的“喷泉”,只要接收端接收到足够的“水滴”,就可以恢复文件,而不管它们接到哪一个遗漏了哪一个. 让喷泉码如此知名的原因是,它允许你在有损连接(比如说因特网)的情况下传输文件,而且传输过程不依赖于你是否知道丢包率,也不需要接收端反馈哪些数据包丢失了.可以看到在很多场景,从通过广播媒介传送一

C#完成超酷的图像效果 (附demo)

如果您觉得C#制作的艺术字比较好玩, 但是还觉得没看够,不过瘾,那么我今天就让您一饱眼福, 看看C#如何制作的效果超酷的图像. (注: 我之前曾写过类似的文章, 但没有原理说明, 代码注释不够详细, 也没有附相应的 Demo...因此如果您觉得好像哪看过类似的文章可以看看我之前写的...) 为了演示后面的效果, 这里有必要先让大家看看今天的原始图片: ISINBAEVA ~~~~~~~~ 一. 底片效果原理: GetPixel方法获得每一点像素的值, 然后再使用SetPixel方法将取反后的颜色