1. 作用域?qū)蛹?jí)

• ng-controller指令會(huì)調(diào)用scope的$new()方法創(chuàng)造一個(gè)scope的實(shí)例$scope（作用域?qū)嵗?#xff09;。
• Angular擁有$rootScope，它是其他所有作用域的父級(jí)作用域，將會(huì)在應(yīng)用啟動(dòng)（加載模塊）時(shí)自動(dòng)創(chuàng)建。
• 變量會(huì)沿著作用域向下繼承。（也就是說子作用域可以訪問到父作用域的變量等）
• $scope會(huì)擁有$parent屬性，這個(gè)屬性會(huì)指向父級(jí)作用域。
• 每個(gè)作用域?qū)嵗?#xff08;$scope）都有$on方法，用來注冊(cè)作用域事件的處理器。

2. 路由

• 原理：
  
  • 哈希#
  • HTML5中新的history API
• 作用：
  
  • 防止瀏覽器向后臺(tái)發(fā)起請(qǐng)求
  • 為angular提供識(shí)別標(biāo)識(shí)
  • angular會(huì)獲取到當(dāng)前url并且將#后面的字段截取到與when()中參數(shù)進(jìn)行比較。

感覺路由很像ajax刷新局部頁面，經(jīng)過試驗(yàn)在network里果然發(fā)現(xiàn)了xhr請(qǐng)求

3. angular模塊

• angular自身提供了模塊化功能
• 在angular中一切都是從模塊開始，通過注入依賴將很多個(gè)模塊鏈接起來，形成一個(gè)大的模塊。
• 如果有多個(gè)控制器，而每個(gè)控制器負(fù)責(zé)不同的功能但是卻有部分相同的代碼邏輯需求怎么辦？
  
  • 通過angular中的服務(wù)解決。
  • 可以把服務(wù)當(dāng)做一個(gè)單獨(dú)模塊，然后給需要的控制器們注入依賴，就可以在它們里面使用注冊(cè)過的服務(wù)了。
• 官方推薦的模塊切分：如下目錄結(jié)構(gòu)（個(gè)人理解）

官方版如下：

. app|----------------------------------------------- | | | | | controllers directives services routes filters

4. angular中的bind和表達(dá)式

功能：都是將視圖和數(shù)據(jù)進(jìn)行雙向的綁定。

區(qū)別：表達(dá)式有一個(gè)缺點(diǎn)：當(dāng)網(wǎng)速比較慢或者刷新比較快時(shí)是能夠看到表達(dá)式本身的。

解決方案：

• 表達(dá)式對(duì)應(yīng)的添加類名’ng-cloak’。
• 在主頁面用ng-bind其他的模板頁面（片段html）用表達(dá)式。

5. 指令

• 指令執(zhí)行的三個(gè)階段 & compile和link：

  • 加載階段：加載angular.js，找到ng-app指令，確定應(yīng)用的邊界
  • 編譯階段：
    
    • 遍歷DOM，找到所有指令；
    • 根據(jù)指令代碼中的template、replace、transclue轉(zhuǎn)換DOM結(jié)構(gòu)
    • 如果存在compile函數(shù)則調(diào)用
  • 鏈接階段：
    
    • 對(duì)每一條指令運(yùn)行l(wèi)ink函數(shù)
    • link函數(shù)一般用來操作DOM，綁定事件監(jiān)聽器
  • 關(guān)于compile和link：、
    
    • compile函數(shù)用來對(duì)模板自身進(jìn)行轉(zhuǎn)換，而link函數(shù)負(fù)責(zé)在模型和視圖之間進(jìn)行動(dòng)態(tài)關(guān)聯(lián)；
    • 作用域在鏈接階段才會(huì)被綁定到編譯之后的link函數(shù)上
    • compile函數(shù)僅僅在編譯階段運(yùn)行一次，而對(duì)于指令的每個(gè)實(shí)例，link函數(shù)都會(huì)執(zhí)行一次
    • compile可以返回preLink和postLink函數(shù)，而link函數(shù)只會(huì)返回postLink函數(shù)
    • 如果需要修改DOM結(jié)構(gòu)，應(yīng)該在postLink中來做這件事情，而如果在preLink中做這件事情會(huì)導(dǎo)致錯(cuò)誤
    • 大多數(shù)時(shí)候我們只要編寫link函數(shù)即可

