angular 03-17

時間  2019-11-18
標籤 angular 欄目 AngularJS 简体版
原文   原文鏈接

AngularJS 模塊

1.ng-app 指令

ng-app 指令定義了 AngularJS 應用程序的 根元素。php

ng-app 指令在網頁加載完畢時會自動引導（自動初始化）應用程序。html

稍後您將學習到 ng-app 如何經過一個值（好比 ng-app="myModule"）鏈接到代碼模塊。web

 

2.建立模塊    ng-model 指令

ng-model 指令 綁定 HTML 元素 到應用程序數據。數組

<div ng-app="myApp">...</div>

<script>

var app = angular.module("myApp", []); 

</script>

3.添加控制器

　　ng-controller 指令來添加應用的控制器服務器

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

</script>

　　

4.ng-repeat 指令

ng-repeat 指令對於集合中（數組中）的每一個項會 克隆一次 HTML 元素。app

 

5.建立自定義的指令

除了 AngularJS 內置的指令外，咱們還能夠建立自定義指令。ide

你可使用 .directive 函數來添加自定義的指令。函數

要調用自定義指令，HTML 元素上須要添加自定義指令名。post

使用駝峯法來命名一個指令， runoobDirective, 但在使用它時須要以 - 分割, runoob-directive:學習

限制使用

你能夠限制你的指令只能經過特定的方式來調用。

實例

經過添加 restrict 屬性,並設置只值爲 "A", 來設置指令只能經過屬性的方式來調用:

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

嘗試一下 »

restrict 值能夠是如下幾種:

  • E 做爲元素名使用
  • A 做爲屬性使用
  • C 做爲類名使用
  • M 做爲註釋使用

restrict 默認值爲 EA, 便可以經過元素名和屬性名來調用指令。

 

5.ng-model 指令

ng-model 指令用於綁定應用程序數據到 HTML 控制器(input, select, textarea)的值。

ng-model 指令能夠將輸入域的值與 AngularJS 建立的變量綁定。

<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>

　　雙向綁定

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

6.驗證用戶輸入

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一個合法的郵箱地址</span>
</form>

　　以上實例中，提示信息會在 ng-show 屬性返回 true 的狀況下顯示。

 

7.如何使用 Scope

Scope(做用域) 是應用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。

Scope 是一個對象，有可用的方法和屬性。

Scope 可應用在視圖和控制器上。

<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>

當在控制器中添加 $scope 對象時，視圖 (HTML) 能夠獲取了這些屬性。

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

　　7.1 Scope 做用範圍

　　　　以上兩個實例中，只有一個做用域 scope，因此處理起來比較簡單，但在大型項目中， HTML DOM 中有多個做用域，這時你就須要知道你使用的 scope 對應的做用域是哪個。

　　　　當咱們使用 ng-repeat 指令時，每一個重複項都訪問了當前的重複對象:

　　

<div ng-app="myApp" ng-controller="myCtrl">
<ul>
    <li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

　　7.2根做用域

　　　　全部的應用都有一個 $rootScope，它能夠做用在 ng-app 指令包含的全部 HTML 元素中。

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{lastname}} 家族成員:</h1>
<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>　　

　　根做用域　　　

　　　　全部的應用都有一個 $rootScope，它能夠做用在 ng-app 指令包含的全部 HTML 元素中。

　　　　$rootScope 可做用於整個應用中。是各個 controller 中 scope 的橋樑。用 rootscope 定義的值，能夠在各個 controller 中使用。

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

<h1>{{lastname}} 家族成員:</h1>
<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

　　

AngularJS 控制器

　　1.ng-controller 指令定義了應用程序控制器

<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>

　　2.控制器方法

　　上面的實例演示了一個帶有 lastName 和 firstName 這兩個屬性的控制器對象。

　　控制器也能夠有方法（變量和函數）：

<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>

　　

　　3外部文件中的控制器

　　在大型的應用程序中，一般是把控制器存儲在外部文件中。

　　只須要把 <script> 標籤中的代碼複製到名爲 personController.js 的外部文件中便可：

<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>

　　其餘實例

　　如下實例建立一個新的控制器文件:

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

　　保存文件爲  namesController.js:

　　而後，在應用中使用控制器文件:

　　AngularJS 實例

　　<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>

 

AngularJS 過濾器

　　1.AngularJS 過濾器可用於轉換數據：

過濾器 描述
currency 格式化數字爲貨幣格式。
filter 從數組項中選擇一個子集。
lowercase 格式化字符串爲小寫。
orderBy 根據某個表達式排列數組。
uppercase 格式化字符串爲大寫。

　　2.表達式中添加過濾器

　　　　過濾器能夠經過一個管道字符（|）和一個過濾器添加到表達式中。.

　　　　(下面的兩個實例，咱們將使用前面章節中提到的 person 控制器)

　　　　uppercase 過濾器將字符串格式化爲大寫：　　{{ lastName | uppercase }}

　　　　lowercase 過濾器將字符串格式化爲小寫：　　{{ lastName | lowercase }}

　　　　currency 過濾器將數字格式化爲貨幣格式：

　　3.向指令添加過濾器　　　　

　　　　過濾器能夠經過一個管道字符（|）和一個過濾器添加到指令中。

　　　　orderBy 過濾器根據表達式排列數組：

<li ng-repeat="x in names | orderBy:'country'">  // 結果根據country類型排列
    {{ x.name + ', ' + x.country }}
  </li>

　　4.過濾輸入

　　　　輸入過濾器能夠經過一個管道字符（|）和一個過濾器添加到指令中，該過濾器後跟一個冒號和一個模型名稱。

