• 浅谈AngularJS启动引导过程


    我们都知道AngularJS默认会执行app.js来启动整个angular项目,但你知道angular具体执行过程吗?

    一、自动引导启动框架

    例如我们有如下代码,我们想要完成一个指令功能:

    <html ng-app>    
        <head>
            <script src="angular.min.js"></script>
        </head>
        <body>
             <div my-directive></div>
        </body>
    </html>

    下面分析一下Angular具体启动引导的过程:

    第一步:加载angular.min.js文件,通过全局变量angular提供API接口;

    第二步:等待直到DOM树加载完毕;

    第三步:找到ng-app,自动进入启动引导阶段;

    第四步:找到 my-directive,根据指令的定义展开。

    另外,何时使用ng-app=“myapp”,何时直接使用ng-app?

    如果使用ng-app,你的controller只能这么写:

    function MyController($scope){
           //do something...  
    }

    而你使用ng-app="myapp"你可以这么写:

    var myapp = angular.module('myapp',[]);
    myapp.controller('MyControler',function($scope){
          //do something...
    });

    二、手动引导启动框架

    在大多数情况下,我们都使用ng-app指令来进行自动引导启动,但是如果一个HTML文件中 有多个ng-app,AngularJS只会自动引导启动它找到的第一个ng-app应用,这是需要手工引导 的一个应用场景。

    我们可以利用 angular.bootstrap() 方法进行手动引导:

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

    bootstrap方法有三个参数:

    element : 一个DOM元素,以这个元素为Angular应用的根,等同自动引导时ng-app所在 的元素。这个参数是必须的。比如:document、document.body等。modules : 引导时需要载入的模块数组。比如:[]、["myapp"]等。由于我们的HTML中引用 了myapp模块中定义的my-directive指令,所以,我们需要指定载入myapp模块。config :引导配置项,可选。我们先忽略。 最终,我们使用如下的形式进行手动引导:

    angular.bootstrap(document,["myapp"]); 

    比如如下的例子:

    <script src="angular.min.js"></script>
    <script>
        var myapp1mod = angular.module('Lilei',[]);
        myapp1mod.controller('Textcontroller',function($scope){
            var content= {};
            content.message = "Hello Lilei";
            $scope.content= content;
        });
    
        var myapp2mod = angular.module('Hanmeimei',[]);
        myapp2mod.controller('Textcontroller',function($scope){
            var content= {};
            content.message = "Hello Hanmeimei";
            $scope.content= content;
        });
    
        angular.bootstrap(angular.element("#Lilei"),["Lilei"]);
        angular.bootstrap(angular.element("#Hanmeimei"),["Hanmeimei"]);
    
    </script>
  • 相关阅读:
    SQL Server 存储过程
    String.format Tutorial
    第五次
    第四次
    第三次
    第一次作业
    第二次
    c/c++
    HelloWorld出现的问题
    Android系统架构
  • 原文地址:https://www.cnblogs.com/lodingzone/p/4960012.html
Copyright © 2020-2023  润新知