angular入门
目錄
一、angular入門
1.雙邊數(shù)據(jù)綁定
2.模塊
3.Controller
4.表達(dá)式（Expression）
5.內(nèi)置服務(wù)
二、常用內(nèi)置指令
1.ng-app指令
2.ng-repeat 指令
3.ng-class指令
4.ng-show/ng-hide 指令
5.ng-link/ng-src 指令
一、angular入門
1.雙邊數(shù)據(jù)綁定
<!-- 所有需要angular管理的代碼必須包裹在一個(gè)ng-app指令的元素中 --> <div ng-app> <h1>使用angular實(shí)現(xiàn)雙邊數(shù)據(jù)綁定</h1> <p><input type="text" placeholder="請(qǐng)輸入你的姓名" ng-model="user.name"></p> <p>hello<strong>{{user.name}}</strong></p> </div> <script src="js/angular.js"></script>運(yùn)行流程：
1.當(dāng)網(wǎng)頁(yè)加載完畢，AngularJS 自動(dòng)開始執(zhí)行 2.HTML 頁(yè)面中 ng-xxx 的屬性稱之為指令（Directive） 3.ng-app 指令告訴 AngularJS，<div> 元素是AngularJS 應(yīng)用程序管理的邊界 4.ng-model 指令把文本框的值綁定到變量 name 上 5.{{ name }} 表達(dá)式就是把應(yīng)用程序變量 name 綁定到某個(gè)段落的 innerHTML2.模塊
-
劃分應(yīng)用程序結(jié)構(gòu)
-
我們可以通過(guò)angular.module創(chuàng)建一個(gè)模塊
-
angular.module方法傳遞兩個(gè)參數(shù)才是創(chuàng)建模塊，一個(gè)參數(shù)是獲取模塊
3.Controller
-
調(diào)度邏輯的集合
-
控制器的三種主要職責(zé)：
-
為應(yīng)用中的模型設(shè)置初始狀態(tài)
-
通過(guò)$scope對(duì)象把數(shù)據(jù)模型或函數(shù)行為暴露給視圖
-
監(jiān)視模型的變化，做出相應(yīng)的動(dòng)作
-
$watch演示：
<body ng-app="myModule" ng-controller="loginController"> 用戶名:<input type="text" ng-model="user.username"><br/> 密碼:<input type="password" ng-model="user.password"><br/> 登陸:<input type="button" ?value="登陸" ng-click="login()"><br/> ? <div>{{message}}</div> <script src="js/angular.js"></script> <script>// 創(chuàng)建一個(gè)模塊var myModule=angular.module("myModule",[]);// 為這個(gè)模塊創(chuàng)建一個(gè)控制器myModule.controller("loginController",['$scope',function ($scope) {// 數(shù)據(jù)$scope.user={username:"",password:""}; ?// 行為數(shù)據(jù)$scope.login=function () {// 因?yàn)閿?shù)據(jù)的變化時(shí)雙向的同步，所以界面上的值變化會(huì)同步到$scope.user上console.log($scope.user);} ?// 請(qǐng)輸入用戶名 輸入格式不合法$scope.message = '請(qǐng)輸入用戶名'; ?// 官方的API中提供了一個(gè)$scope.$watch方法，$scope.$watch('user.username', function(now, old) {// 當(dāng)user.username發(fā)生變化時(shí)觸發(fā)這個(gè)函數(shù)if (now) {if (now.length < 7) {$scope.message = '輸入格式不合法';} else {$scope.message = '';}} else {$scope.message = '請(qǐng)輸入用戶名';}});}]) </script>4.表達(dá)式（Expression）
-
作用：
? 使用?表達(dá)式?把數(shù)據(jù)綁定到 HTML。
-
語(yǔ)法：
? 表達(dá)式寫在雙大括號(hào)內(nèi)：{{ expression }}。
-
比較：
? 表達(dá)式作用類似于ng-bind指令建議更多的使用指令
-
AngularJS表達(dá)式很像JavaScript表達(dá)式
-
它們可以包含文字、運(yùn)算符和變量
-
如 {{ 5 + 5 }} 或 {{ firstName + ‘-’ + lastName }}
5.內(nèi)置服務(wù)
-
我們的數(shù)據(jù)一般都是從后端獲取的，那么如何獲取數(shù)據(jù)呢？我們一般使用內(nèi)置服務(wù)$http 來(lái)實(shí)現(xiàn)。
-
下面模擬從后端獲取數(shù)據(jù)
data.json
[{"name":"張三","shuxue":100,"yuwen":93},{"name":"李四","shuxue":88,"yuwen":87},{"name":"王五","shuxue":77,"yuwen":56},{"name":"趙六","shuxue":67,"yuwen":86} ]二、常用內(nèi)置指令
1.ng-app指令
-
ng-app指令用來(lái)標(biāo)明一個(gè)AngularJS應(yīng)用程序
-
標(biāo)記在一個(gè)AngularJS的作用范圍的根對(duì)象上
-
系統(tǒng)執(zhí)行時(shí)會(huì)自動(dòng)的執(zhí)行根對(duì)象范圍內(nèi)的其他指令
-
可以在同一個(gè)頁(yè)面創(chuàng)建多個(gè)ng-app節(jié)點(diǎn)(不推薦)
-
創(chuàng)建多個(gè)ng-app節(jié)點(diǎn)時(shí),默認(rèn)只能執(zhí)行第一個(gè)，后面的需要自己手動(dòng)引導(dǎo) augular.bootstrap()
-
標(biāo)記的范圍盡可能小，可以提高性能
2.ng-repeat 指令
-
ng-repeat指令用來(lái)編譯一個(gè)數(shù)組重復(fù)創(chuàng)建當(dāng)前元素
3.ng-class指令
-
ng-class指令可以設(shè)置一個(gè)鍵值對(duì)，用于決定是否添加一個(gè)特定的類名，鍵為class名，值為bool類型表示是否添加該類名
遍歷名字且查詢變紅
<style>.red{color:red;}.green{color:green;} </style> ? <body ng-app="myModule"> <!-- 將輸入框輸入的元素綁定到ng-class中，實(shí)現(xiàn)查詢以startName開頭的名字的功能 --> <input type="text" ng-model="startName"> <ul ng-controller="myController"><!-- 若要遍歷的元素有重復(fù)，需要加上track by $index,保證唯一 --><li ng-repeat="name in names track by $index" ng-class="{red:name.startsWith(startName)}">{{name}}</li> </ul> ? <script src="js/angular.js"></script> <script> ?var module=angular.module("myModule",[]); ?module.controller("myController",['$scope',function ($scope) {$scope.names=['張三','李四','王五','趙六','張三'];}]) </script>4.ng-show/ng-hide 指令
-
ng-show/ng-hide指令會(huì)根據(jù)屬性值去確定是否展示當(dāng)前元素，例如ng-show=false則不會(huì)展示該元素
5.ng-link/ng-src 指令
-
ng-link/ng-src指令用于解決當(dāng)鏈接類型的數(shù)據(jù)綁定時(shí)造成的加載BUG
總結(jié)
- 上一篇： dubbo配置（一）
- 下一篇： 在IntelliJ IDEA中使用git