一直在學(xué)vue，react和koa，然后最近接受的項(xiàng)目居然是angular和express，剛開(kāi)始?jí)毫ι酱?，做?xiàng)目的過(guò)程中才發(fā)現(xiàn)：用vue和react做過(guò)項(xiàng)目后，用angular寫(xiě)項(xiàng)目有很多相通的東西；用koa踩過(guò)node層的坑以后，用express也是大同小異。
其實(shí)最為核心的部分是：前端基本功，后端基本功。具體是什么這里就不贅述了。下面將開(kāi)始記錄自己這段時(shí)間，踩過(guò)的angular1.6.5的坑。
1.model層數(shù)據(jù)更新，而view層視圖不更新
setTimeout(function(){
$scope.$apply(function(){
$scope.foo = "foo";
$scope.bar = JSON.parse(JSON.stringify({"key":"value"}))//deepCopy
$scope.baz = Object.assign({},{"key",value})//shallowCopy
})
},500)
2.標(biāo)簽過(guò)濾功能如何實(shí)現(xiàn)
數(shù)據(jù)已經(jīng)緩存到本地，數(shù)據(jù)搜索僅僅是對(duì)前端數(shù)據(jù)層的過(guò)濾，不涉及與后端的異步通信。
ng-repeat="item in list | filter:{name:currentUser}"
3.angular通過(guò)什么分發(fā)內(nèi)容
directive機(jī)制。
.directive('dirList',[function(){
return {
retrict: 'E',
replace: 'true',
templateUrl: 'views/appDirList.html'
}
}])
其中的retrict:'E'可以使得駝峰式的dirList轉(zhuǎn)換為橫線式的<dir-list></dir-list>，這個(gè)算法在vue源碼中也有相應(yīng)實(shí)現(xiàn)。
4.如何查看當(dāng)前0).scope()`
更加高效的方式，使用chrome擴(kuò)展：
ng-inspector for AngularJS
ng-inspector for Angular
5.ng-if，ng-hide/ng-show有什么異同？
ng-if會(huì)從DOM樹(shù)上移除元素。這意味著你的所有事件處理函數(shù)以及其他任何附加在被移除元素上的東西都會(huì)丟失。例如，如果你綁定了一個(gè)事件處理函數(shù)到它的一個(gè)子元素，當(dāng)ng-if是false，這個(gè)元素將會(huì)從DOM移除，而且你的單擊事件處理器也會(huì)失效，即使后面ng-if又再次計(jì)算成true并且將元素展示了出來(lái)，但是你的事件處理函數(shù)不會(huì)還原，需要重新為元素添加事件。
ng-show/ng-hide不會(huì)從DOM移除元素。它使用CSS的樣式去控制元素的顯示。（提示：你可能需要添加自己的class）。這種方式你添加在子元素上的事件處理函數(shù)不會(huì)丟失。
ng-if會(huì)創(chuàng)建一個(gè)子作用域，而ng-show和ng-hide不會(huì)。
不再DOM中的元素性能影響比較小，而且你的web應(yīng)用在使用ng-if后會(huì)比ng-show/ng-hide更快。按照我的經(jīng)驗(yàn)來(lái)說(shuō)，這種區(qū)別是完全可以忽略的。動(dòng)畫(huà)會(huì)既使用ng-show/ng-hide又使用ng-if，這些在angular的文檔中有。
參考：https://stackoverflow.com/questions/21869283/when-to-favor-ng-if-vs-ng-show-ng-hide#
6.ng-show不生效
ng-show="{{middlewareShow}}"
這樣寫(xiě)會(huì)導(dǎo)致僅僅更新ng-show的值，但是背后的事件處理函數(shù)不會(huì)觸發(fā)。
ng-show="middlewareShow"
只有去掉花括號(hào)，才能正常觸發(fā)事件處理函數(shù)，達(dá)到我們的目的。
7.angular中每一個(gè)controller都有獨(dú)立的$scope
當(dāng)前controller若想獲取其他controller的數(shù)據(jù)，可以通過(guò)如此方式
- sessionStorage 推薦
- ui-router($stateParams) 推擠
- rootScope
- service
- eventbus
期待和大家交流，共同進(jìn)步，歡迎大家加入我創(chuàng)建的與前端開(kāi)發(fā)密切相關(guān)的技術(shù)討論小組：
- SegmentFault技術(shù)圈:ES新規(guī)范語(yǔ)法糖
- SegmentFault專欄：趁你還年輕，做個(gè)優(yōu)秀的前端工程師
- 知乎專欄：趁你還年輕，做個(gè)優(yōu)秀的前端工程師
- Github博客: 趁你還年輕233的個(gè)人博客
- 前端開(kāi)發(fā)QQ群：660634678
微信公眾號(hào)： 人獸鬼 / excellent_developers
努力成為優(yōu)秀前端工程師！
