5个示例带你学习AngularJS
直到现在,你或许已经听说过AngularJS了,一个改变你对web应用思考方式,由谷歌开发的令人兴奋的开源框架。关于它的文章已经写得非常之多,但我发现还是要写些给那些更喜欢快速且实际例子的开发者。当今对web编程已经发生了改变。下面通过对5个实例的解释,你可以找到Angular应用的基本构建块,包括模型,视图,控制器,服务和过滤器,你可以在自己的浏览器中直接编辑。如果你更倾向于在你喜欢的代码编辑器中打开,那么请下载zip包。
什么是AngularJS?
在高层次理解之上,AngularJS是一个把HTML(视图)绑定到JavaScript对象(模型)上的框架。当模型改变时,页面也能自动随之更新,反之亦然。当某个域的内容发生变化时,与之关联的模型也能更新。正因为Angular处理了所有的中间代码,所以你不用像jQuery那样,手动更新HTML或者事件监听。事实上,这里没有任何一个例子使用到了jQuery!
如果要使用AnguarJS,你就得在<body>标签结束之前把它包含到你的页面里。这里推荐使用谷歌CDN,相比来说,它有比较快速的加载时间:
JavaScript
1
2
3
|
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"><
/script>
|
AngularJS通过大量的指令让你能够在模型和HTML元素间做关联。它们就是以ng-开头的属性,并且能添加到任何元素上。如果你想使用Angular,你不得不为每个页面包含一个最重要的属性,即ng-app:
JavaScript
1
|
<body ng-app>
|
这个元素应该被添加到能够包含剩余页面的元素上,诸如body或者外围的div元素之类。当页面加载时,Angular会寻找这个属性,并且会自动评估在子元素上看到的所有指令。
理论部分就到此为止了!现在让我们看看代码。
1.导航菜单
作为第一个例子,我们要构建一个会高亮选中条目的导航菜单。这个例子仅仅使用了Angular指令,同时可能也是使用这个框架最简单的应用。查看源代码请单击”编辑”按钮。开始准备实验了!
从以上的代码得知,我们使用到了Angular指令来设置以及读取active变量。当它改变时,它会引起使用到它的HTML自动更新。在Angular的术语中,这样的变量叫做模型。当前域中的所有指令都能使用它,并且在你的控制器(更多请看下面的例子)中也能获取得到。
如果你之前使用过JavaScript模板,你对{{var}}语法应该会很熟悉。当框架看到这样的字符串时,它会用变量的内容来代替。这种操作在变量改变时会重复一次。
2.内联编辑器
对第二个例子,我们会创建一个简单的内联编辑器-单击段落时会显示文本提示框。我们会使用到一种控制器,能够初始化模型,以及声明两个函数用来切换提示的可见性。控制器是常规的JavaScript函数,能自动被Angular执行。使用中,用ng-controller指令关联相关的页面。
当控制器函数执行时,它能得到特殊的$scope对象作为其一个参数。在这个对象上增加属性或者函数,同样对视图可用。使用ng-model绑定在文本域上告诉Angular当域值改变时,要更新相关内容(这样反过来就能重新渲染段落上的值)。
3.订单表单
在这个例子里,我们使用另一个Angular中非常有用的特性-过滤器,来编写一个能实时更新总价的订单表单。过滤器能通过管道符”|”级联起来修改模型。在下面的例子中,我使用了货币过滤器,把数字转换为正确格式化的价格,包括美元符号以及分。你也可以和即将看到的第四个例子一样,很容易地创造自己的过滤器。
ng-repeat绑定(文档)是框架的另一个有用的特性,能够让你遍历数组元素并且生成相应的标记。当某个条目改变或者删除时,它能够智能地更新。
注释:要得到更完整的版本,请查阅此教程,基于这个版本用Backbone.js实现。
4.即时搜索
这个例子允许用户通过在文本域输入来过滤条目集。这是Angular另一个出众的地方,也是编写自定义的过滤器最合适的地方。既然要这样做,首先我们就不得不把我们的应用转换成一个模块。
模块是把JavaScript应用组织成通过新颖而又有趣的方式进行绑定形成独立组件的一种方式。Angular通过这种技术达到了代码分离,并且要求你创建过滤器时遵循这种方式。在把你的应用转变成模块中,你仅仅需要做两件事:
1.在你的JS中使用angular.module(“name”,[])函数调用。这样就会进行初始化并且返回一个新的模块;
2.通过ng-app指令值传递模块的名称。
然后创建过滤器仅仅是简单地调用由angular.module(“name”,[])返回的模块对象上的filter()方法。
过滤器同样遵循Angular.js的哲学理念–每一份你写的代码应该是独立的,可测试的以及可重用的。你可以在所有视图中使用这个过滤器,甚至通过级联和其它组件连接起来。
5.切换网格
另一个经常用到的交互UI是通过单击按钮来切换不同的布局模式(网格或者列表)。这用Angular来做非常容易。另外,我会介绍一下另一个重要的概念–服务。它们是一种对象,能够用来让你的应用和服务器进行交互,比如:API,或者其它数据源。这个例子里,我们会编写一个与InstagramAPI交互的服务,用它来返回以数组形式当前最流行的图片。
请注意,要运行此代码,我们要在页面中包含额外的一个Angular.js:
1
2
3
|
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"><
/script>
|
这其中包含了ngResource模块,能非常容易与AJAXAPI一起工作(此模块在代码中用$resource变量公开)。下面的编辑器里已经自动包含了这个文件。
服务是完全独立的,因此编写不同的实现可以不影响其它的代码。比如在测试时,你可能更喜欢返回一个硬编码的图片数组来加快测试过程。
延伸阅读
如果你已经按照上面例子做了的话,你已经理解了Angular开发的基本要点了。但是,如果要成为专业人才的话,需要更多地去学习。以下列出一些资源,能在你探索过程中带来帮助:
5个示例带你学习AngularJS的更多相关文章
- 接近带给你AngularJS - 经验说明示例
接近带给你AngularJS列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自己定义指令 ------------ ...
- 带你走近AngularJS - 基本功能介绍
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- 带你走近AngularJS - 体验指令实例
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- 带你走近AngularJS - 创建自定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- 带你走近AngularJS - 创建自己定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自己定义指令 ------------ ...
- 带你走近AngularJS 之创建自定义指令
带你走近AngularJS 之创建自定义指令 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义 ...
- 学习AngularJs:Directive指令用法(完整版)
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
- 十个非常棒的学习angularjs的英文网站
AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app.AngularJS自2009发布以来,已经广泛应用于Web 开发中.但是对想要学习Angular JS 的人而言,只 ...
- 具备 jQuery 经验的人如何学习AngularJS(附:学习路径)
这是一个来自stackoverflow的问答,三哥直接把最佳回答搬过来了. 都说AngularJS的学习曲线异常诡异~~~ Q: “Thinking in AngularJS” if I have a ...
随机推荐
- 最短路径---Dijkstra/Floyd算法
1.Dijkstra算法基础: 算法过程比prim算法稍微多一点步骤,但思想确实巧妙也是贪心,目的是求某个源点到目的点的最短距离,总的来说dijkstra也就是求某个源点到目的点的最短路,求解的过程也 ...
- 使用DocX开源组件,实现动态数据的填充。
1.先解释一下,什么叫做动态数据,动态数据指的是,一条数据的格式固定,但数据的条数不固定. 2.应用环境,在一个表格当中如果,现在表格有三行n列,如果你需要在表格第一行后添加同等规格的一行或n行,应该 ...
- Failed to create the Java Virtual Machine.问题的解决
运行Eclipse,出现了"Failed to create the Java Virtual Machine."错误: 解决的办法是在Eclipse的解压目录下找到eclipse ...
- 第 17 章 CSS 边框与背景[上]
学习要点: 1.声明边框 2.边框样式 3.圆角边框 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一.声明边框 边框的声明有 ...
- Eclipse保存文件时自动格式化代码
实现效果:Ctrl+S会自动格式化并保存代码. 应用上图所示效果之后,在每次对Eclipse保存的时候都会实现自动格式化代码. 1. Fomated All lines,格式化该文件的所有代码:还是 ...
- Android提升篇系列:Activity recreate(Activity 重新创建/自我恢复)机制(一)
注:本文中的recreate是指当内存不足时,Activity被回收,但再次来到此Activity时,系统重新恢复的过程.例如:当Activity A到Activity B时,如果内存不足,A被回收, ...
- PCL -语法错误:“::” error C2589: “(”:“::”右边的非法标记
1.错误原因:系统函数与pcl中的max函数冲突导致的 2.两种解决办法: 1)错误中max和min函数用括号括起来,例如"std::Max"修改为“(std::Max)”. 2) ...
- 局域网ping Linux主机名
1.Windows ping Linux主机名 #ubuntu 下 sudo apt-get install winbind #centos 下 yum install samba service n ...
- 如何订阅Form的自定义事件
Window Form类有很多的属性/方法和事件,其中事件属于一种发布订阅模式 .订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主体对象.这个主体对象在自身状态变化时,会通知所 ...
- 【再探backbone 01】模型-Model
前言 点保存时候不注意发出来了,有需要的朋友将就看吧,还在更新...... 几个月前学习了一下backbone,这段时间也用了下,感觉之前对backbone的学习很是基础,前几天有个园友问我如何将路由 ...