AngularJS入門

1. AngularJS簡介

AngularJS是一個JavaScript框架，用js編寫的庫

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<!-- 放在<body> 元素的底部。提高網頁加載速度 -->

1.1. AngularJS 擴展了 HTML

AngularJS 通過 ng-directives擴展了HTML

ng-app 指令定義一個 AngularJS 應用程序。若不聲明，將直接顯示表達式。

ng-model 指令把元素值（比如輸入域的值）綁定到應用程序。

ng-bind 指令把應用程序數據綁定到 HTML 視圖。一般使用 **{ { ng-model 的值 }}**獲取數據

<div ng-app=""><p>名字 : <input type="text" ng-model="name"></p><h1>Hello {{name}}</h1>    <!-- 常用方式 --><p ng-bind="name"></p>
</div>

當網頁加載完畢，AngularJS 自動開啟。

2. AngularJS表達式

AngularJS 使用表達式把數據綁定到 HTML

使用{ { 表達式 }}進行數據的輸出

表達式可以包含字符，操作符，變量

表達式可以寫在HTML中

不支持條件判斷，循環及異常

支持過濾器

<div ng-app=""><p>我的第一個表達式: {{ 5 + 5 }}</p>
</div>

2.1. AngularJS數字

類似于JavaScript的數字

<div ng-app="" ng-init="quantity=1;cost=5">  <!-- ng-init用來初始化數據，不常用 --><p> 總價： {{ quantity * cost }} </p>
</div>

2.2. AngularJS字符串

類似于JavaScript的字符串

<div ng-app="" ng-init="firstName='Tom';lastName='Jack'"><p> 姓名： {{ firstName + " " + lastName }} </p>
</div>

2.3. AngularJS 對象

類似于JavaScript的對象

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"><p> 姓為 {{ person.lastName }} </p>
</div>

2.4. AngularJS 數組

類似于JavaScript的數組

<div ng-app="" ng-init="points=[1,12,9,3,40]"><p> 第三個值為 {{ points[2] }} </p>
</div>

3. AngularJS指令

通過指令來擴展HTML。通過內置的指令來為應用添加功能，可以自定義指令。

指令帶有前綴 ng- ng-app指令用來初始化一個 AngularJS應用程序

3.1. 數據綁定

表達式**{{ firstName }}** 通過 ng-model=“firstName” 進行同步。

<div ng-app="" ng-init="firstName='Tom'"><input type="text" ng-model="firstName"><!-- 默認為Tom，輸入值時 下方的表達式值會改變 -->{ { firstName }}
</div>

3.2. 重復HTML元素

ng-repeat指令：重復一個HTML元素，用作循環

<div ng-app="" ng-init="names=['Tom','Jack','Hege']"><ul><li ng-repeat="i in names"> {{ i }} </li></ul>
</div>

用在一個對象數組上

<div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"><ul><li ng-repeat="i in names"> {{ i.name + "," + i.country }} </li></ul>
</div>

3.3. ng-app指令

在網頁加載完畢時自動初始化一個 AngularJS應用程序

通過一個值**（ng-app=“myCode”）**連接到代碼模塊

3.4. ng-init指令

為 AngularJS 應用程序定義了初始值。一般不使用

3.5. ng-model 指令

/// ng-model="name" 聲明一個name變量/// $scope.name 使用name變量

綁定應用程序數據到 HTML 控制器(input, select, textarea)的值
為應用程序數據提供類型驗證（number、email、required）
為應用程序數據提供狀態（invalid、dirty、touched、error）
為 HTML 元素提供 CSS 類
綁定 HTML 元素到 HTML 表單
將輸入域的值（$scope）與 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>

雙向綁定，在修改輸入域的值時， AngularJS 屬性的值也將修改

<div ng-app="myApp" ng-controller="myCtrl"><input ng-model="name"/>      <!-- 默認顯示Tom --><p> 你輸入了： {{ name }} </p>  <!-- 修改輸入框的值，此處名字也會相應修改 -->
</div><script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope){ $scope.name = 'Tom' }) </script>

