AngularJS的啟動過程分析

2021-07-03 15:28:48 字數 3548 閱讀 5549

/** @name angular */

//如果window.angular已經有值了,就把原有的賦值給前面angular,如果沒有則用window.angular空物件賦值給angular

angular = window.angular || (window.angular = {}),

angularmodule,

uid = 0;

function publishexternalapi(angular)  else 

}console.log(counter);

有兩個property,其它都是function

/**

* angular.injector();

*/var injector = angular.injector();

console.log(injector);

一共有5個方法

annotate:分析函式簽名(不要new的原因)

inangular.jsline 26041

if (window.angular.bootstrap)
angular的三種啟動方式

方式1: 自動啟動

js

var mymodule = angular.module("mymodule", );

mymodule.controller('myctrl', ['$scope',

function($scope)

]);

方式2: 手動啟動

js

var mymodule = angular.module("mymodule", );

mymodule.controller('myctrl', ['$scope',

function($scope)

]);/**

* 這裡要用ready函式等待文件初始化完成

*/angular.element(document).ready(function() );

js

/**

* @type

*/var mymodule1 = angular.module("mymodule1", );

mymodule1.controller('myctrl', ['$scope',

function($scope)

]);// angular.element(document).ready(function() );

/** * @type

*/var mymodule2 = angular.module("mymodule2", );

mymodule2.controller('myctrl', ['$scope',

function($scope)

]);angular.element(document).ready(function() );

嘗試繫結jquery,如果發現匯入了jquery ,則使用匯入的jquery,否則,使用angular自己封裝的jqlite

inangular.jsline 1521:

bindjquery();
inangular.jsline 1534:

jquery = window.jquery;

if (jquery && jquery.fn.on) );

測試

js

var mymodule = angular.module("mymodule", );

mymodule.controller('myctrl', ['$scope',

function($scope)

]);

檢視執行流程

發布ng提供的api

inangular.jsline 2162 : publishexternalapi(angular);

//構建模組載入器

angularmodule = setupmoduleloader(window);

try catch (e)

模組載入器的實現原理

inangular.jsfunctionsetupmoduleloader(window)

function setupmoduleloader(window) 

var angular = ensure(window, 'angular', object);

// we need to expose `angular.$$minerr` to modules such as `ngresource` that reference it during bootstrap

angular.$$minerr= angular.$ $minerr || minerr;

//把module方法放到angular的全域性物件上,ensure就是乙個屬性拷貝的過程

return ensure(angular, 'module', function();

}

把工具函式給載到模組裡
return function module(name, requires, configfn)
檢視模組裡所包含的內容

js

/**

* 定義模組

*/var mymodule = angular.module("mymodule", );

/** * 從debug的過程可以看到,angular中的「模組」只是乙個閉包空間(或者叫命名空間)

* 所有模組都被註冊在modules這個物件上

*/console.log(mymodule);

檢視控制台

構建內建模組 ng

inangular.jsline 2169publishexternalapi(angular)

angularmodule('ng', ['nglocale'], ['$provide',

function ngmodule($provide) );

$provide.provider('$compile', $compileprovider).

directive();

bootstrap
function bootstrap(element, modules, config)

Angularjs啟動過程

步驟一 有兩個property,其它都是function 一共有5個方法 annotate 分析函式簽名 不要new的原因 步驟二if window.angular.bootstrap angular的三種啟動方式步驟三嘗試繫結jquery,如果發現匯入了jquery 則使用匯入的jquery,否則...

mysql啟動過程長 mysql啟動過程

mysql啟動過程經過以下順序 1.mysql讀取配置檔案的順序 讀取順序 etc my.cnf etc mysql my.cnf usr etc my.cnf my.cnf 2.mysql啟動方式 mysql啟動方式有三種 mysqld mysqld safe mysqld multi 主要用於多...

spark系列 Executor啟動過程分析

本篇文章將以問答的方式對executor的啟動進行分析。在可用的 worker 節點中啟動 executor 在 worker 節點每次分配資源時,分配給 executor 所需的最少 cpu 核數 1.4.2之前是每次只分配乙個core 該過程是通過多次輪詢進行,在分配過程中worker 節點可能...