當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

AngularJS深入(1)——加载启动

發布時間：2025/3/14 javascript 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 AngularJS深入(1)——加载启动小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本系列文章的分析基于AngularJS?v1.4.2.

參考資料有：

AngularJS API Docs
AngularJS Developer Guide
AngularJS實戰
Service vs provider vs factory

1. 整體結構

AngularJS的源碼在整體上，與其它很多庫和框架一樣，是一個自執行函數，其整體結構簡化如下：

整體思路為：

首先是一些全局變量和方法的定義，以及一些其它操作；
通過window.angular.bootstrap判斷是否已經加載angular，如果已經加載，則直接退出；
執行bindJQuery()，如果已經加載了jQuery，則AngularJS會使用已經加載的jQuery，否則使用內部實現的JQLite，其相當于是一個簡化版的jQuery；
執行publishExternalAPI(angular)來為全局變量angular增加屬性和方法，并建立起模塊機制，注冊核心模塊；
在文檔加載完成后執行angularInit()。

2. bindJQuery

該方法主要是綁定jQuery，簡化后的代碼如下：

bindJQueryFired相當于是一個標志符，初始值為false。在執行bindJQuery的時候，先判斷bindJQueryFired的值，如果其為true，則說明已經執行過jQuery綁定，直接返回；否則執行綁定過程，并將bindJQueryFired的值設置為true;
jqName是調用jq()的返回值，jq()的主要作用是遍歷文檔，找出第一個包含屬性ng-jq的節點，然后取其屬性值；
變量jQuery取值為window.jQuery，如果加載了jQuery函數庫，則其值非空；
在應用了ng-jq指令的情況下，如果jQName的值不為null，則設置變量jQuery的值為window[jqName]，否則設置為undefined
如果jQuery變量有效，則使用jQuery變量指定的庫；否則使用內置實現的JQLite。

總結起來，綁定的jQuery可以的來源有三個：ng-jq指定、引入的jQuery庫、內置實現的JQLite，其使用流程為：

如果有ng-jq
- 如果ng-jq的值不為空，則使用它指定的庫
- 如果ng-jq指定的值為空，則變量jQuery的值為undefined，此時強制使用JQLite，無論是否引入了jQuery庫
如果沒有ng-jq
- 如果引入了jQuery庫，則使用它
- 如果沒有引入jQuery庫，則使用JQLite

3. publishExternalAPI

該方法的代碼簡化如下：

主要功能為：

對angular對象進行擴展；
執行setupModuleLoader(window)，該方法主要是定義了angular.module方法，用于注冊及獲取模塊；angular.module只有一個參數的時候為獲取模塊，否則為注冊模塊；
如果沒有注冊ngLocal模塊，則對其進行注冊；
注冊ng模塊，也就是AngularJS的核心模塊。

4. angularInit

該方法的主要作用是啟動Angular應用。相關代碼為：

需要說明的是，AngularJS支持的屬性前綴有多種，包括ng-、data-ng、ng:和x-ng-。

首先對element進行檢測，看它是否有ng-app等屬性，如果有則設定appElement和module；
如果element元素沒有ng-app等屬性，則對其后繼元素進行查找，找到第一個有ng-app等屬性的元素，從而設定appElement和module;
如果appElement不為空，即找到了應用的入口元素，則執行bootstrap。

需要注意的是，如果有多個元素都有ng-app屬性，則只會找到第一個并啟動它，而后面的應用則不會自動啟動。

5. 應用啟動

應用的啟動方式主要包括自動啟動和手動啟動。

（1）自動啟動

例如：

<div ng-app="MyModule"><div ng-controller="ctrl">{{ name }}</div> </div> <script>var myModule = angular.module('MyModule', []);myModule.controller('ctrl', ['$scope', function($scope) {$scope.name = 'alex';}]); </script>

在這個例子中，對于最外層的div設置了ng-app屬性，因此會自動啟動應用。

（2）手動啟動

例如：

<div><div ng-controller="ctrl"></div> </div> <script>var myModule = angular.module('MyModule', []);myModule.controller('ctrl', ['$scope', function($scope) {$scope.name = 'alex';}]);angular.element(document).ready(function() {angular.bootstrap(document, ['MyModule']);}); </script>

由于沒有設置ng-app，因此需要通過angular.bootstrap來手動啟動應用。

（3）多個應用的啟動

一般情況下，一個頁面中只有一個應用，但是一個頁面上多個應用也是可以共存的。通過上面對源碼的分析，可以知道，只有第一個應用會自動啟動，因此其余的應用需要手動來啟動，例如：

<div id="app1" ng-app="MyModule1"><div ng-controller="ctrl1"></div> </div> <div id="app2" ng-app="MyModule2"><div ng-controller="ctrl2"></div> </div> <script>var myModule1 = angular.module('MyModule1', []);myModule1.controller('ctrl1', ['$scope', function($scope) {$scope.name = 'alex';}]);var myModule2 = angular.module('MyModule2', []);myModule2.controller('ctrl2', ['$scope', function($scope) {$scope.greeting = 'hello';}]);angular.element(document).ready(function() {angular.bootstrap(document.getElementById('app2'), ['MyModule2']);}); </script>

轉載于:https://www.cnblogs.com/folyred/p/4723773.html

總結

以上是生活随笔為你收集整理的AngularJS深入(1)——加载启动的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： [资料]pthreads PHP
下一篇：了解 JavaScript （4）– 第