摘要：开始使用现在创建一个名为的文件，它将会是一个基于的网上书店应用。这将初始化应用程序，并告诉要在这一部分活跃。将为每个元素增加元素。控制器和视图之间的粘合剂，而且会注入到。现在我们添加书籍数组的对象到对象，这个对象对视图是可见的。
编者注：我们发现了比较有趣的系列文章《30天学习30种新技术》，准备翻译，一天一篇更新，年终礼包。以下是第二天技术的译文。
昨晚我完爆了一天一技术的任务（完成的很好），谈的是关于Bower的一些知识，你可以在这里看一下文章，也可以去 reddit 看看大家的讨论。
今天我打算学习一下AngularJS的基本知识，并希望能用它做一个简单小应用。我也会在这篇文章里用到Bower，我不可能在一天之内学习完AngularJS，所以我打算用好几天时间来学习，每天涉及其中不同的点。
扩展HTML添加动态特性，因此我们可以轻松地构建现代web应用程序
以你想要的方式使用
带你回到HTML
声明方法
简单
通过双向数据绑定消除DOM操作，任何时候当模型改变时视图都会得到更新，反之亦然
你可以用它来构建单页Web应用程序。当你构建如路由，Ajax调用，数据绑定，缓存，历史记录和DOM操作这类的SPA应用时，会有很多的挑战。
AngularJS的主要组件是：控制器：视图背后的代码
作用域：包含模型数据，粘合控制器和视图
模块：定义新的服务，或使用现有的服务、指令、过滤器等，模块可以依赖于另一个模块
指令：允许你通过定义自己项目特定的HTML指令来扩展HTML，学习HTML的新花样
对我而言有两个主要原因：
它是由谷歌支持，有很多开发者的大社区
全栈框架：这意味着我不需要依靠其他数百万计的脚本，它们会很好地整合在一起
我们将使用Bower为示例应用程序安装AngularJS，如果你还没有安装bower，那么请看我前一篇博文。
在系统的任何方便的位置创建一个叫 bookshop 的目录，用下面命令来安装AngularJS和Twitter bootstrap：
$ bower install angular $ bower install bootstrap
上面的命令会在bookshop目录下创建一个叫bower_components的文件夹，里边有已安装的全部组件。
现在创建一个名为 index.html 的html文件，它将会是一个基于AngularJS的网上书店应用。
Bookshop - Your Online Bookshop
Your Online Bookshop
如果你在浏览器打开这个文件，你会看到“你的网上书店”正在呈现，但这并不是AngularJS的厉害之处，所以接下来我们看看它真正有趣的地方：
Bookshop - Your Online Bookshop
Your Online Bookshop
-
{{book}}
上边这段代码有一些需要注意的点：
在HTML标签里边，我们已经定义了ng-app。这将初始化AngularJS应用程序，并告诉AngularJS要在这一部分活跃。所以，它在应用程序里是活跃整个html文件的。
我们所使用的第二个Angular指令是ng-init。这将初始化书籍数组中的一个，我们可以将它应用在我们的应用程序中。
最后一个有趣的部分，是用于遍历集合中的所有元素的ng-repeat指令。Angular将为每个元素增加 li 元素。所以，如果我们在Web浏览器中打开它，将会看到在一个列表中有四本书。
上边是以字符串数组的形式使用数据，但也可以用存储对象的方式，如下：
Bookshop - Your Online Bookshop
Your Online Bookshop
-
{{book.name}} written by {{book.author}}
在上面的代码中，我们创建了一个书籍数组对象，其中每本书对象都有名字和作者。最后，我们在列表中同时列出作者姓名和书籍名称。
使用过滤器Angular提供了过滤器，这有助于格式化数据。你可以使用过滤器来格式化日期、货币、大小写字符、排列顺序和基于搜索的过滤。下面就是一个教你如何利用过滤器来大写的作者姓名和按书名来排序的例子：
Bookshop - Your Online Bookshop
Your Online Bookshop
-
{{book.name}} written by {{book.author | uppercase}}
正如你所看到的，我们在 ng-repeat 指令中使用了按顺序排列的过滤器，在显示作者姓名时用一个大写过滤器。
为了添加一个搜索过滤器，添加搜索输入的文本框，然后使用一个过滤器以搜索限制结果，如下：
Bookshop - Your Online Bookshop
Your Online Bookshop
-
{{book.name}} written by {{book.author | uppercase}}
使用控制器
控制器是AngularJS的主要组件之一，它们是给视图提供动力和数据的代码。在我们的例子中，我们可以将测试数据初始化代码移到一个控制器，创建一个名为app.js的JavaScript文件，它将容纳我们应用程序所有特定的JavaScript代码。
function BookCtrl($scope){
$scope.books = [
{"name": "Effective Java", "author":"Joshua Bloch"},
{"name": "Year without Pants", "author":"Scott Berkun"},
{ "name":"Confessions of public speaker","author":"Scott Berkun"},
{"name":"JavaScript Good Parts","author":"Douglas Crockford"}
]
}
$scope 控制器和视图之间的粘合剂，而且会注入到BookCtrl。现在我们添加书籍数组的对象到 $scope 对象，这个对象对视图是可见的。
现在改变index.html使用BookCtrl，如下：
Bookshop - Your Online Bookshop
Your Online Bookshop
-
{{book.name}} written by {{book.author | uppercase}}
今天就这些内容，这也只是冰山一角。我将会用很多天来学习AngularJS的特性，它真的是一个神奇又强大的库。
原文 Day 2: AngularJS--Getting My Head Around AngularJS
翻译 SegmentFault
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/77963.html
摘要：在被收购之后，维护并继续发展。设置是告诉应用在目录寻找应用模板。设置告诉应用使用目录里面的类似图像文件等静态文件。我们会在应用开发过程中，保持着调试器在后台运行。这能提供高效的开发环境。我们会把回应状态设为已创建。 编者注：我们发现了有趣的系列文章《30天学习30种新技术》，正在翻译，一天一篇更新，年终礼包。下面是第23天的内容。 今天的《30天学习30种新技术》，我决定暂时放下...
摘要：今天的天学习种新技术挑战，我决定使用框架和开发一个单页面应用。应用我们将开发一个社交化书签应用，允许用户提交和分享链接。在元素中使用指令，意味着在整个中可用。我使用作为该应用的模块名。 编者注：我们发现了有趣的系列文章《30天学习30种新技术》，正在翻译，一天一篇更新，年终礼包。下面是第22天的内容。 今天的《30天学习30种新技术》挑战，我决定使用Spring框架、MongoD...
摘要：会警告该插件未签名。以上命令告诉创建一个名为的项目，使用包。的工具使从部署应用非常方便。域名构成了分配给应用的的一部分。这将为我们创建一个应用容器，自动配置和。同时将创建一个私有的仓库并克隆到本地。 编者注：我们发现了有趣的系列文章《30天学习30种新技术》，正在翻译，一天一篇更新，年终礼包。下面是第 17 天的内容。 今天的30天学习30种新技术挑战，我决定学习一下JBoss ...
摘要：模块和依赖注入细心的读者可能已经发现了，到目前为止所用到的例子都是使用的全局的构造函数来定义控制器的。这非常的简单，只需使用如下参数来调用即可控制器的名字字符串类型控制器的构造函数全局定义的控制器构造函数只适用于快速示例和原型开发。 上一篇：【译】《精通使用AngularJS开发Web App》（三） 下一篇： 书名：Mastering Web Application Develop...
摘要：最近在看，打算跟着书中的代码敲一遍，加深对的理解。在这里记录过程中的问题与心得。根据排查内存耗尽应该是这个版本的问题，换成后问题消失。因此认为这种写法是有风险的，必须用顶上那一行注释表明我确实要全局都的才行。不得不感叹的严谨。 最近在看 build your own angularjs ，打算跟着书中的代码敲一遍，加深对AngularJS的理解。在这里记录过程中的问题与心得。 Int...
阅读 1746·2021-11-24 09:39
阅读 1523·2021-11-16 11:54
阅读 3478·2021-11-11 16:55
阅读 1619·2021-10-14 09:43
阅读 1424·2019-08-30 15:55
阅读 1218·2019-08-30 15:54
阅读 3405·2019-08-30 15:53
阅读 1324·2019-08-30 14:18
