AngularJS學習筆記(一) AngularJS執行流程

来源:http://www.cnblogs.com/LingShi/archive/2017/02/17/6409035.html
-Advertisement-
Play Games

AngularJS學習筆記(一) AngularJS執行流程 一.啟動階段 瀏覽器解析HTML頁面,讀取到angular.js的<script>標簽後會停止解析後面的DOM節點,開始執行angular.js,與此同時,Angular會設置一個事件監聽器來監聽DOMContentLoaded事件,當A ...


AngularJS學習筆記(一)  AngularJS執行流程

 

一.啟動階段

  瀏覽器解析HTML頁面,讀取到angular.js的<script>標簽後會停止解析後面的DOM節點,開始執行angular.js,與此同時,Angular會設置一個事件監聽器來監聽DOMContentLoaded事件,當Angular監聽到這個事件後,Angular就啟動了。

 

二.初始化階段

  Angular啟動後,它會查找ng-app指令,然後初始化一系列必要的組件(即$injector、$compile服務以及$rootScope),接著繼續解析DOM。

 

三.編譯、鏈接階段

  1.Angular使用$compile服務通過遍歷DOM樹的方式查找帶有指令的DOM元素,然後根據指令的priority優先順序對這些查找到的指令進行排序。

  2.之後使用$injector服務查找和收集每個指令下麵的compile函數,並執行它。

  3.每個節點的compile方法運行之後,$compile服務就會調用鏈接函數。這個鏈接函數為綁定了封閉作用域的指令設置監控。這一行為會創建實時視圖。

  4.以上所有完成後,Angular啟動完成

 

四.運行階段

   Angular提供了自己的事件迴圈。指令自身會註冊事件監聽器,因此當事件被觸發時,指令函數就會運行在AngularJS的$digest迴圈中。$digest迴圈會等待$watch表達式列表,當檢測到模型變化後,就會調用$watch函數,然後再次查看$watch列表以確保沒有模型被改變。一旦$digest迴圈穩定下來,並且檢測到沒有潛在的變化了,執行過程就會離開Angular上下文並且通常會回到瀏覽器中。

 

 

(參考:https://my.oschina.net/brant/blog/419641)

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ECMAScript中所有函數的參數都是按值傳遞的,簡單講就是函數外部的值 複製給函數內部的參數,就和把值從一個變數複製到另一個變數一樣。切記訪問變數有按值訪問和按引用訪問,而參數只能按值傳遞。 在向參數傳遞基本類型的值時,被傳遞的值會被覆制給一個局部變數(可以把ECMAScript函數中的參數想象 ...
  • 1.Chrome自動填充的input背景為黃色: box-shadow 向框添加陰影,預設是在框外面,inset改為向內添加。 box-shadow :H水平偏移量 V垂直偏移量 B模糊尺寸 S陰影尺寸 C陰影顏色 O/I內外影; 看陰影效果,先確定陰影尺寸,再確定偏移距離。 2.input獲得焦點 ...
  • 製作了一份jQuery 3.1 參考手冊.CHM離線版供大家使用 點擊下載 預覽一下 ...
  • ▓▓▓▓▓▓ 大致介紹 我們寫好文件後添加到版本庫,但是這樣還沒有做完,我們還需要將它同步到GitHub的遠程倉庫上,這裡就以我們剛開始的drag項目為例,我們在Git學習之路(2)-安裝GIt和創建版本庫 中將drag項目克隆到了本地文件中,假設進過修改後,我們現在要將修改後的文件同步到遠程倉庫中 ...
  • 一、使用場景 使用場景:項目發佈前 操作步驟: 1.執行gulp,對文件進行壓縮、合併等操作; 2.在1執行完成後,對1中合併的文件如default.css進行多主題色的自動生成,在這裡使用node處理。 問題:手工操作步驟繁瑣 打開cmd->切換執行目錄->執行gulp->關閉cmd(gulp執行 ...
  • 前言: 在哪看到過angular程式員被React程式員鄙視,略顯尷尬,確實Angular挺值得被調侃的,在1.*版本存在的幾個性能問題,性能優化的“潛規則”賊多,以及從1.*到2.*版本的面目全非,不過寬容點來看這個強大的框架,升級到ng2肯定是一件好事情,雖然截至目前ng2還存在或多或少需要完善 ...
  • require 用來載入代碼,而 exports 和 module.exports 則用來導出代碼。但很多新手可能會迷惑於 exports 和 module.exports 的區別,為了更好的理解 exports 和 module.exports 的關係,我們先來鞏固下 js 的基礎。 ...
  • 組件通訊 "Omi框架" 組建間的通訊非常遍歷靈活,因為有許多可選方案進行通訊: 通過在組件上聲明 data 傳遞給子節點 通過在組件上聲明 data 傳遞給子節點 (支持複雜數據類型的映射) 父容器設置 childrenData 自動傳遞給子節點 聲明 group data 傳遞(支持複雜數據類型 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...