Day 2: AngularJS —— 對AngularJS的初步認識

時間 2019-11-10

標籤 day angularjs 初步認識欄目 AngularJS 简体版

原文原文鏈接

編者注：咱們發現了比較有趣的系列文章《30天學習30種新技術》，準備翻譯，一天一篇更新，年終禮包。如下是次日技術的譯文。

昨晚我完爆了一天一技術的任務（完成的很好），談的是關於Bower的一些知識，你能夠在這裏看一下文章，也能夠去 reddit 看看你們的討論。javascript

今天我打算學習一下AngularJS的基本知識，並但願能用它作一個簡單小應用。我也會在這篇文章裏用到Bower，我不可能在一天以內學習完AngularJS，因此我打算用好幾天時間來學習，天天涉及其中不一樣的點。css

什麼是AngularJS？

擴展HTML添加動態特性，所以咱們能夠輕鬆地構建現代web應用程序html
以你想要的方式使用java
帶你回到HTMLangularjs
聲明方法web
簡單bootstrap
經過雙向數據綁定消除DOM操做，任什麼時候候當模型改變時視圖都會獲得更新，反之亦然segmentfault
你能夠用它來構建單頁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