[译] 次日：AngularJS - 认识AngularJS

时间 2019-12-19

标签次日 angularjs 认识栏目 AngularJS 繁體版

原文原文链接

前言

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

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

什么是AngularJS?

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

AngularJS的主要组件

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

俯瞰AngularJS

为何关注？

对我来讲学习AngularJS有两个主要缘由：html

由Google支持，吸引了大批开发者
全栈式框架：意味着你不须要依赖数百万的脚本，同时还不肯定它们有没有整合好

前提准备

咱们会用Bower为示例程序安装AngularJS。若是你尚未安装bower请参照个人前一篇博客。java

安装AngularJS

在你的机器上找一个你认为合适的地方建立一个名为bookshop的路径，而后按照下列方式安装AngularJS 和 twitter bootstrap:angularjs

$ bower install angular
$ bower install bootstrap

这将会在你的bookshop路径下新建一个bower_components的文件夹，这里包含全部安装的组件。bootstrap

开始使用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本书。

以上是用字符串数组形式使用使用数据，固然你也能够存储对象：app

    <!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