5个示例带你学习AngularJS

时间 2019-11-12

原文原文链接

本文由伯乐在线 - 蝈蝈翻译自 tutorialzine。欢迎加入技术翻译小组。转载请参见文章末尾处的要求。

angularjs

直到如今，你或许已经据说过AngularJS了，一个改变你对web应用思考方式，由谷歌开发的使人兴奋的开源框架。关于它的文章已经写得很是之多，但我发现仍是要写些给那些更喜欢快速且实际例子的开发者。当今对web编程已经发生了改变。下面经过对5个实例的解释，你能够找到Angular应用的基本构建块，包括模型，视图，控制器，服务和过滤器，你能够在本身的浏览器中直接编辑。若是你更倾向于在你喜欢的代码编辑器中打开，那么请下载zip包。web

什么是AngularJS？

在高层次理解之上，AngularJS是一个把HTML(视图)绑定到JavaScript对象(模型)上的框架。当模型改变时，页面也能自动随之更新，反之亦然。当某个域的内容发生变化时，与之关联的模型也能更新。正由于Angular处理了全部的中间代码，因此你不用像jQuery那样，手动更新HTML或者事件监听。事实上，这里没有任何一个例子使用到了jQuery！ajax

若是要使用AnguarJS，你就得在<body>标签结束以前把它包含到你的页面里。这里推荐使用谷歌CDN，相比来讲，它有比较快速的加载时间：编程

<script

src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" ><

/script>

AngularJS经过大量的指令让你可以在模型和HTML元素间作关联。它们就是以ng-开头的属性，而且能添加到任何元素上。若是你想使用Angular，你不得不为每一个页面包含一个最重要的属性，即ng-app:api

1	`<body ng-app>`

这个元素应该被添加到可以包含剩余页面的元素上，诸如body或者外围的div元素之类。当页面加载时，Angular会寻找这个属性，而且会自动评估在子元素上看到的全部指令。数组

理论部分就到此为止了！如今让咱们看看代码。浏览器

1.导航菜单

做为第一个例子，咱们要构建一个会高亮选中条目的导航菜单。这个例子仅仅使用了Angular指令，同时可能也是使用这个框架最简单的应用。查看源代码请单击”编辑”按钮。开始准备实验了！服务器

从以上的代码得知，咱们使用到了Angular指令来设置以及读取active变量。当它改变时，它会引发使用到它的HTML自动更新。在Angular的术语中，这样的变量叫作模型。当前域中的全部指令都能使用它，而且在你的控制器(更多请看下面的例子)中也能获取获得。app

若是你以前使用过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：

<script

src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"><

/script>

这其中包含了ngResource模块，能很是容易与AJAXAPI一块儿工做(此模块在代码中用$resource变量公开)。下面的编辑器里已经自动包含了这个文件。

服务是彻底独立的，所以编写不一样的实现能够不影响其它的代码。好比在测试时，你可能更喜欢返回一个硬编码的图片数组来加快测试过程。

延伸阅读

若是你已经按照上面例子作了的话，你已经理解了Angular开发的基本要点了。可是，若是要成为专业人才的话，须要更多地去学习。如下列出一些资源，能在你探索过程当中带来帮助：