Angular基礎(chǔ)學(xué)習(xí)-01

本節(jié)包括：AngularJS表達(dá)式、AngularJS指令、AngularJS模型、AngularJS的Scope（作用域）、AngularJS控制器、AngularJS過濾器

AngularJS 表達(dá)式

AngularJS 使用 表達(dá)式 把數(shù)據(jù)綁定到 HTML。

  • AngularJS 表達(dá)式寫在雙大括號(hào)內(nèi)：{{ expression }}。
  • AngularJS 表達(dá)式把數(shù)據(jù)綁定到 HTML，這與 ng-bind 指令有異曲同工之妙。
  • AngularJS 將在表達(dá)式書寫的位置"輸出"數(shù)據(jù)。
  • AngularJS 表達(dá)式 很像 JavaScript 表達(dá)式：它們可以包含文字、運(yùn)算符和變量。

    實(shí)例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

AngularJS 表達(dá)式 與 JavaScript 表達(dá)式對(duì)比

  • 類似于 JavaScript 表達(dá)式，AngularJS 表達(dá)式可以包含字母，操作符，變量。
  • 與 JavaScript 表達(dá)式不同，AngularJS 表達(dá)式可以寫在 HTML 中。
  • 與 JavaScript 表達(dá)式不同，AngularJS 表達(dá)式不支持條件判斷，循環(huán)及異常。
  • 與 JavaScript 表達(dá)式不同，AngularJS 表達(dá)式支持過濾器。

AngularJS 指令

  • AngularJS 指令是擴(kuò)展的 HTML 屬性，帶有前綴 ng-。
  • ng-app 指令初始化一個(gè) AngularJS 應(yīng)用程序。
  • ng-init 指令初始化應(yīng)用程序數(shù)據(jù)。
  • ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序。

ng-model 指令可以將輸入域的值與 AngularJS 創(chuàng)建的變量綁定。

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>

雙向綁定，在修改輸入域的值時(shí)， AngularJS 屬性的值也將修改：

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
    <h1>你輸入了: {{name}}</h1>
</div>

驗(yàn)證用戶輸入

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一個(gè)合法的郵箱地址</span>
</form>
  • ng-repeat 指令會(huì)重復(fù)一個(gè) HTML 元素：
    <div data-ng-app="" data-ng-init="names=['Jani','Hege','Kai']">
      <p>使用 ng-repeat 來循環(huán)數(shù)組</p>
      <ul>
        <li data-ng-repeat="x in names">
          {{ x }}
        </li>
      </ul>
    </div>
  • 創(chuàng)建自定義的指令
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
    </head>
    <body ng-app="myApp">
    
    <runoob-directive></runoob-directive>//通過元素名調(diào)用
    <div runoob-directive></div> //通過屬性調(diào)用
    <div class="runoob-directive"></div>  //通過類名調(diào)用
    <!-- directive: runoob-directive -->  //通過注釋調(diào)用
    
    <script>
        var app = angular.module("myApp", []);
        app.directive("runoobDirective", function() {
            return {
                template : "<h1>自定義指令!</h1>"
            };
        });
    </script>
    
    </body>
</html>

限制使用

通過添加 restrict 屬性,并設(shè)置只值為 "A", 來設(shè)置指令只能通過屬性的方式來調(diào)用:

var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定義指令!</h1>"
    };
});

restrict 值可以是以下幾種:

  • E 作為元素名使用
  • A 作為屬性使用
  • C 作為類名使用
  • M 作為注釋使用

restrict 默認(rèn)值為 EA, 即可以通過元素名和屬性名來調(diào)用指令。

完整的指令內(nèi)容可以參閱

AngularJS Scope(作用域)

  • Scope(作用域) 是應(yīng)用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。
  • Scope 是一個(gè)對(duì)象，有可用的方法和屬性。
  • Scope 可應(yīng)用在視圖和控制器上。

如何使用 Scope

當(dāng)你在 AngularJS 創(chuàng)建控制器時(shí)，你可以將 $scope 對(duì)象當(dāng)作一個(gè)參數(shù)傳遞:

控制器中的屬性對(duì)應(yīng)了視圖上的屬性：

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{carname}}</h1>

</div>

<script>
    var app = angular.module('myApp', []);
    
    app.controller('myCtrl', function($scope) {
        $scope.carname = "Volvo";
    });
</script>

控制器中創(chuàng)建一個(gè)屬性名 "carname"，對(duì)應(yīng)了視圖中使用 {{ }} 中的名稱。

當(dāng)在控制器中添加 $scope 對(duì)象時(shí)，視圖 (HTML) 可以獲取了這些屬性。

視圖中，你不需要添加 $scope 前綴, 只需要添加屬性名即可，如： {{carname}}。

Scope 概述

