AngularJS快速開始(一)

說明

關于angularJS其他的一些介紹，請檢視其他的一些幫助，本文主要帶大家快速入門，基本步驟如下:

1.通過幾章快速開始，通過一些簡單例子，以及通過與jquery的比較，講解angularJS的幾個重要概念，如雙向資料綁定,Controller,$scope,filter,指令,service等。

2.了解這些基礎之後,通過一章講解如果部署angularJS官方示例angular-phonecat,該示例是大家入門的最好學習教程,可惜關鍵的一點是沒有nodejs相關開發經驗,完全不知道這項目該如何啟動學習

3.後續章節将陸續更新angularJS的一些進階特性,以及企業開發建構等

注意:如果你對AngularJS已經有了一些基本了解但是還跳不出jquery的思維模式,可以直接跳過本章,直接閱讀快速開始(二)，快速開始(三)

開始學習AngularJS的一個好方法是建立經典應用程式“Hello World!”：

使用您喜愛的文本編輯器，建立一個HTML檔案，例如：helloworld.html。

将下面的源代碼複制到您的HTML檔案。

在web浏覽器中打開這個HTML檔案。

Hello World-The Basics Binding

Two-way binding is a fundamental feature of AngularJS.

源代碼

<!doctype html>
    <html ng-app>
        <head>
        <!--這裡使用了百度靜态資源庫檔案,你也可以下載下傳angularjs檔案到本地引用 -->
            <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
        </head>
        <body>
            Hello {{'World'}}!
        </body>
    </html>

注:百度靜态資源庫:http://cdn.code.baidu.com/

請在您的浏覽器中運作以上代碼檢視效果。

現在讓我們仔細看看代碼，看看到底怎麼回事。當加載該頁時，标記ng-app告訴AngularJS處理整個HTML頁并引導應用：

這行載入AngularJS腳本：

最後，标簽中的正文是應用的模闆，在UI中顯示我們的問候語：

Hello {{'World'}}!

注意，使用雙大括号标記{{}}的内容是問候語中綁定的表達式，這個表達式是一個簡單的字元串‘World’。

下面，讓我們看一個更有趣的例子：使用AngularJS對我們的問候國文本綁定一個動态表達式。

Hello AngularJS World!

本示例示範AngularJS的雙向資料綁定（bi-directional data binding）：

編輯前面建立的helloworld.html文檔。
将下面的源代碼複制到您的HTML檔案。
重新整理浏覽器視窗。

源代碼

<!doctype html>
    <html ng-app>
        <head>
            <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
        </head>
        <body>
            Your name: <input type="text" ng-model="yourname" placeholder="World">
            <hr>
            Hello {{yourname || 'World'}}!
        </body>
    </html>

請在您的浏覽器中運作以上代碼檢視效果。

該示例有一下幾點重要的注意事項：

文本輸入指令 <input ng-model="yourname" /> 綁定到一個叫 yourname 的模型變量。
雙大括号标記将 yourname 模型變量添加到問候國文本。
你不需要為該應用另外注冊一個事件偵聽器或添加事件處理程式！

現在試着在輸入框中鍵入您的名稱，您鍵入的名稱将立即更新顯示在問候語中。這就是AngularJS雙向資料綁定的概念。輸入框的任何更改會立即反映到模型變量（一個方向），模型變量的任何更改都會立即反映到問候國文本中（另一方向）。

計算價格-Controllers

Controllers are the ‘glue’ of an AngularJS application. They connect your markup with your data and act as a sort of switchboard

再來看一個簡單的例子，幫助大家了解AngularJS Controllers的一些基本内容:

HTML

<!doctype html>
    <html ng-app>
    <head>
        <meta charset="UTF-8">
        <script src="libs/angular1.3.0.js"></script>
    </head>
    <body >
        <div ng-controller="InvoiceCntl"> <b>Invoice:</b>
            <br>
            <br>
            <table>
                <tr>
                    <td>Quantity</td>
                    <td>Cost</td>
                </tr>
                <tr>
                    <td>
                        <input type="integer" min="0" ng-model="qty" required ></td>
                    <td>
                        <input type="number" ng-model="cost" required ></td>
                </tr>
            </table>
            <hr> <b>Total:</b> {{qty * cost | currency:"￥" }}!
        </div>
    </body>
    <script src="script.js"></script>
    </html>

界面想實作的效果，就是兩個輸入框，在裡面輸入值，然後下面會根據輸入的值做出相應的變化

script.js

// var demoApp = angular.module('demoApp', []);
    // demoApp.controller("InvoiceCntl",['$scope',function($scope){
    //     $scope.qty = 1;
    //     $scope.cost = 19.95;
    // }]);

    function InvoiceCntl($scope) {
        $scope.qty = ;
        $scope.cost = ;
    }

在HTML的界面div上，聲明了控制器

ng-controller="InvoiceCntl"

，界面上輸入框中的屬性

ng-model="qty"

，

ng-model="cost"

實際上相當于聲明了兩個變量

qty

與

cost

。實作與控制器中變量的綁定。是以在JS中

$scope.qty = 1;$scope.cost = 19.95;

相當于就給變量賦了初始值。資料綁定是通過{{ }}把變量的值插入到頁面某部分和保持同步。

注意在js中注釋的部分。注意在angularJS1.3.0以後版本中，就不能再全局去申明函數了。必須把控制器函數放在某一子產品中。是以上面是将控制器放在子產品中的寫法，當然還存在子產品依賴的說法，這些以後再逐一解釋。

再來看一個例子

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>購物車</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-controller="CartController">
    <h1>您的購物車</h1>
    <div ng-repeat="item in items">
        <span>{{item.title}}</span>
        <input ng-model="item.quantity">
        <span>{{item.price | currency:'￥'}}</span>
        <span>{{item.price * item.quantity | currency:'￥'}}</span>
        <button ng-click="remove($index)">删除</button>
    </div>
