1. 作用域層級

• ng-controller指令會調用scope的$new()方法創造一個scope的實例$scope（作用域實例）。
• Angular擁有$rootScope，它是其他所有作用域的父級作用域，將會在應用啟動（加載模塊）時自動創建。
• 變量會沿著作用域向下繼承。（也就是說子作用域可以訪問到父作用域的變量等）
• $scope會擁有$parent屬性，這個屬性會指向父級作用域。
• 每個作用域實例（$scope）都有$on方法，用來注冊作用域事件的處理器。

2. 路由

• 原理：
  
  • 哈希#
  • HTML5中新的history API
• 作用：
  
  • 防止瀏覽器向后臺發起請求
  • 為angular提供識別標識
  • angular會獲取到當前url并且將#后面的字段截取到與when()中參數進行比較。

感覺路由很像ajax刷新局部頁面，經過試驗在network里果然發現了xhr請求

3. angular模塊

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

官方版如下：

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

4. angular中的bind和表達式

功能：都是將視圖和數據進行雙向的綁定。

區別：表達式有一個缺點：當網速比較慢或者刷新比較快時是能夠看到表達式本身的。

解決方案：

• 表達式對應的添加類名’ng-cloak’。
• 在主頁面用ng-bind其他的模板頁面（片段html）用表達式。

5. 指令

• 指令執行的三個階段 & compile和link：

  • 加載階段：加載angular.js，找到ng-app指令，確定應用的邊界
  • 編譯階段：
    
    • 遍歷DOM，找到所有指令；
    • 根據指令代碼中的template、replace、transclue轉換DOM結構
    • 如果存在compile函數則調用
  • 鏈接階段：
    
    • 對每一條指令運行link函數
    • link函數一般用來操作DOM，綁定事件監聽器
  • 關于compile和link：、
    
    • compile函數用來對模板自身進行轉換，而link函數負責在模型和視圖之間進行動態關聯；
    • 作用域在鏈接階段才會被綁定到編譯之后的link函數上
    • compile函數僅僅在編譯階段運行一次，而對于指令的每個實例，link函數都會執行一次
    • compile可以返回preLink和postLink函數，而link函數只會返回postLink函數
    • 如果需要修改DOM結構，應該在postLink中來做這件事情，而如果在preLink中做這件事情會導致錯誤
    • 大多數時候我們只要編寫link函數即可

• link相關

  • 解釋：當directive被angular 編譯后，執行該方法。
  • link后跟隨的方法中的參數解釋：
    
    • scope:angular中的scope對象
    • element:當前觸發函數的元素
    • attrs:attrs是個map，內容是你這個directive上的所有屬性
  • 當directive中只有一個link函數可以直接返回匿名function

創建controller和directive的時候，會自動創建自己的私有scope對象，私有scope從rootScope繼承.

在默認的情況下，directive不會創建他們自己的scope.他們會用他們父對象的scope作為自己的scope. 但是 angularjs 允許改變這種默認行為。

注釋做自定義指令的注意點

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

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

還有一點，經過實驗不能用大駝峰命名指令

<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對象

false：會使用父對象的scope對象（默認）

true：會創造一個新scope對象繼承父對象的scope對象（像js里父類子類繼承），也就是擁有了和父級一樣卻不會相互影響的scope對象。

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

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

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

通過 = 傳值 (模型 綁定， two way bingding（雙向綁定）） 在調用directive 的時候，需要對 attribute 使用 模型名稱 進行傳值。

通過 &　傳值 （方法綁定）

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

7. ng-include和ng-view

功能：都可以插入html片段

區別：

ng-include用于重用重復的html片段，比如header區。

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

ng-include用法示例：

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

8. survice的特性

Service都是單例的

Service由$injector負責實例化

Service在整個應用的生命周期中存在，可以用來共享數據

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

自定義的Service需要寫在內置的Service后面

內置Service的命名以$符號開頭，自定義Service應該避免

Service，Factory，Provider本質上都是Provider

9.templateUrl和template:$templateCache

• 兩者都可以復用同一套模板，那么實際應用中有什么區別呢？
  
  • angular的模板獲取：AngularJS的模板tpl通過XHR下載
  • 在實際中，如果使用templateUrl會默認需要時從規定的路徑去取。實際上一個模板如果被重復需要，就會重復請求獲取。而使用template:$templateCache可以允許$http 服務緩存經過XHR的模板請求，這樣它們就只會被請求一次。當一個模板被取到了，它的內容就會存儲在 $templateCache 中。

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

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

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

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

11. ui.router

方法

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

go方法表現是重新走路由配置（根據state）

$state.go('xxx');

• reload(state):重新載入當前狀態的方法。
  
  • state：一個狀態名稱或者狀態對象。

reload方法表現是在原有view中重載指定路由的請求

$state.reload('xxx');

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

  • stateOrName：如果提供此參數，返回的是指定狀態的配置對象；如果不提供此參數，則返回全部狀態的配置對象。

  • context：當context是一個相對的參考狀態，狀態會在相關上下文中檢索。

  • 屬性
• current

• params

• 事件
• $stateChangeError:路由狀態變化發生錯誤時觸發的事件.
• $stateChangeStart:路由狀態變化發生前觸發的事件.
• $stateChangeSuccess:路由狀態變化正確時觸發的事件.
• $stateNotFound:路由狀態沒找到的時候觸發的事件.

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

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

其他

$urlRouterProvider：負責監聽$location.當$location變化的時候，$urlRouterProvider開始在一個規則的列表中一個個的查找，直到找到匹配的值。$urlRouterProvider用于在后端指定url的狀態配置。所有的url被編譯成UrlMatcher對象。

state(name,stateConfig)：注冊一個狀態，并給定其配置。

otherwise();定義一個當請求的路徑是無效路徑時跳轉的路徑（可用來呈現默認路由對應的視圖）。

$stateProvider：處理路由狀態的服務，路由的狀態反映了該項在應用程序中的位置，描述了在當前狀態下UI是應該怎么樣的，并且該做什么。

12. 事件廣播

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

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

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

區別： $emit 廣播給父controller $broadcast 廣播給子controller

在$on的方法中的event事件參數，其對象的屬性和方法如下：

事件屬性目的

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。