Angular.js 使用步驟
//AngularJs 提供了一個全局對象 angular
//1.創(chuàng)建一個模塊，第一個參數(shù)為模塊名稱，第二個參數(shù)為依賴模塊
var app = angular.module('app',[]);
//2.創(chuàng)建控制器，作為連接 model 和 view 的橋梁,第一個參數(shù)為控制氣啊名稱，第二個參數(shù)為依賴的服務(wù)
app.controller('xxxController',['$scope',function($scope){
}])
//3.綁定模塊
//4.綁定控制器
<body ng-app='app' ng-controller='xxxController'>
</body>
- 一個頁面可以綁定多個模塊，但是模塊之間是不能嵌套的
- 通常一個 html 里面值對應(yīng)一個模塊
Angular 指令概念
- HTML 在構(gòu)建應(yīng)用時存在諸多不足之處，AngularJS 通過擴展一系列的 HTML 屬性或標(biāo)簽來彌補這些缺陷
- 所謂指令就是 AngularJs 自定義的 HTML 屬性或標(biāo)簽，這些指令都是以
ng-作為前綴的 - 內(nèi)置指令： angular 開始為 html 內(nèi)置好了一些特定功能的屬性或者標(biāo)簽，當(dāng)解析到 ng 代碼時，會回頭到 html 當(dāng)中解析自己的指令
常用指令
ng-app 指定應(yīng)用模塊，至少一個
ng-controller 指定控制器
ng-show 控制元素是否顯示，布爾類型
ng-hide 控制元素是否隱藏，布爾類型
ng-if 控制元素是否存在，布爾類型，弱為 false，在操作臺也看不到此標(biāo)簽
ng-src 增強通篇路徑，用普通 src 雖然會正確顯示但是控制臺會報錯，原因是 html 文件是從上到下渲染的，渲染的時候看不到此路徑，而之后解析的時候又能看到，所以會正確顯示，但是也會報錯
ng-herf 增強地址
ng-class 控制類名
使用方式： ng-class='{red:true}'
red為類名，true 為是否添加類名
ng-include 引入模版，html 中直接引入別的文件： ng-include="'header.html'",因為參數(shù)是引用路徑所以要加引號
ng-disabled 表單禁用，input 的輸入框禁用
ng-readonly 表單只讀，input 輸入框內(nèi)容不可修改
ng-checked 單、復(fù)選框表單選中
ng-selected 下拉框表單選中
- ng-switch 選擇指令
- ng-repeat 遍歷指令
//配合 ng-switch-when 使用
<ul ng-switch='value' ng-repeat='(index,value) in array'>
<li ng-switch-when="css">{{value}}</li>
</ul>
AngularIJS 數(shù)據(jù)單向綁定
- AngularJS 是以數(shù)據(jù)作為驅(qū)動的 mvc 框架，所有模型里的數(shù)據(jù)經(jīng)由控制器展示到視圖中
- 數(shù)據(jù)綁定指的就是將模型中的數(shù)據(jù)與響應(yīng)的視圖驚醒關(guān)聯(lián)
- AngularJS 當(dāng)中的數(shù)據(jù)綁定分為
- 1.數(shù)據(jù)單向綁定
單向數(shù)據(jù)綁定是指將模型數(shù)據(jù)，按著寫好的視圖模版生成 HTML 標(biāo)簽，然后追加到 DOM 樹中顯示 - 2.數(shù)據(jù)雙向綁定
雙向綁定則可以實現(xiàn)模型數(shù)據(jù)和視圖模版的雙向傳遞
單向數(shù)據(jù)綁定的幾種方式
- 1.插值語法{{屬性}}：會閃爍 可以綁定多個值
- 2.ng-bind = '屬性'：不會閃爍 只能綁定一個值
- 3.ng-bind-template:不會閃爍，可以綁定多個值
- ng-cloak ：防止閃爍
- 需要在 style 標(biāo)簽內(nèi)添加 [ng-cloak]選擇說行有 ng-cloak 的元素
[ng-cloak]{display:none}
雙向數(shù)據(jù)綁定
<body ng-app="app" ng-controller="skController">
<!--視圖數(shù)據(jù)綁定模型屬性-->
<input type="text" ng-model="name">
<!--模型數(shù)據(jù)修改視圖-->
<p>{{name}}</p>
</body>
<script src="angular.js"></script>
<script>
//雙向綁定: 模型和視圖的雙向傳遞,
//模型數(shù)據(jù)綁定到視圖
//視圖數(shù)據(jù)可以綁定到模型中
//想要實現(xiàn)視圖數(shù)據(jù)綁定到模型, 必須借助表單
//在表單中使用 ng-model='屬性名稱', input標(biāo)簽中綁定屬性
//1.創(chuàng)建模塊
var app = angular.module('app', []);
//2.創(chuàng)建控制器
app.controller('skController', ['$scope',function ($scope) {
$scope.name = 'sk666';
}]);
//3.綁定模塊 ng-app='app'
//4.綁定控制器
</script>
MVVM
- MVVM 是 Model-View-ViewModel 的縮寫
MVVM 最早由微軟提出來，它借鑒了桌面應(yīng)用程序的 MVC 思想，在前端頁面中，把 Model 用 純 JavaScript 對象表示， View 負責(zé)顯示，兩者做到了最大限度的分離
把 Model 和 View 關(guān)聯(lián)起來的就是 ViewModel。ViewModel 負責(zé)把 Model 的數(shù)據(jù)同步到 View 顯示出來，還負責(zé)把 View 的修改同步回 Model。