AngularJS 應(yīng)用組成如下：

  • View(視圖), 即 HTML。
  • Model(模型), 當(dāng)前視圖中可用的數(shù)據(jù)。
  • Controller(控制器), 即 JavaScript 函數(shù)，可以添加或修改屬性。

根作用域

所有的應(yīng)用都有一個(gè) $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用于整個(gè)應(yīng)用中。是各個(gè) controller 中 scope 的橋梁。用 rootscope 定義的值，可以在各個(gè) controller 中使用。

注意 $rootScope 在循環(huán)對(duì)象內(nèi)外都可以訪問。

AngularJS 控制器

AngularJS 控制器 控制 AngularJS 應(yīng)用程序的數(shù)據(jù)。

AngularJS 控制器是常規(guī)的 JavaScript 對(duì)象。

ng-controller 指令定義了應(yīng)用程序控制器

<div ng-app="myApp" ng-controller="myCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
    });
</script>

讓我們來分析一下上面的代碼：

  • AngularJS 應(yīng)用程序由 ng-app 定義。應(yīng)用程序在 <code><div></code> 內(nèi)運(yùn)行。
  • ng-controller="myCtrl" 屬性是一個(gè) AngularJS 指令。用于定義一個(gè)控制器。
  • myCtrl 函數(shù)是一個(gè) JavaScript 函數(shù)。
  • AngularJS 使用$scope 對(duì)象來調(diào)用控制器。
  • 在 AngularJS 中， $scope 是一個(gè)應(yīng)用對(duì)象(屬于應(yīng)用變量和函數(shù))。
  • 控制器的 $scope （相當(dāng)于作用域、控制范圍）用來保存AngularJS Model(模型)的對(duì)象。
  • 控制器在作用域中創(chuàng)建了兩個(gè)屬性 (firstName 和 lastName)。
  • ng-model 指令綁定輸入域到控制器的屬性（firstName 和 lastName）。

控制器方法

上面的實(shí)例演示了一個(gè)帶有 lastName 和 firstName 這兩個(gè)屬性的控制器對(duì)象。

控制器也可以有方法（變量和函數(shù)）：

<div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

外部文件中的控制器

在大型的應(yīng)用程序中，通常是把控制器存儲(chǔ)在外部文件中。

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script src="personController.js"></script>

personController.js 的外部文件：

angular.module('myApp', []).controller('personCtrl', function($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe",
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});

其他實(shí)例

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

<script src="namesController.js"></script>

以下實(shí)例創(chuàng)建一個(gè)新的控制器文件 namesController.js:

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});

AngularJS 過濾器

過濾器可以使用一個(gè)管道字符（|）添加到表達(dá)式和指令中。

AngularJS 過濾器可用于轉(zhuǎn)換數(shù)據(jù)：

Paste_Image.png

表達(dá)式中添加過濾器

過濾器可以通過一個(gè)管道字符（|）和一個(gè)過濾器添加到表達(dá)式中。

uppercase 過濾器將字符串格式化為大寫：

<div ng-app="myApp" ng-controller="personCtrl">

    <p>姓名為 {{ lastName | uppercase }}</p>

</div>

orderBy 過濾器根據(jù)表達(dá)式排列數(shù)組：

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

過濾輸入：輸入過濾器可以通過一個(gè)管道字符（|）和一個(gè)過濾器添加到指令中，該過濾器后跟一個(gè)冒號(hào)和一個(gè)模型名稱。

filter 過濾器從數(shù)組中選擇一個(gè)子集：

<div ng-app="myApp" ng-controller="namesCtrl">

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • AngularJS是什么？AngularJs（后面就簡(jiǎn)稱ng了）是一個(gè)用于設(shè)計(jì)動(dòng)態(tài)web應(yīng)用的結(jié)構(gòu)框架。首先，它是...
    200813閱讀 1,653評(píng)論 0贊 3
  • ng-model 指令ng-model 指令 綁定 HTML 元素 到應(yīng)用程序數(shù)據(jù)。ng-model 指令也可以：...
    壬萬er閱讀 896評(píng)論 0贊 2
  • AngularJS是什么 AngularJS的官方文檔這樣介紹它： 完全使用JavaScript編寫的客戶端技術(shù)。...
    oWSQo閱讀 1,350評(píng)論 0贊 10
  • 簡(jiǎn)介： AngularJS 是一個(gè) JavaScript 框架。它可通過 標(biāo)簽添加到 HTML 頁面。 Ang...
    JenniferYe閱讀 1,436評(píng)論 0贊 13
  • 今天兩位老師做了現(xiàn)場(chǎng)督導(dǎo)，第一位老師焦慮情緒比較嚴(yán)重，自己身心疲憊，但又覺得抽出時(shí)間來休息調(diào)整是在浪費(fèi)時(shí)間，所以一...
    七姑娘_7閱讀 212評(píng)論 0贊 0