angular应用执行过程

mac2022-06-30  99

angular 会在document上设监听函数 监听DOMContentLoaded事件。

jqLite(window.document).ready(function() { angularInit(window.document, bootstrap); });

所有当所有脚本执行完毕,构建好angular的module之后 。就会执行到该监听函数。 接下来会去寻找angular应用 根元素(rootElement).从指定 元素上(默认是window.document)去找ng-app属性的值作为模块的标识符,也就是模块名。 实际上这些['ng-', 'data-ng-', 'ng:', 'x-ng-']前缀 +‘app’ 都是可以的,我们这里只提ng-app. 如果在document上没找到ng-app属性,会在子孙中找,并将找到的元素作为应用(application)根元素。

找到之后就会 执行启动(bootstrap)函数

function bootstrap(element, modules, config) { var doBootstrap = function() { element = jqLite(element); //将element用jqlite warpped,以便操作 ... modules.unshift('ng'); var injector = createInjector(modules, config.strictDi); injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector', function bootstrapApply(scope, element, compile, injector) { scope.$apply(function() { element.data('$injector', injector); compile(element)(scope); }); }] ); return injector; };

知道这个的过程我们通常可以自己手动的来执行angular应用

angular.element(document).ready(function(){ angular.bootstrap(document,['myapp']); })

代码分析 : 创建注入器injector 。并使用它来执行 编译链接rootElement的函数。 至此angular的启动流程结束。我们看到angular呈现的页面。rootElement比作身体的话,element上的响应事件构成了神经网络。让页面有了灵动。 这神经网络的灵动都在编译链接过程中赋予element的。

下章 分析injector.

转载于:https://www.cnblogs.com/koushikan/p/5939383.html

最新回复(0)