• link相關(guān)

  • 解釋：當(dāng)directive被angular 編譯后，執(zhí)行該方法。
  • link后跟隨的方法中的參數(shù)解釋：
    
    • scope:angular中的scope對(duì)象
    • element:當(dāng)前觸發(fā)函數(shù)的元素
    • attrs:attrs是個(gè)map，內(nèi)容是你這個(gè)directive上的所有屬性
  • 當(dāng)directive中只有一個(gè)link函數(shù)可以直接返回匿名function

創(chuàng)建controller和directive的時(shí)候，會(huì)自動(dòng)創(chuàng)建自己的私有scope對(duì)象，私有scope從rootScope繼承.

在默認(rèn)的情況下，directive不會(huì)創(chuàng)建他們自己的scope.他們會(huì)用他們父對(duì)象的scope作為自己的scope. 但是 angularjs 允許改變這種默認(rèn)行為。

注釋做自定義指令的注意點(diǎn)

自定義中小駝峰命名的要在注釋中改為用’-‘連接的方式。

通過注釋執(zhí)行命令時(shí)要注意前面帶有derective：字樣，效果如下：

還有一點(diǎn)，經(jīng)過實(shí)驗(yàn)不能用大駝峰命名指令

<div ng-app="apps"><!--directive:my-de --> </div> let apps=angular.module('apps',[]);apps.directive('myDe',() => {return{restrict:'M',replace:true,template:'<h1>dgfrhfgdh</h1>'}})

8. derective下的scope對(duì)象

false：會(huì)使用父對(duì)象的scope對(duì)象（默認(rèn)）

true：會(huì)創(chuàng)造一個(gè)新scope對(duì)象繼承父對(duì)象的scope對(duì)象（像js里父類子類繼承），也就是擁有了和父級(jí)一樣卻不會(huì)相互影響的scope對(duì)象。

{}：創(chuàng)造一個(gè)全新隔離的scope空對(duì)象，指令間互不影響。（如果只想用父級(jí)scope中某些屬性方法，可以用下面的傳值）

有三種方法把值從parent 對(duì)象中傳遞到 directive 中。

通過 @ 傳值 （字符串綁定，one way binding(單向綁定）,就是傳遞字符串到directive 進(jìn)行顯示)，在調(diào)用directive 的時(shí)候，需要對(duì) attribute 使用 {{}} 進(jìn)行傳值。

