MVC????后臺
M Module 數(shù)據(jù)層
V View 視圖層
C Controller 控制層
前端開始用MVC
M 數(shù)據(jù)層 交互
V 視圖層 DOM操作
C 控制層 邏輯
不用原生寫MVC
????1.不是所有人都懂MVC毁菱，用人需求變高。
????2.風(fēng)格不統(tǒng)一
庫和框架的區(qū)別?
庫 輔助程序員開發(fā) JQuery
框架 限制程序員開發(fā) Angular
AngularJS
????MVVM的框架
????Angular火锌历。有人在推贮庞，Google
????用的人少了，自己作究西。更新窗慎。
????????主版本.次版本.修訂號
1.2.x
玩法直接變了
1.3.x
javascript
2.x
TypeScript
????本質(zhì)還是MVC，只不過衍生出很多叫法
????????MVC
????????MVVM
????????MVP
????????MV*
????面向過程
????面向?qū)ο?br>
????面向數(shù)據(jù)
????致力于解決所有交互所帶來的痛苦卤材。
????????只需要關(guān)心數(shù)據(jù)就行遮斥。
????官網(wǎng):https://angularjs.org/
????下載:https://code.angularjs.org/
????文檔:https://code.angularjs.org/1.5.8/docs/api
Function????????Angular提供的方法
angular.bind 矯正this
angular.bootstrap 開啟angular應(yīng)用
angular.copy 復(fù)制對象
angular.element 小jquery
angular.equals 比較是否相等
angular.forEach 迭代
angular.fromJson
angular.isArray 檢測是否是數(shù)組
angular.module angular模塊
????玩的就是數(shù)據(jù)——數(shù)據(jù)就是一切
ng-app 哪是angular管的
一個頁面只能加一個
ng-model 數(shù)據(jù)源
ng-bind 數(shù)據(jù)綁定
ng-bind平時用的少。
用:{{}}
angular的核心:
????依賴注入扇丛、雙向綁定
Directive????指令
ng-app
ng-model
ng-bind
ng-init 初始化
ng-click 點擊
ng-repeat 迭代
{{$index}} 索引
{{$first}} 是否是第一行
{{$last}} 是否是最后一樣
{{$even}} 是否是奇數(shù)行
{{$odd}} 是否是偶數(shù)行
????數(shù)組有重復(fù)會有問題：
????????原因：默認(rèn)把值當(dāng)成索引了术吗。
????解決：
????????ng-repeat="item in arr track by $index"
ng-show 顯示
ng-hide 隱藏
ng-if 如果是真的就顯示，否則就已隱藏
ng-controller 控制器
????環(huán)境:
????????原生環(huán)境
????????NG環(huán)境
Controller????????控制器
let app = angular.module('名字',[依賴]);
app.controller('控制名字',($scope)=>{
$scope 當(dāng)前控制器的域
});
Filter????????過濾器
{{item.price|currency}}
currency 貨幣
{{item.price|currency:'￥'}}
date 日期
filter 過濾器
limitTo 限制數(shù)量
number 1004354548
Angular的問題
????數(shù)據(jù)變了帆精，但是DOM沒有渲染
????解決:
????????臟檢查
Service???????? 服務(wù)
????$interval ???? 定時器
????$timeout ???? 定時器
交互
$http服務(wù)
GET
$http.get('url',{
params:{
參數(shù)
}
}).then((res)=>{
res.data 數(shù)據(jù)
},(err)=>{
});
POST
$http({
method:'POST',
url:'',
data:{
參數(shù)
},
headers:{
'Content-Type':'application/x-www-form-urlencoded'
},
transformRequest:function(data){
var arr = [];
for(var key in data){
arr.push(key+'='+data[key]);
}
return arr.join('&');
}
}).then((res)=>{
res.data 數(shù)據(jù)
},(err)=>{
});
