昨天我开始了挑战的第一天，30天系列的第一篇博客，我主要学习了Bower - 客户端的包依赖管理。你可以从这里了解，也可以看这的讨论。

今天我要学习AngularJS 的基础，希望可以完成一个简单的程序。我会用这篇博客直播我怎样学习AngularJS.同时也会在这里使用bower.我知道不可能只用一天就学完Angular JS,所以会多花几天，覆盖不同的主题。

[译] 第二天：AngularJS
前言
什么是AngularJS?
为什么关注？
前提准备
安装AngularJS
开始使用AngularJS
使用过滤器
使用控制器

什么是AngularJS?

扩展HTML添加动态特性，轻松创建新式Web程序
按你想用的方式使用
将你带回HTML
声明方法
简单
通过双向数据绑定消除DOM操作，视图会随模型的更新而更新，反之亦然
创建单页Web程序。当你创建SPA程序如路由，Ajax调用，数据绑定，缓存，历史纪录，DOM操作时，会有很多挑战。

AngularJS的主要组件

控制器：视图背后的代码
范围：包括模型数据，合并控制器和视图
模块：定义新的或在用的服务，指令，过滤器等等，模块可以依赖另一个模块。
指令：允许你通过定义自己项目的特定HTML指令去扩展HTML.赋予HTML新技巧。

俯瞰AngularJS

[译] 第二天：AngularJS
前言
什么是AngularJS?
为什么关注？
前提准备
安装AngularJS
开始使用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

[译] 第二天：AngularJS 前言 什么是AngularJS? 为什么关注？ 前提准备 安装AngularJS 开始使用AngularJS 使用过滤器 使用控制器