通過 = 傳值 (模型 綁定， two way bingding（雙向綁定）） 在調(diào)用directive 的時(shí)候，需要對(duì) attribute 使用 模型名稱 進(jìn)行傳值。

通過 &　傳值 （方法綁定）

實(shí)際上給我感覺都是用屬性去接收。

7. ng-include和ng-view

功能：都可以插入html片段

區(qū)別：

ng-include用于重用重復(fù)的html片段，比如header區(qū)。

ng-view則和路由搭配，方便視圖控制。

ng-include用法示例：

<div ng-include="'header.html'">

8. survice的特性

Service都是單例的

Service由$injector負(fù)責(zé)實(shí)例化

Service在整個(gè)應(yīng)用的生命周期中存在，可以用來共享數(shù)據(jù)

在需要使用的地方利用依賴注入機(jī)制注入Service

自定義的Service需要寫在內(nèi)置的Service后面

內(nèi)置Service的命名以$符號(hào)開頭，自定義Service應(yīng)該避免

Service，Factory，Provider本質(zhì)上都是Provider

9.templateUrl和template:$templateCache

• 兩者都可以復(fù)用同一套模板，那么實(shí)際應(yīng)用中有什么區(qū)別呢？
  
  • angular的模板獲取：AngularJS的模板tpl通過XHR下載
  • 在實(shí)際中，如果使用templateUrl會(huì)默認(rèn)需要時(shí)從規(guī)定的路徑去取。實(shí)際上一個(gè)模板如果被重復(fù)需要，就會(huì)重復(fù)請(qǐng)求獲取。而使用template:$templateCache可以允許$http 服務(wù)緩存經(jīng)過XHR的模板請(qǐng)求，這樣它們就只會(huì)被請(qǐng)求一次。當(dāng)一個(gè)模板被取到了，它的內(nèi)容就會(huì)存儲(chǔ)在 $templateCache 中。

10.directive中template下的replace和transclude的用法

replace：是否替換自定義指令元素中所寫的內(nèi)容（true/false）

transclude：按要求合并，看示例：

template: "<div>Hello everyone!<div ng-transclude></div></div>" //自定義指令元素內(nèi)部寫的內(nèi)容替換到ng-transclude里面去

11. ui.router

方法

• go(to,params,options)
• to：(string)，即將跳轉(zhuǎn)的狀態(tài)。
• params:(object)，跳轉(zhuǎn)所帶的參數(shù)。
• options：(object)，可選配置對(duì)象。有l(wèi)ocation(是否更新地址欄的url，或以什么字符串替換url)，inherit(是否繼承當(dāng)前url的參數(shù))，relative(url相對(duì)路徑：如”^”,指代相對(duì)的父級(jí)，”.”指代相對(duì)的子級(jí))，notify(是否廣播$stateChangeStart和\$stateChangeSuccess事件)，reload(是否重新載入)。

go方法表現(xiàn)是重新走路由配置（根據(jù)state）

$state.go('xxx');

• reload(state):重新載入當(dāng)前狀態(tài)的方法。
  
  • state：一個(gè)狀態(tài)名稱或者狀態(tài)對(duì)象。

reload方法表現(xiàn)是在原有view中重載指定路由的請(qǐng)求

$state.reload('xxx');

• get(stateOrName,context)：返回任何指定的狀態(tài)或所有狀態(tài)的配置對(duì)象。

  • stateOrName：如果提供此參數(shù)，返回的是指定狀態(tài)的配置對(duì)象；如果不提供此參數(shù)，則返回全部狀態(tài)的配置對(duì)象。

  • context：當(dāng)context是一個(gè)相對(duì)的參考狀態(tài)，狀態(tài)會(huì)在相關(guān)上下文中檢索。

  • 屬性
• current

• params

• 事件
• $stateChangeError:路由狀態(tài)變化發(fā)生錯(cuò)誤時(shí)觸發(fā)的事件.
• $stateChangeStart:路由狀態(tài)變化發(fā)生前觸發(fā)的事件.
• $stateChangeSuccess:路由狀態(tài)變化正確時(shí)觸發(fā)的事件.
• $stateNotFound:路由狀態(tài)沒找到的時(shí)候觸發(fā)的事件.

在$rootScope.$on()中監(jiān)聽事件變化

$rootScope.$on('xxx事件',function(){your code ... })

其他

$urlRouterProvider：負(fù)責(zé)監(jiān)聽$location.當(dāng)$location變化的時(shí)候，$urlRouterProvider開始在一個(gè)規(guī)則的列表中一個(gè)個(gè)的查找，直到找到匹配的值。$urlRouterProvider用于在后端指定url的狀態(tài)配置。所有的url被編譯成UrlMatcher對(duì)象。

state(name,stateConfig)：注冊(cè)一個(gè)狀態(tài)，并給定其配置。

otherwise();定義一個(gè)當(dāng)請(qǐng)求的路徑是無效路徑時(shí)跳轉(zhuǎn)的路徑（可用來呈現(xiàn)默認(rèn)路由對(duì)應(yīng)的視圖）。

$stateProvider：處理路由狀態(tài)的服務(wù)，路由的狀態(tài)反映了該項(xiàng)在應(yīng)用程序中的位置，描述了在當(dāng)前狀態(tài)下UI是應(yīng)該怎么樣的，并且該做什么。

12. 事件廣播

一般共享的方法放在服務(wù)中通過注入使用…

發(fā)送消息： $scope.$emit(name, data) 或者 $scope.$broadcast(name, data);

接收消息： $scope.on(name,function(event,data){ });

區(qū)別： $emit 廣播給父controller $broadcast 廣播給子controller

在$on的方法中的event事件參數(shù)，其對(duì)象的屬性和方法如下：

事件屬性目的

event.targetScope	發(fā)出或者傳播原始事件的作用域
event.currentScope	目前正在處理的事件的作用域
event.name	事件名稱
event.stopPropagation()	一個(gè)防止事件進(jìn)一步傳播(冒泡/捕獲)的函數(shù)(這只適用于使用$emit發(fā)出的事件)
event.preventDefault()	這個(gè)方法實(shí)際上不會(huì)做什么事，但是會(huì)設(shè)置defaultPrevented為true。直到事件監(jiān)聽器的實(shí)現(xiàn)者采取行動(dòng)之前它才會(huì)檢查defaultPrevented的值。
event.defaultPrevented	如果調(diào)用了preventDefault則為true

總結(jié)

以上是生活随笔為你收集整理的AngularJs的一些知识点-1的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。