angularjs筆記_第1頁
angularjs筆記_第2頁
angularjs筆記_第3頁
angularjs筆記_第4頁
angularjs筆記_第5頁
已閱讀5頁，還剩11頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、AngularJS 擴(kuò)展了 HTMLAngularJS 通過 ng-directives 擴(kuò)展了 HTML。ng-app 指令定義一個 AngularJS 應(yīng)用程序。ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序。ng-bind 指令把應(yīng)用程序數(shù)據(jù)綁定到 HTML 視圖。AngularJS 實(shí)例<!DOCTYPE html><html><head><meta charset="utf-8"><script src="

2、</head><body><div ng-app="">  <p>名字 : <input type="text" ng-model="name"></p>  <h1>Hello name</h1></div></body></html>創(chuàng)建自定義的指令除了 AngularJS 內(nèi)置的指令外，我們還可以創(chuàng)建自定義指令。你可以使用 

3、;.directive 函數(shù)來添加自定義的指令。要調(diào)用自定義指令，HTMl 元素上需要添加自定義指令名。使用駝峰法來命名一個指令， runoobDirective, 但在使用它時需要以 - 分割, runoob-directive:AngularJS 實(shí)例<body ng-app="myApp"><runoob-directive></runoob-directive><script>var app = angular.module("myApp"

4、, );app.directive("runoobDirective", function()     return         template : "<h1>自定義指令!</h1>"    ;);</script></body>驗(yàn)證用戶輸入AngularJS 實(shí)例<form ng-app="" name="myFor

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

6、TYPE html><html><head><meta charset="utf-8"><script src=" </head><body><form ng-app="" name="myForm"> Email: <input type="email" name="myAddress" ng-model="text"> <span ng-show="m

7、yForm.myAddress.$error.email">不是一個合法的郵箱地址</span></form><p>在輸入框中輸入你的游戲地址，如果不是一個合法的郵箱地址，會彈出提示信息。</p></body></html>應(yīng)用狀態(tài)ng-model 指令可以為應(yīng)用數(shù)據(jù)提供狀態(tài)值(invalid, dirty, touched, error):AngularJS 實(shí)例<form ng-app="" name="myForm" 

8、;ng-init="myText = 'test'">    Email:    <input type="email" name="myAddress" ng-model="myText" required></p>    <h1>狀態(tài)</h1>    my

9、Form.myAddress.$valid    myForm.myAddress.$dirty    myForm.myAddress.$touched</form><!DOCTYPE html><html><head><meta charset="utf-8"><script src=" </head><body><form ng-app="" name="

10、myForm" ng-init="myText = 'test'">Email:<input type="email" name="myAddress" ng-model="myText" required><p>編輯郵箱地址，查看狀態(tài)的改變。</p><h1>狀態(tài)</h1><p>Valid: myForm.myAddress.$valid (如果輸入的值是合法的則為 true)。</p><p&g

11、t;Dirty: myForm.myAddress.$dirty (如果值改變則為 true)。</p><p>Touched: myForm.myAddress.$touched (如果通過觸屏點(diǎn)擊則為 true)。</p></form></body></html>根作用域所有的應(yīng)用都有一個 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。$rootScope 可作用于整個應(yīng)用中。是各個 controller 中 scope 的橋梁。用 roots

12、cope 定義的值，可以在各個 controller 中使用。AngularJS 實(shí)例創(chuàng)建控制器時，將 $rootScope 作為參數(shù)傳遞，可在應(yīng)用中使用：<div ng-app="myApp" ng-controller="myCtrl"><h1>lastname 家族成員:</h1><ul>    <li ng-repeat="x in names">x lastname</u

