编者注：我们发现了比较风趣的系列文章《30天进修30种新手艺》，预备翻译，一天一篇更新，年末礼包。以下是第二天手艺的译文。
昨晚我完爆了一天一手艺的使命（完成的很好），谈的是关于Bower的一些学问，你能够在这里看一下文章，也能够去 reddit 看看人人的议论。
本日我盘算进修一下AngularJS的基本学问，并希望能用它做一个简朴小运用。我也会在这篇文章里用到Bower，我不可能在一天以内进修完AngularJS，所以我盘算用好几天时候来进修，天天触及个中差别的点。
什么是AngularJS？
扩大HTML增添动态特征，因而我们能够轻松地构建当代web运用程序
以你想要的体式格局运用
带你回到HTML
声明要领
简朴
经由过程双向数据绑定消弭DOM操纵，任何时候当模子转变时视图都邑获得更新，反之亦然
你能够用它来构建单页Web运用程序。当你构建如路由，Ajax挪用，数据绑定，缓存，历史记录和DOM操纵这类的SPA运用时，会有许多的应战。
AngularJS的重要组件是：
控制器：视图背地的代码
作用域：包括模子数据，粘合控制器和视图
模块：定义新的效劳，或运用现有的效劳、指令、过滤器等，模块能够依赖于另一个模块
指令：许可你经由过程定义本身项目特定的HTML指令来扩大HTML，进修HTML的新花样
为何我会在乎AngularJS？
对我而言有两个重要原因：
它是由谷歌支撑，有许多开发者的大社区
全栈框架：这意味着我不须要依托其他数百万计的剧本，它们会很好地整合在一起
条件预备
我们将运用Bower为示例运用程序装置AngularJS，假如你还没有装置bower，那末请看我前一篇博文。
装置AngularJS
在体系的任何轻易的位置建立一个叫 bookshop 的目次，用下面敕令来装置AngularJS和Twitter bootstrap：
$ bower install angular
$ bower install bootstrap
上面的敕令会在bookshop目次下建立一个叫bower_components的文件夹，里边有已装置的悉数组件。
开始运用AngularJS
如今建立一个名为 index.html 的html文件，它将会是一个基于AngularJS的网上书店运用。
<!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>
假如你在浏览器翻开这个文件，你会看到“你的网上书店”正在显现，但这并非AngularJS的凶猛的处所，所以接下来我们看看它真正风趣的处所：
<!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运用程序，并通知AngularJS要在这一部份活泼。所以，它在运用程序里是活泼全部html文件的。我们所运用的第二个Angular指令是
ng-init。这将初始化书本数组中的一个，我们能够将它运用在我们的运用程序中。末了一个风趣的部份，是用于遍历鸠合中的一切元素的
ng-repeat指令。Angular将为每一个元素增添li元素。所以，假如我们在Web浏览器中翻开它，将会看到在一个列表中有四本书。
上边是以字符串数组的情势运用数据，但也能够用存储对象的体式格局，以下：
<!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>
在上面的代码中，我们建立了一个书本数组对象，个中每本书对象都有名字和作者。末了，我们在列表中同时列出作者姓名和书本称号。
运用过滤器
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 指令中运用了按递次分列的过滤器，在显现作者姓名时用一个大写过滤器。
为了增添一个搜刮过滤器，增添搜刮输入的文本框，然后运用一个过滤器以搜刮限定效果，以下：
<!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 对象，这个对象对视图是可见的。
如今转变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的特征，它真的是一个奇异又壮大的库。
原文 Day 2: AngularJS–Getting My Head Around AngularJS
翻译 SegmentFault
