angular1 执行流程

最新推荐文章于 2025-02-28 14:32:25 发布

yuezhujoey

最新推荐文章于 2025-02-28 14:32:25 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： angular1

本文链接：https://blog.youkuaiyun.com/yuezhujoey/article/details/53366603

angular1 专栏收录该内容

1 篇文章

订阅专栏

这篇博客详细阐述了Angular1的执行流程，从用户请求index.html开始，加载angular库，接着是Angular的引导过程。当遇到ng-app属性时，Angular会自动或通过bootstrap方法进行引导。引导涉及模块导入、注入器创建以及DOM子树的编译。$compile服务在编译过程中匹配并应用指令，实现DOM与行为的绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.用户请求起始页 index.html，加载所有的js文件， angular建立了一个全局的angular对象，只是单纯的angular库被导入，和整个框架没有关系。

2. 当DOM树建立完成后，如果index.html中某个标签有ng-app属性，angular就会进入引导过程。

---- 在多数情况下，我们使用ng-app进行自动引导，但是当存在多个ng-app时，angular只会自动引导第一个ng-app。这时候我们可以使用bootstrap方法进行手工引导。

angular.bootstrap(element,[modules],[config]);

---- element 为应用程序的根，等同于自动引导时ng-app的位置

---- [modules] 引导时需要导入的模块，等同于ng-app = "myApp"时指定的模块

---- [config] 引导配置项

注意：bootstrap必须是在其element元素所指向的dom数加载完毕后才能使用。可以使用angular.element(element)获取document元素，并在其加载完毕后再执行相关的操作。

angular.element(document).ready(function() {
	angular.bootstrap(document.body,["myApp"],[]);
});

3. 当angular进入引导状态后（这个过程让angular从一个库转变成了一个框架）：

3.1 引导第一步：在ng-app(或者是bootstrap方法手工引入的模块)处用injector()创建一个注入器，然后把这个注入器存入了根对象的data里

var injector = angular.injector(["ng","myApp"]);
angular.element(document).data("$injector",injector);

3.2 引导第二步：创建根作用域 $rootScopr, 如果是自动引入，则ng-app对应根作用域，否则bootstrap指向的element对应根作用域

angular.element(document.body).data("$rootScope"); 可以查看这个根作用域对象

3.3 引导最后一步：创建dom子树，以ng-app或者bootstrap的element所在节点进行dom子树编译

关于编译：$compile是angular的一个内置服务，它负责遍历dom树来匹配指令。directive用于告诉$compile将特定的行为绑定到DOM。

关于指令匹配：指令匹配的规范化：1.去除前缀-x或者-data 2.以:-_,为分隔符的，切分并且随后的单词首字母大写 3.重新拼接单词