[译] 第二天：AngularJS - 认识AngularJS
前言
昨天我开始了挑战的第一天，30天系列的第一篇博客，我主要学习了Bower - 客户端的包依赖管理。你可以从这里了解，也可以看这的讨论。
今天我要学习AngularJS 的基础，希望可以完成一个简单的程序。我会用这篇博客直播我怎样学习AngularJS.同时也会在这里使用bower.我知道不可能只用一天就学完Angular JS,所以会多花几天，覆盖不同的主题。
什么是AngularJS?
- 扩展HTML添加动态特性，轻松创建新式Web程序
- 按你想用的方式使用
- 将你带回HTML
- 声明方法
- 简单
- 通过双向数据绑定消除DOM操作，视图会随模型的更新而更新，反之亦然
- 创建单页Web程序。当你创建SPA程序如路由，Ajax调用，数据绑定，缓存，历史纪录，DOM操作时，会有很多挑战。
AngularJS的主要组件
- 控制器：视图背后的代码
- 范围：包括模型数据，合并控制器和视图
- 模块：定义新的或在用的服务，指令，过滤器等等，模块可以依赖另一个模块。
- 指令：允许你通过定义自己项目的特定HTML指令去扩展HTML.赋予HTML新技巧。
俯瞰AngularJS
为什么关注？
对我来说学习AngularJS有两个主要原因：
- 由Google支持，吸引了大批开发者
- 全栈式框架：意味着你不需要依赖数百万的脚本，同时还不确定它们有没有整合好
前提准备
我们会用Bower为示例程序安装AngularJS。如果你还没有安装bower请参照我的前一篇博客。
安装AngularJS
在你的机器上找一个你认为合适的地方创建一个名为bookshop的路径，然后按照下列方式安装AngularJS 和 twitter bootstrap:
$ bower install angular
$ bower install bootstrap
这将会在你的bookshop路径下新建一个bower_components的文件夹，这里包含所有安装的组件。
开始使用AngularJS
现在我们已经安装好AngularJS 了，来创建一个名为index.html的HTML文件，这是一个基于在线书店的应用程序。
<!doctype html> <html> <head> <title>Bookshop - Your Online Bookshop</title> <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2>Your Online Bookshop</h2> </div> <script type="text/javascript" src="bower_components/angular/angular.min.js"></script> </body> </html>
如果你在浏览器中打开它，会呈现"Your Online Bookshop"。再来瞧瞧更有趣的：
<!doctype html> <html ng-app> <head> <title>Bookshop - Your Online Bookshop</title> <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> </head> <body> <div class="container" ng-init="books=['Effective Java','Year without Pants','Confessions of public speaker','JavaScript Good Parts']"> <h2>Your Online Bookshop</h2> <ul class="unstyled"> <li ng-repeat="book in books"> {{book}} </li> </ul> </div> <script type="text/javascript" src="bower_components/angular/angular.min.js"></script> </body> </html>
这里有几点需要注意：
- 在我们的HTML标签中定义了ng-app. 它将初始化AngularJS 程序并激活这一段。在我们这个示例里它将作用于整个HTML。
- 我们用的第二个AngularJS指令是 ng-init. 它把我们将要用的books这个数组初始化了。
- 最后一个有趣的是 ng-repeat, 用来遍历集合用所有元素。Agnular可以为每个元素添加 li元素, 所以我们在浏览器中打开能看到列表中有4本书。
以上是用字符串数组形式使用使用数据，当然你也可以存储对象：
<!doctype html> <html ng-app> <head> <title>Bookshop - Your Online Bookshop</title> <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> </head> <body> <div class="container" ng-init="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'}]"> <h2>Your Online Bookshop</h2> <ul class="unstyled"> <li ng-repeat="book in books"> <span>{{book.name}} written by {{book.author}}</span> </li> </ul> </div> <script type="text/javascript" src="bower_components/angular/angular.min.js"></script> </body> </html>
这里我们创建了一个books 对象，对象包含name 和 author，最终，列表包括作者名字和书名。
使用过滤器
Angular 提供了帮助格式化数据的过滤器。你可以使用过滤器来格式化日期，货币，大小写字符，排序，基于过滤的搜索。以下是用过滤器将作者名和书名都转为大写字符的示例：
<!doctype html> <html ng-app> <head> <title>Bookshop - Your Online Bookshop</title> <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> </head> <body> <div class="container" ng-init="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'}]"> <h2>Your Online Bookshop</h2> <ul class="unstyled"> <li ng-repeat="book in books | orderBy :'name'"> <span>{{book.name}} written by {{book.author | uppercase}}</span> </li> </ul> </div> <script type="text/javascript" src="bower_components/angular/angular.min.js"></script> </body> </html>
可以看到在 ng-repeat 里我们用了 orderBy 来按照书名排序，然后在显示作者时用uppercase转为大写。
为添加搜索过滤器，添加输入框再用过滤器来限制搜索结果：
<!doctype html> <html ng-app> <head> <title>Bookshop - Your Online Bookshop</title> <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> </head> <body> <div class="container" ng-init="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'}]"> <h2>Your Online Bookshop</h2> <input type="search" ng-model="criteria"> <ul class="unstyled"> <li ng-repeat="book in books | filter:criteria | orderBy :'name'"> <span>{{book.name}} written by {{book.author | uppercase}}</span> </li> </ul> </div> <script type="text/javascript" src="bower_components/angular/angular.min.js"></script> </body> </html>
使用控制器
控制器是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对象中添加books数组，这个对象对视图可见。
同时在index.html里改为使用 BookCtrl:
<!DOCTYPE html> <html ng-app> <head> <title>Bookshop - Your Online Bookshop</title> <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> </head> <body> <div class="container" ng-controller="BookCtrl"> <h2>Your Online Bookshop</h2> <input type="search" ng-model="criteria"> <ul class="unstyled"> <li ng-repeat="book in books | filter:criteria | orderBy :'name'"> <span>{{book.name}} written by {{book.author | uppercase}}</span> </li> </ul> </div> <script type="text/javascript" src="bower_components/angular/angular.min.js"></script> <script type="text/javascript" src="app.js"></script> </body> </html>
这就是今天的内容。我只接触了冰山一角，会再花几天来学习。AngularJS库真是既神奇又强大。
原文：https://www.openshift.com/blogs/day-2-angularjs-getting-my-head-around-angularjs
