angular的好處
1、節(jié)省勞動(dòng)力
2蜂筹、減少DOM操作
angular的特點(diǎn)
1需纳、具備模塊化
2、雙向綁定
3艺挪、依賴注入
正常使用angular的步驟
1不翩、引用文件
2、定義angular的模塊
var app=angular.module('模塊名',[]);
ng-app="模塊名"
3、定義控制器
app.controller('控制器名稱',function($scope){
})
ng-controller="控制器的名稱"
指令 directive? ? ? 擴(kuò)展HTML的語法或者功能
ng-app
ng-model
ng-init
ng-bind
ng-repeat
ng-show
ng-hide
ng-controller
ng-src
ng-style
ng-class
ng-click
自定義指令
唯一操作DOM的地方
app.directive('指令名',function () {
return function (scope,element,attr) {
//scope 此指令對(duì)象的作用域,可以掛屬性,方法
//element 小型jq對(duì)象
//attr 對(duì)象身上的屬性
}
});
----------------------------------
app.directive('指令名',function () {
return {
link:function (scope,element,attr) {
}
}
});
----------------------------------------
return {
link:function (scope,element,attr) {
element.css('background','red');
},
restrict:'ECMA',
//E? element 元素
//C? class 樣式
//M? comment 注釋
使用的時(shí)候必須配合replace 和 template使用
//A? attribute 屬性
template:'',
templateUrl:'地址'
注意:a)外部html 文件
b) 內(nèi)部script標(biāo)簽
type="text/ng-template"? id
}
過濾器 filter
{{a|過濾器名稱:參數(shù)}}
currency
date
limitTo
lowercase
uppercase
number
orderBy
filter
自定義過濾器
app.filter('過濾器名稱',function(){
return function(s){
//s 要過濾的東西
return
}
})
交互
$http({
url:'a.txt',
method:'GET'
}).then(function (res) {
alert(res.data)
},function (err) {
})