[譯] 次日：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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。