　　　　filter 過濾器從數組中選擇一個子集：

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

　　

AngularJS 服務(Service)

　　在 AngularJS 中，服務是一個函數或對象，可在你的 AngularJS 應用中使用。

　　AngularJS 內建了30 多個服務。

　　有個 $location 服務，它能夠返回當前頁面的 URL 地址。  注意 $location 服務是做爲一個參數傳遞到 controller 中。若是要使用它，須要在 controller 中定義。

　　　　$scope.myUrl = $location.absUrl();

 　　

　　1.$http 服務

　　　　AngularJS $http 是一個用於讀取web服務器上數據的服務。

　　　　$http.get(url) 是用於讀取服務器數據的函數。

　　　POST 與 GET 簡寫方法格式：

　　　　$http.get('/someUrl', config).then(successCallback, errorCallback); 　　　　$http.post('/someUrl', data, config).then(successCallback, errorCallback);
<div ng-app="myApp" ng-controller="siteCtrl"> 
 
<ul>

    {{names}}

</ul>
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
  $http.get("1.php")
  .success(function (response) {$scope.names = response;});
});

　　　 容許全部域名訪問

　　　　　容許全部域名訪問則只需在http://server.runoob.com/server.php文件頭部添加以下代碼：

<?php 
header('Access-Control-Allow-Origin:*'); 
echo "ddddddddd";
 ?>

 

　　2.$timeout 服務

　　　　AngularJS $timeout 服務對應了 JS window.setTimeout 函數。  定時器的延時

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

　　3.$interval 服務

　　　　AngularJS $interval 服務對應了 JS window.setInterval 函數。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

　　4.建立自定義服務

　　　　建立訪問自定義服務，連接到你的模塊中

建立名爲hexafy 的訪問:
app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

實例

使用自定義的的服務 hexafy 將一個數字轉換爲16進制數:

app.controller( 'myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});

　　

AngularJS Select(選擇框)

　　1.使用 ng-options 建立選擇框

　　　　ng-option 指令來建立一個下拉列表，列表項經過對象和數組循環輸出

<div ng-app="myApp" ng-controller="myCtrl">
 
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
</select>
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});
</script>

　　2.使用ng-repeat建立選擇框

<select>
<option ng-repeat="x in names">{{x}}</option>
</select>

　　ng-repeat 有侷限性，選擇的值是一個字符串:

<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>

<h1>你選擇的是: {{selectedSite}}</h1>

　　使用 ng-options 指令，選擇的值是一個對象：

<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>

<h1>你選擇的是: {{selectedSite.site}}</h1>
<p>網址爲: {{selectedSite.url}}</p>

　　

AngularJS HTML DOM

AngularJS 爲 HTML DOM 元素的屬性提供了綁定應用數據的指令。

1.ng-disabled 指令

指令直接綁定應用程序數據到 HTML 的 disabled 屬性

<div ng-app="" ng-init="mySwitch=true">

<p>
<button ng-disabled="mySwitch">點我!</button>
</p>

<p>
<input type="checkbox" ng-model="mySwitch">按鈕
</p>

<p>
{{ mySwitch }}
</p>

</div>

ng-disabled 指令綁定應用程序數據 "mySwitch" 到 HTML 的 disabled 屬性。

ng-model 指令綁定 "mySwitch" 到 HTML input checkbox 元素的內容（value）

2.ng-show 指令

　　ng-show 指令隱藏或顯示一個 HTML 元素。

　　ng-show 指令根據 value 的值來顯示（隱藏）HTML 元素。

　　你可使用表達式來計算布爾值（ true 或 false）:

<div ng-app="">
<p ng-show="true">我是可見的。</p>
<p ng-show="false">我是不可見的。</p>
</div>

div ng-app="" ng-init="hour=13"> <p ng-show="hour > 12">我是可見的。</p> </div>

3.ng-hide 指令

　　ng-hide 指令用於隱藏或顯示 HTML 元素。

　　

<div ng-app="">
<p ng-hide="true">我是不可見的。</p>
<p ng-hide="false">我是可見的。</p>
</div>

　　

AngularJS 事件

AngularJS 有本身的 HTML 事件指令。

1.ng-click 指令

　　ng-click 指令定義了 AngularJS 點擊事件。

<div ng-app="" ng-controller="myCtrl">
<button ng-click="count = count + 1">點我！</button>
<p>{{ count }}</p>
</div>

2.隱藏 HTML 元素

　　ng-hide 指令用於設置應用部分是否可見。

　　ng-hide="true" 設置 HTML 元素不可見。

　　ng-hide="false" 設置 HTML 元素可見。

<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">隱藏/顯示</button>
<p ng-hide="myVar">
名: <input type="text" ng-model="firstName"><br>
姓名: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = false;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };
});
</script>

3.顯示 HTML 元素

　　ng-show 指令可用於設置應用中的一部分是否可見 。

　　ng-show="false" 能夠設置 HTML 元素 不可見。

　　ng-show="true" 能夠以設置 HTML 元素可見。

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

<button ng-click="toggle()">隱藏/顯示</button>

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

</div>

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

　　

AngularJS 輸入驗證

<h2>Validation Example</h2>

<form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>

<p>用戶名:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> <span ng-show="myForm.user.$error.required">用戶名是必須的。</span>
  </span>
</p>

<p>郵箱:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">郵箱是必須的。</span>
  <span ng-show="myForm.email.$error.email">非法的郵箱。</span>
  </span>
</p>

<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = 'john.doe@gmail.com';
});
</script>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程