驗證用戶輸入 ng-show

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

為應用數據提供狀態值（invalid, dirty, touched, error）

<form ng-app="" name="myForm" ng-init="myText = 'test@lwclick.com'">Email:<input type="email" name="myAddr" ng-model="myText" required><h1>狀態</h1>{ { myForm.myAddr.$valid }}         如果輸入的值是合法的則為 true{ { myForm.myAddr.$dirty }}         如果值改變則為 true{{ myForm.myAddr.$touched }}       如果通過觸屏點擊則為 true{{ myForm.myAddr.$error.email }}   如果輸入的Email的值非法則為 true
</form>

CSS類，基于它們的狀態為 HTML 元素提供了 CSS 類

<!-- 輸入框有required屬性，必須輸入數據，若不輸入則為非法的，觸發input.ng-invalid -->
<style> input.ng-invalid { background-color: lightblue; } 
</style><form ng-app="" name="myForm">輸入你的名字: <input name="myAddress" ng-model="text" required>
</form>

ng-empty 為空的時候
ng-not-empty 不為空的時候
ng-touched 控件已失去焦點
ng-untouched 控件未失去焦點
ng-valid 驗證通過
ng-invalid 驗證失敗
ng-dirty 值改變的時候
ng-pending 任何為滿足 $asyncValidators 的情況
ng-pristine 控件為初始狀態

3.6. ng-repeat指令

對于集合中（數組中）的每個項會克隆一次 HTML 元素。用于循環輸出

3.7. 創建自定義指令

聲明：使用 .directive 函數來添加自定義的指令，聲明時使用駝峰命名法

<body ng-app="myApp"><!-- 使用 --><lw-click></lw-click><!-- 聲明 --><script> var app = angular.module("myApp", []); app.directive("lwClick", function(){ return { template: "<h1>自定義指令~</h1>" } }); </script>
</body>

調用：調用時使用 – 分割

元素名： <lw-click> </lw-click>

屬性： <div lw-click> </div>

類名： <div class="lw-click"> </div>

必須設置 restrict 的值為 “C” 才能通過類名來調用指令。

<script> app.directive("lwClick", function(){ return { restrict: "C", template: "<h1>自定義指令~</h1>" } }); 
</script>

注釋：

添加 replace 屬性，使注釋可見

設置 restrict 的值為 “M”

<script> app.directive("lwClick", function(){ return { restrict: "M", replace: true, template: "<h1>自定義指令~</h1>" } }); 
</script>

4. AngularJS Scope(作用域)

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

4.1. 使用Scope

在AngularJS創建控制器時，可以將$scope對象當作一個參數傳遞

<div ng-app="myApp" ng-controller="myCtrl"><h1> { { carName }} </h1>                         <!-- 獲取變量的值 -->
</div><script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope){ // scope作為參數傳遞 $scope.carName = "Volvo"; // 聲明一個變量 })
</script>

4.2. Scope概述

AngularJS應用組成如下：

View（視圖），即HTML scope的屬性和方法
Model（模型），當前HTML中可用的數據 scope
Controller（控制器），JavaScript函數，可以添加或修改屬性 scope的屬性和方法

<div ng-app="myApp" ng-controller="myCtrl"><input ng-model="name">       <!-- 數據綁定 --><h2> {{ greeting }} </h2><button ng-click="sayHello()"> 點我 </button>
</div><script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope){ $scope.name = "lwclick"; // 聲明name // 創建方法，響應點擊事件 $scope.sayHello =  function(){ $scope.greeting = 'hello' + $scope.name + '!'; } }) 
</script>

4.3. Scope作用范圍

根作用域：$rootScope

作用在 ng-app 指令包含的所有HTML元素中
用 $rootScope 定義的值，可以在各個controller中使用

<div ng-app="myApp" ng-controller="myCtrl"><h1>{{ lastName }} 家族成員:</h1> <ul><li

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/712481.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/712481.shtml
英文地址，請注明出處：http://en.pswp.cn/news/712481.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！