因為公司有幾個老的項目都是由我維護和優(yōu)化的,那幾個項目都是用到angular1.x的版本,所以最近也在復(fù)習(xí)angular一些舊的知識,可能理解的還不夠.
$semit $broadcast $on
$semit 子傳父 $broadcast父傳子 和$on監(jiān)聽或接收數(shù)據(jù)
$semit 和 $broadcast 需要觸發(fā)調(diào)用,$on可以直接使用
自定義指令
app.directive("hello",function () {
return{
restrict:"EA", //這里固定大寫常用的是EA,e就是標簽,a就是屬性
template:"<h1>我就是hello</h1>", //不加url就是片段,加url就是路徑
replace:true, //是否替換
scope:{
} //獨立作用域
}
});
自定義指令上的傳遞數(shù)據(jù) @ = &
app.directive("hello",function () {
return{
restrict:"EA", //這里固定大寫常用的是EA,e就是標簽,a就是屬性
template:"<h1>我就是hello</h1>", //不加url就是片段,加url就是路徑
replace:true, //是否替換
scope:{
data:"@" //把當前屬性作為字符串傳遞,可以綁定外層的scope的值,在屬性中插入{{}}即可
data:"=" //可以雙向綁定父scope的屬性,不用加{{}}
data:"&" //傳遞父scope上面的一個函數(shù)
} //獨立作用域
}
});
ng-transclude
html:
<hello><p>我是hello原本的東西</p></hello>
js:
app.directive("hello",function () {
return{
restrict:"EA",
transclude:true, //保留標簽原有內(nèi)容
template:"<div>我是替換的內(nèi)容<div ng-transclude></div></div>",
}
});
$templateCache把模板緩存起來
var app = angular.module("app",["ui.router"]); //創(chuàng)建模塊并且引入ui.router
//配置一個路由塊
app.run(function ($templateCache) {
$templateCache.put("hello","<div>hello everyone!!!!</div>") //把模板緩存,命名為hello
});
app.directive("hello",function ($templateCache) {
return{
restrict:"EA",
template:$templateCache.get('hello'), //從緩存獲取hello
replace:true
}
});
指令的三個階段
1 加載階段 加載angular.js,找到ng-app指令,確定應(yīng)用的邊界
2 編譯階段 遍歷dom節(jié)點,找到所有的指令,根據(jù)指令代碼中的template,replace,transclue轉(zhuǎn)換dom結(jié)構(gòu),如果存在compile函數(shù)會調(diào)用
3 連接階段 運行每條指令的link函數(shù),可以在link里面操作dom節(jié)點,其他地方盡量不要,綁定事件
在link階段綁定事件:
html:
<hello><p>我是hello原本的東西</p></hello>
js:
var app = angular.module("app",["ui.router"]); //創(chuàng)建模塊并且引入ui.router
//配置一個路由塊
app.controller("appController",["$scope",function ($scope) {
$scope.tell = function () {
console.log("aaaa");
}
}]);
app.directive("hello",function () {
return{
restrict:"EA",
link:function (scope,element,attr) { //attr可以獲取到指令上面的屬性
element.on("mouseenter",function () {
scope.tell(); //直接調(diào)用
scope.$appyl("tell()"); //通過$apply調(diào)用
})
},
controller:"appController"
}
});
$scope和$rootscope
$scope是一個的對象,$scope提供了一些屬性和方法,也可以在$scope上面添加一些屬性的方法,$scope是一個作用域,是一個樹型結(jié)構(gòu),和dom平行,子$scope可以繼承父$scope上面的屬性和方法.
$rootscope 是angular模型上的根對象,一個angular對象上只有一個跟對象
路由
ngRoute
html:
<div ng-view></div> //路由視圖
js:
var app = angular.module("app",["ngRoute"]);
//配置一個路由塊
app.config(function ($routeProvider) {
$routeProvider.when("/p1",{
templateUrl:"view/p1.html", //帶上url就可以填入網(wǎng)頁地址,不帶上url就是填入html片段
controller:"p1Controller" //這個頁面的控制器
}).when("/p2",{
templateUrl:"view/p2.html",
controller:"p2Controller"
}).otherwise({ //其余情況都指向/p1
redirectTo:"/p1"
})
});
ui-router
html:
<div ui-view></div>
<div ui-view="123"></div>
<div ui-view="456"></div>
js:
var app = angular.module("app",["ui.router"]); //創(chuàng)建模塊并且引入ui.router
//配置一個路由塊
app.config(["$stateProvider","$urlRouterProvider",function ($stateProvider,$urlRouterProvider) {
$stateProvider.state("p1",{
url:"/p1", //路由地址
views:{
"":{ //view的名稱,空就是ui-view
templateUrl:"view/p1.html"
},
"123":{ //ui-view='123'
templateUrl:"view/p2.html"
},
"456":{ //ui-view='456'
template:"<h1>456</h1>"
}
}
});
$urlRouterProvider.otherwise("/p1");
}]);
ui-sref可以給標簽綁定哈希,點擊該便簽會給瀏覽器帶上哈希使路由跳轉(zhuǎn)
數(shù)據(jù)綁定"{{}}" "ng-bind"
用"{{}}"雙括號語法實現(xiàn)數(shù)據(jù)展示和
ng-bind 實現(xiàn)數(shù)據(jù)綁定不會出現(xiàn)"{{}}"
首頁一般使用ng-bind,其他地方可以使用雙括號語法,雙括號語法也有辦法加載的時候不會出現(xiàn)閃爍,使用ng-cloak,在style里面加上[ng-cloak]{display:none}就可以了