13、l></div><script>var app = angular.module('myApp', );app.controller('myCtrl', function($scope, $rootScope)     $s = "Emil", "Tobias", "Linus"    $rootScope.lastname = "Re

14、fsnes");</script>顯示效果AngularJS Filters過濾器可以使用一個管道字符（|）添加到表達(dá)式和指令中。AngularJS 過濾器AngularJS 過濾器可用于轉(zhuǎn)換數(shù)據(jù)：過濾器描述currency格式化數(shù)字為貨幣格式。filter從數(shù)組項(xiàng)中選擇一個子集。lowercase格式化字符串為小寫。orderBy根據(jù)某個表達(dá)式排列數(shù)組。uppercase格式化字符串為大寫。表達(dá)式中添加過濾器過濾器可以通過一個管道字符（|）和一個過濾器添加到表達(dá)式中。.(（下面的兩個實(shí)例，我們將使用前面章節(jié)中提到的 person 控制器）)uppercase&

15、#160;過濾器將字符串格式化為大寫：AngularJS 實(shí)例<div ng-app="myApp" ng-controller="personCtrl"><p>姓名為  lastName | uppercase </p></div>AngularJS $httpAngularJS $http 是一個用于讀取web服務(wù)器上數(shù)據(jù)的服務(wù)。$http.get(url) 是用于讀取服務(wù)器數(shù)據(jù)的函數(shù)。AngularJS 實(shí)例<div ng-app="myApp&

16、quot; ng-controller="customersCtrl"> <ul>  <li ng-repeat="x in names">     x.Name + ', ' + x.Country   </li></ul></div><script>var app = angular.module('myApp', );app.con

17、troller('customersCtrl', function($scope, $http)     $http.get("    .success(function(response) $s = response.records;););</script>1.ng-show 指令ng-show 指令隱藏或顯示一個 HTML 元素。AngularJS 實(shí)例<div ng-app=""><p ng-show="true"

18、;>我是可見的。</p><p ng-show="false">我是不可見的。</p></div> 2ng-hide 指令ng-hide 指令用于隱藏或顯示 HTML 元素。AngularJS 實(shí)例<div ng-app=""><p ng-hide="true">我是不可見的。</p><p ng-hide="false">我是可見的。</p></div> AngularJS 全局 APIAng

19、ularJS 全局 API 用于執(zhí)行常見任務(wù)的 JavaScript 函數(shù)集合，如：· 比較對象· 迭代對象· 轉(zhuǎn)換對象全局 API 函數(shù)使用 angular 對象進(jìn)行訪問。以下列出了一些通用的 API 函數(shù)：API描述angular.lowercase()轉(zhuǎn)換字符串為小寫angular.uppercase()轉(zhuǎn)換字符串為大寫angular.isString()判斷給定的對象是否為字符串，如果是返回 true。 angular.isNumber()判斷給定的對象是否為數(shù)字，如果是返回 true。angular.lowercase()實(shí)例<div ng-app

20、="myApp" ng-controller="myCtrl"><p> x1 </p><p> x2 </p></div><script>var app = angular.module('myApp', );app.controller('myCtrl', function($scope) $scope.x1 = "JOHN"$scope.x2 = angular.lowercase($scope.x1););</scr

21、ipt> 實(shí)例解析AngularJS ng-model 指令用于綁定輸入元素到模型中。模型對象有兩個屬性： user 和 email。我們使用了 ng-show指令， color:red 在郵件是 $dirty 或 $invalid 才顯示。屬性描述$dirty表單有填寫記錄$valid字段內(nèi)容合法的$invalid字段內(nèi)容是非法的$pristine表單沒有填寫記錄AngularJS 參考手冊AngularJS 指令本教程用到的 AngularJS 指令 :指令描述ng-app定義應(yīng)用程序的根元素。ng-bind綁定 HTML 元素到應(yīng)用程序數(shù)據(jù)ng-bind-html綁定 HTML 元

22、素的 innerHTML 到應(yīng)用程序數(shù)據(jù)，并移除 HTML 字符串中危險字符ng-bind-template規(guī)定要使用模板替換的文本內(nèi)容ng-blur規(guī)定 blur 事件的行為ng-change規(guī)定在內(nèi)容改變時要執(zhí)行的表達(dá)式ng-checked規(guī)定元素是否被選中ng-class指定 HTML 元素使用的 CSS 類ng-class-even類似 ng-class，但只在偶數(shù)行起作用ng-class-odd類似 ng-class，但只在奇數(shù)行起作用ng-click定義元素被點(diǎn)擊時的行為ng-cloak在應(yīng)用正要加載時防止其閃爍ng-controller定義應(yīng)用的控制器對象ng-copy規(guī)定拷貝事

23、件的行為ng-csp修改內(nèi)容的安全策略ng-cut規(guī)定剪切事件的行為ng-dblclick規(guī)定雙擊事件的行為ng-disabled規(guī)定一個元素是否被禁用ng-focus規(guī)定聚焦事件的行為ng-form指定 HTML 表單繼承控制器表單ng-hide隱藏或顯示 HTML 元素ng-href為 the <a> 元素指定鏈接ng-if如果條件為 true 移除 HTML 元素ng-include在應(yīng)用中包含 HTML 文件ng-init定義應(yīng)用的初始化值ng-jq定義應(yīng)用必須使用到的庫，如：jQueryng-keydown規(guī)定按下按鍵事件的行為ng-keypress規(guī)定按下按鍵事件的行為

24、ng-keyup規(guī)定松開按鍵事件的行為ng-list將文本轉(zhuǎn)換為列表 (數(shù)組)ng-model綁定 HTML 控制器的值到應(yīng)用數(shù)據(jù)ng-model-options規(guī)定如何更新模型ng-mousedown規(guī)定按下鼠標(biāo)按鍵時的行為ng-mouseenter規(guī)定鼠標(biāo)指針穿過元素時的行為ng-mouseleave規(guī)定鼠標(biāo)指針離開元素時的行為ng-mousemove規(guī)定鼠標(biāo)指針在指定的元素中移動時的行為ng-mouseover規(guī)定鼠標(biāo)指針位于元素上方時的行為ng-mouseup規(guī)定當(dāng)在元素上松開鼠標(biāo)按鈕時的行為ng-non-bindable規(guī)定元素或子元素不能綁定數(shù)據(jù)ng-open指定元素的 open

25、屬性ng-options在 <select> 列表中指定 <options>ng-paste規(guī)定粘貼事件的行為ng-pluralize根據(jù)本地化規(guī)則顯示信息ng-readonly指定元素的 readonly 屬性ng-repeat定義集合中每項(xiàng)數(shù)據(jù)的模板ng-selected指定元素的 selected 屬性ng-show顯示或隱藏 HTML 元素ng-src指定 <img> 元素的 src 屬性ng-srcset指定 <img> 元素的 srcset 屬性ng-style指定元素的 style 屬性ng-submit規(guī)定 onsubmit 事件發(fā)生時執(zhí)行的表達(dá)式ng-switch規(guī)定顯示或隱藏子元素的條件ng-transclude規(guī)定填充的目標(biāo)位置ng-value規(guī)定 input 元素的值過濾器解析 AngularJs 過濾器。AngularJS 事件AngularJS 支持以下事件:· ng-click· ng-dbl-click· ng-mousedown· ng-mouseenter· ng-mouselea

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論