AngularJS基礎入門初探

阿新 • • 發佈：2019-01-16

一、AngularJS簡介

1.1 什麼是AngularJS

　　（1）一款非常優秀的前端JS框架，可以方便實現MVC/MVVM模式

　　（2）由Misko Hevery 等人建立，2009年被Google所收購，用於其多款產品

　　（3）Google目前有一個全職的開發團隊繼續開發和維護這個庫

　　（4）有了這一類框架就可以輕鬆構建SPA單頁應用程式

　　（5）通過指令擴充套件了HTML，通過表示式繫結資料到HTML，輕鬆實現雙向繫結

單頁Web應用（single page web application，SPA），就是隻有一張Web頁面的應用，是載入單個HTML 頁面並在使用者與應用程式互動時動態更新該頁面的Web應用程式。

首先，最大的好處是使用者體驗，對於內容的改動不需要載入整個頁面。這樣做好處頗多，因為資料層和UI的分離，可以重新編寫一個原生的移動裝置應用程式而不用（對原有資料服務部分）大動干戈。

單頁面Web應用層程式最根本的優點是高效。它對伺服器壓力很小，消耗更少的頻寬，能夠與面向服務的架構更好地結合。

1.2 AngularJS有哪些特性

　　（1）MVC，MVVM

　　（2）模組化

　　（3）自動化雙向資料繫結

　　（4）指令系統（非侵入式API）

二、第一個AngularJS程式

2.1 下載AngularJS

　　方式一：NPM（npm install angular）

　　方式三：使用CDN上的angular.js（http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js）

　　這裡我們使用方式三，CDN方式。

2.2 體驗雙向資料繫結

　　新建一個HTML頁，輸入一下內容：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Hello Angular</title 
>
    <meta charset="utf-8" />
    <style type="text/css">
        #main {
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="main" ng-app ng-init="name='World'">
        <p>Your name:<input type="text" ng-model="name" /></p>
        <p>Hello {{name}}!</p>
    </div>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</body>
</html>

　　（1）ng-app指令標記當前元素將被Angular進行管理。

　　（2）文字輸入指令<input type="text" ng-model="name" />繫結到一個叫name的模型變數。

　　（3）雙大括號標記將name模型變數新增到問候語文字。

　　執行該HTML頁，可以發現，當我們在textbox中輸入什麼，問候語中都會及時進行繫結：

三、理解AngularJS中的指令

3.1 以前我們是這樣寫的

　　假如我們有一個頁面需要計算使用者填寫的數字*2的結果是多少，我們可能會有一個HTML介面和JavaScript程式碼如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Use JavaScript</title>
    <meta charset="utf-8" />
    <style type="text/css">
        #main
        {
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="main">
        <input type="text" id="value" />
        <input type="button" value="*2" id="btn" />
    </div>
    <script type="text/javascript">
        (function(window) {
            // 利用querySelector找到介面上的按鈕dom元素並增加事件監視器
            window.document.querySelector('#btn').addEventListener('click', function() {
                // 獲取DOM元素
                var input = window.document.querySelector('#value');
                // 獲取填寫數值
                var value = input.value;
                // 執行業務操作
                value = value - 0;
                value = value * 2;
                // 設定顯示結果
                input.value = value;
            });
        })(window);
    </script>
</body>
</html>

　　執行結果如下圖所示：

3.2 現在我們可以這樣寫

<!DOCTYPE html>
<!-- ng-app與ng-controller不能位於同一級目錄 -->
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Use AngularJS</title>
    <meta charset="utf-8" />
    <style type="text/css">
        #main {
            text-align: center;
        }
    </style>
</head>
<body ng-controller="DemoController">
    <div id="main">
        <input type="text" id="value" ng-model="value" />
        <input type="button" value="*2" id="btn" ng-click="doCalc()" />
    </div>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script type="text/javascript">
        (function (window) {
            // 1.模組
            var myApp = window.angular.module('myApp', []);
            // 2.控制器
            myApp.controller('DemoController', function ($scope) {
                $scope.value = 10;
                $scope.doCalc = function () {
                    $scope.value = $scope.value * 2;
                };
            });
        })(window);
    </script>
</body>
</html>

　　（1）在AngularJS中，ng-app、ng-controller等都是指令，通過指令擴充套件HTML，通過表示式繫結資料到HTML。

　　（2）網頁載入完成後，angular.js這個指令碼就會自動執行，執行過程主要是去介面上找到ng-app指令。

　　（3）ng-app指令的作用在於聲明當前DOM被AngularJS這個庫中定義的一個模組所託管，而ng-model指令則用於繫結模型變數，ng-click繫結控制器中宣告的事件。可以看出，controller中的邏輯是一個典型的閉包實現。

　　（4）window.angular.module('myApp', []) 表示通過angular註冊一個module模組，這個模組名是myApp，第二個引數傳入這個模組所依賴的其他模組，沒有需要其他模組的話就為空。

　　（5）myApp.controller('DemoController', function ($scope) {}) 表示為myApp建立一個controller控制器，這個控制器名是DemoController，第二個引數傳入這個控制器的控制邏輯。

　　執行結果如下圖所示，和之前的效果一樣：

三、開發一個任務清單程式

3.1 需求說明

　　假設我們要做一個任務清單程式，它可以記錄我們要做的所有任務資訊，並且我們可以隨時標記任務為已完成，而且隨時增加新的任務到任務列表中。在AngularJS的各種示例程式中，TodoMVC算是一個比較出名的專案，如下圖所示：