</body>
<script>
    var myApp = angular.module('myApp', []);
    myApp.controller('CartController', ['$scope', function($scope){
        $scope.items = [{
            title: "可口可樂",
            quantity: ,
            price: 
        }, {
            title: "青島啤酒",
            quantity: ,
            price: 
        }, {
            title: "張飛牛肉",
            quantity: ,
            price: 
        }, ];
        $scope.remove = function(index) {
            $scope.items.splice(index, );
        }
    }]);

</script>
</html>

下面來一步一步的介紹html以及javascript中每句關鍵代碼的意思

其中ng-app這個屬性告訴Angular js所要管理的頁面區域。這裡我們将ng-app放在了HTML元素中，也就是告訴Angular JS我們希望它來管理整個頁面。這個屬性我們可以放在任意區域内，在html中寫入

ng-app="myApp"

相當于申明該頁面将由angularjs來托管，子產品的名字叫做

myApp

在Angular中，我們把用Javascript類來管理頁面的方式稱為controllers。通過在

<body>

控件中引入一個controller，我們定義CartController來管理

< body

>和

</ body>

之間的所有事務。

ng-repeats表明将items數組中的所有元素拷貝到這個

< div>

中。在

< div>

的每一份copy中，給每個元素設定一個名為item的屬性，這樣我們就可以在模闆中利用這個屬性了。就像上述代碼中運作結果中，在三個

控件中，分别包含了産品的名稱，單價，總價以及一個可以删除目前條目的按鈕。

就像最簡單的Hello，World動态顯示中一樣，我們通過

{{ }}

來實作資料綁定，同時允許我們在頁面中改變變量值時能夠同步的修改頁面的顯示值。

{{ item.title }}

表達式在循環中接收目前item的數值，并将這個item的title屬性值插入到DOM中。

通過ng-model的定義能夠将input控件和item.quantity值綁定到一起。在區域中的{{ }}設定了一種單方面的資料綁定，表明在這個區域内插入一個值。但是在應用中使用者需要能夠在quantity變化時得知總價的變化。通過ng-model來實作資料的同步改變。ng-model将item.quantity的值插入到文本區域，同時也在使用者在文本區域内輸入新的數值時自動同步更新item.quantity的值。

<span>{{item.price | currency:'￥'}}</span>

    <span>{{item.price * item.quantity | currency:'￥'}}</span>

在頁面下顯示中使用者其他單價和總價以的形式顯示。Angular中有一個filters的特性，可以将文本進行相應的轉換，同時也有一個名為currency的filter能夠将文本轉換成形式。對于filters的介紹将會在下一此重點介紹。

這個代碼允許使用者通過點選頁面中使用者商品選項條目旁的删除按鈕将使用者購物選項删除。我們給這個點選按鈕設定一個remove函數。同時也會将包含ng-repeat中疊代序列号的$item傳遞給該函數，這樣我們就能知道移除哪一個item了。

//首先建立子產品
    var myApp = angular.module('myApp', []);

    //這個CartController管理着購物卡的管理邏輯。通過在Angular中需要對controller傳遞$scope參數，這樣才可以在此處運作。$scope在UI層将資料和UI層元素綁定到一起。
    myApp.controller('CartController', ['$scope', function($scope){
        $scope.items = [{
            title: "可口可樂",
            quantity: ,
            price: 
        }, {
            title: "青島啤酒",
            quantity: ,
            price: 
        }, {
            title: "張飛牛肉",
            quantity: ,
            price: 
        }, ];
        $scope.remove = function(index) {
            $scope.items.splice(index, );
        }
    }]);

通過定義 scope.items，建立一個虛拟的資料散列集來表示使用者購物車中的物品。可以通過在每個item之前加上 scope來将資料綁定到UI中。當然，在正真的實用中這個不可能在記憶體中工作，它需要與伺服器通信來儲存資料。

$scope.remove = function(index)
    {
        $scope.items.splice(index,);
    }

我們希望将remove函數綁定到UI中，是以需要再函數前添加$scope。在目前前台記憶體處理版本中，remove函數能夠将數組中的items删除。因為

< div>

序列是通過ng-repeat将資料進行綁定的，是以當items删除後，

< div>

清單也将同步進行收縮。注意這個remove函數在使用者點選去除按鈕時将會在UI層引發。

注意下面這種寫法，其實你也可以寫成這個樣子，這隻是一個備注，如果你已經大概了解了，可以直接忽略下面的東西:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>購物車</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-controller="CartController as filter">
    <h1>您的購物車</h1>
    <div ng-repeat="item in filter.items">
        <span>{{item.title}}</span>
        <input ng-model="item.quantity">
        <span>{{item.price | currency:'￥'}}</span>
        <span>{{item.price * item.quantity | currency:'￥'}}</span>
        <button ng-click="filter.remove($index)">删除</button>
    </div>
</body>
<script>
    var myApp = angular.module('myApp', []);

    myApp.controller('CartController', function(){
        var filter = this;
        filter.items = [{
            title: "可口可樂",
            quantity: ,
            price: 
        }, {
            title: "青島啤酒",
            quantity: ,
            price: 
        }, {
            title: "張飛牛肉",
            quantity: ,
            price: 
        }, ];
        filter.remove = function(index) {
            filter.items.splice(index, );
        }
    });
</script>
</html>

下一章主要通過與jquery示例的比較來展示angularJS

AngularJS快速開始(一)--基本介紹AngularJS快速開始(一)

AngularJS快速開始(一)

說明

Hello World-The Basics Binding

計算價格-Controllers

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條