Day 2: AngularJS —— 对AngularJS的初步认识

时间  2019-11-10
标签 day angularjs 初步 认识 栏目 AngularJS 繁體版
原文   原文链接

编者注：咱们发现了比较有趣的系列文章《30天学习30种新技术》，准备翻译，一天一篇更新，年终礼包。如下是次日技术的译文。

昨晚我完爆了一天一技术的任务（完成的很好），谈的是关于Bower的一些知识，你能够在这里看一下文章，也能够去 reddit 看看你们的讨论。javascript

今天我打算学习一下AngularJS的基本知识，并但愿能用它作一个简单小应用。我也会在这篇文章里用到Bower，我不可能在一天以内学习完AngularJS，因此我打算用好几天时间来学习，天天涉及其中不一样的点。css

img-1

什么是AngularJS？

  1. 扩展HTML添加动态特性，所以咱们能够轻松地构建现代web应用程序html

  2. 以你想要的方式使用java

  3. 带你回到HTMLangularjs

  4. 声明方法web

  5. 简单bootstrap

  6. 经过双向数据绑定消除DOM操做，任什么时候候当模型改变时视图都会获得更新，反之亦然segmentfault

  7. 你能够用它来构建单页Web应用程序。当你构建如路由，Ajax调用，数据绑定，缓存，历史记录和DOM操做这类的SPA应用时，会有不少的挑战。数组

AngularJS的主要组件是：

  1. 控制器：视图背后的代码浏览器

  2. 做用域：包含模型数据，粘合控制器和视图

  3. 模块：定义新的服务，或使用现有的服务、指令、过滤器等，模块能够依赖于另外一个模块

  4. 指令：容许你经过定义本身项目特定的HTML指令来扩展HTML，学习HTML的新花样

img-2

为何我会在乎AngularJS？

对我而言有两个主要缘由：

  1. 它是由谷歌支持，有不少开发者的大社区

  2. 全栈框架：这意味着我不须要依靠其余数百万计的脚本，它们会很好地整合在一块儿

前提准备

咱们将使用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>

上边这段代码有一些须要注意的点：

  1. 在HTML标签里边，咱们已经定义了ng-app。这将初始化AngularJS应用程序，并告诉AngularJS要在这一部分活跃。因此，它在应用程序里是活跃整个html文件的。

  2. 咱们所使用的第二个Angular指令是ng-init。这将初始化书籍数组中的一个，咱们能够将它应用在咱们的应用程序中。

  3. 最后一个有趣的部分，是用于遍历集合中的全部元素的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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程