　　這裡我們的目標就是仿照TodoMVC，藉助AngularJS實現一個簡易版的TodoList頁面。

3.2 開發實現

　　（1）藉助Bootstrap實現介面，引入AngularJS繫結模型變數

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>任務列表 - By AngularJS</title>
    <meta charset="utf-8" />
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <style type="text/css">
        body.container {
            max-width: 600px;
        }

        .checkbox {
            margin-bottom: 0px;
            margin-right: 20px;
        }

        .done {
            color: #ccc;
        }

            .done > .checkbox > label > span {
                text-decoration: line-through;
            }
    </style>
</head>
<body class="container" ng-app="TodoApp">
    <header>
        <h1 class="display-1">我的任務列表</h1>
        <hr />
    </header>
    <section ng-controller="MainController">
        <form class="input-group input-group-lg">
            <input type="text" class="form-control" ng-model="textValue" />
            <span class="input-group-btn">
                <button class="btn btn-secondary" ng-click="addTask()">新增</button>
            </span>
        </form>
        <ul class="list-group m-y-2">
            <li class="list-group-item" ng-repeat="item in todoList" ng-class="{'done':item.done}">
                <button type="button" class="close" aria-label="Close" ng-click="deleteTask(item)">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-model="item.done" />
                        <span>{{item.textValue}}</span>
                    </label>
                </div>
            </li>
        </ul>
        <p>總共<strong>{{todoList.length}}</strong>個任務，已完成<strong>{{updateDone()}}</strong>個</p>
    </section>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script type="text/javascript" src="assets/js/app.js"></script>
</body>
</html>

　　（2）完善app.js，在其中寫入angular關鍵程式碼

(function (window) {
    // 01.註冊一個應用程式的主模組(module方法如果之傳入一個引數就不是建立一個新模組)
    window.angular.module("TodoApp", []);
    //02.為主模組註冊控制器(直接取得一個已存在的模組,不會存在全域性汙染)
    window.angular.module("TodoApp").controller("MainController", ["$scope", function ($scope) {
        // part01.定義屬性
        $scope.textValue = "";  // 文字框中的值
        $scope.todoList = [
            { textValue: "學習AngularJS基礎", done: false },
            { textValue: "學習BootStrap基礎", done: false },
            { textValue: "學習ASP.Net MVC基礎", done: false },
            { textValue: "學習ASP.Net WebApi基礎", done: false }
        ]; // 任務列表，這裡是寫死的，實際中是通過AJAX拿到的
        // part02.定義行為
        // 增加任務行為
        $scope.addTask = function () {
            var textValue = $scope.textValue.trim();
            if (textValue) {
                // 加入任務列表
                $scope.todoList.push({
                    textValue: textValue,
                    done: false
                });
                // 清空文字框值
                $scope.textValue = "";
            }
        }
        // 刪除任務行為
        $scope.deleteTask = function (task) {
            var index = $scope.todoList.indexOf(task);
            $scope.todoList.splice(index, 1); // 等價於remove方法
        }
        // 更新已完成任務數行為
        $scope.updateDone = function () {
            var temp = $scope.todoList.filter(function (item) {
                // 返回true表示當前item滿足條件
                return item.done;
            });
            return temp.length;
        }
    }]);
})(window);

　　可以看出，在控制器中屬性和行為分開定義，職責分明。

　　（3）執行TodoList頁面，結果如下圖所示：

附件下載

作者：周旭龍

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連結。

AngularJS基礎入門初探

一、AngularJS簡介

1.1 什麼是AngularJS

1.2 AngularJS有哪些特性

二、第一個AngularJS程式

2.1 下載AngularJS

2.2 體驗雙向資料繫結

三、理解AngularJS中的指令

3.1 以前我們是這樣寫的

3.2 現在我們可以這樣寫

三、開發一個任務清單程式

3.1 需求說明

3.2 開發實現

附件下載

AngularJS基礎入門初探

Thrift入門初探(2)--thrift基礎知識詳解

python簡介及基礎入門 day1

【原創 Hadoop&Spark 動手實踐 5】Spark 基礎入門，集群搭建以及Spark Shell

python 基礎入門

Linux基礎入門--IO重定向及管道

linux 基礎入門學習

EasyUI基礎入門之Pagination(分頁)

Linux基礎入門--find（文件查找）

Hive 基礎入門

es6+react.js組件入門初探

mysql零基礎入門視頻教程免費分享！

轉載8天學通MongoDB——第一天基礎入門

mysql零基礎入門視頻教程免費分享！很簡單

Python基礎入門教程，Python學習路線圖

python-基礎入門-3（對文件操作）

java基礎入門-建立能夠多client鏈接的ServerSocket

springmvc學習筆記（一） -- 從零搭建，基礎入門

angularjs 基礎

centos6 - elk基礎入門搭建

AngularJS基礎入門初探

一、AngularJS簡介

1.1 什麼是AngularJS

1.2 AngularJS有哪些特性

二、第一個AngularJS程式

2.1 下載AngularJS

2.2 體驗雙向資料繫結

三、理解AngularJS中的指令

3.1 以前我們是這樣寫的

3.2 現在我們可以這樣寫

三、開發一個任務清單程式

3.1 需求說明

3.2 開發實現

附件下載

相關推薦