AngularJS进阶(三十九)基于项目实战解析ng启动加载过程

最新推荐文章于 2024-05-15 15:45:58 发布

原创最新推荐文章于 2024-05-15 15:45:58 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

本文详细解析了AngularJS项目的启动过程，从加载库到模型、控制器的登场，包括三种启动方式：自动启动、手动启动及多ng-app启动，并附带代码示例。

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

分享一下我老师大神的人工智能教程！http://blog.youkuaiyun.com/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

基于项目实战解析ng启动加载过程

前言

在AngularJS项目开发过程中，自己将遇到的问题进行了整理。回过头来总结一下angular的启动过程。

下面以实际项目为例进行简要讲解。

1.载入ng库

2.等待，直到DOM树构造完毕。

3.发现ng-app，自动进入启动引导阶段。

4.根据ng-app名称找到相应的路由。

5.加载默认地址。

6.Js顺序执行，加载相应模版页

sys_tpls/home.html

7.在此，可以看到index路由中只是填充了ui-view为sys_login的div模块，填充页面内容为sys_tpls/sys_login.html。

sys_tpls/sys_login.html

至此，模型、控制器依次登场亮相。可见，此页面关联的控制器为LoginController。其中用户ID、密码均进行了ng-model的绑定。

至此angularJS项目的启动全过程大致讲解完毕。

注：AngularJS的三种启动方式

方式1: 自动启动

Angular会自动的找到ng-app，将它作为启动点，自动启动。


  
    
     
    
    
     
      <!DOCTYPE html>
     
    

    
     
    
    
     
      <html ng-app="myModule">
     
    

    
     
    
    
     
      <head>
     
    

    
     
    
    
         
      <title>New Page
      </title>
     
    

    
     
    
    
         
      <meta charset="utf-8" />
     
    

    
     
    
    
     
      <script type="text/javascript" src="../../vendor/bower_components/angular/angular.min.js">
      
      </script>
     
    

    
     
    
    
         
      <script type="text/javascript" src="./02.boot1.js">
      
      </script>
     
    

    
     
    
    
     
      </head>
     
    

    
     
    
    
     
      <body>
     
    

    
     
    
    
         
      <div ng-controller="MyCtrl">
     
    

    
     
    
    
             
      <span>
      </span>
     
    

    
     
    
    
         
      </div>
     
    

    
     
    
    
     
      </body>
     
    

    
     
    
    
     
      </html>


  
    
     
    
    
     
      var myModule = angular.module(
      "myModule", []);
     
    

    
     
    
    
     
      myModule.controller(
      'MyCtrl', [
      '$scope',
     
    

    
     
    
    
         
      function($scope) {
     
    

    
     
    
    
     
              $scope.Name = 
      "Puppet";
     
    

    
     
    
    
     
          }
     
    

    
     
    
    
     
      ]);

方式2: 手动启动

在没有ng-app的情况下，只需要在js中添加一段注册代码即可


  
    
     
    
    
     
      <body>
     
    

    
     
    
    
         
      <div ng-controller="MyCtrl">
     
    

    
     
    
    
             
      <span>
      </span>
     
    

    
     
    
    
         
      </div>
     
    

    
     
    
    
     
      </body>


  
    
     
    
    
     
      var myModule = angular.module(
      "myModule", []);
     
    

    
     
    
    
     
      myModule.controller(
      'MyCtrl', [
      '$scope',
     
    

    
     
    
    
         
      function($scope) {
     
    

    
     
    
    
     
              $scope.Name = 
      "Puppet";
     
    

    
     
    
    
     
          }
     
    

    
     
    
    
     
      ]);
     
    

    
     
    
    
     
      /**
     
    

    
     
    
    
     
       * 这里要用ready函数等待文档初始化完成
     
    

    
     
    
    
     
       */
     
    

    
     
    
    
     
      angular.element(
      document).ready(
      function() {
     
    

    
     
    
    
     
          angular.bootstrap(
      document, [
      'myModule']);
     
    

    
     
    
    
     
      });

方式3:多个ng-app

ng中，angular的ng-app是无法嵌套使用的，在不嵌套的情况下有多个ng-app，他默认只会启动第一个ng-app，第二个第三个需要手动启动(注意，不要手动启动第一个，虽然可以运行，但会抛异常)


  
    
     
    
    
     
      <body>
     
    

    
     
    
    
         
      <div id="app1" ng-app="myModule1">
     
    

    
     
    
    
             
      <div ng-controller="MyCtrl">
     
    

    
     
    
    
                 
      <span>
      </span>
     
    

    
     
    
    
             
      </div>
     
    

    
     
    
    
         
      </div>
     
    

    
     
    
    
         
      <div id="app2" ng-app="myModule2">
     
    

    
     
    
    
             
      <div ng-controller="MyCtrl">
     
    

    
     
    
    
                 
      <span>
      </span>
     
    

    
     
    
    
             
      </div>
     
    

    
     
    
    
         
      </div>
     
    

    
     
    
    
     
      </body>


  
    
     
    
    
     
      /**
     
    

    
     
    
    
     
       * 第一个APP
     
    

    
     
    
    
     
       * @type {[type]}
     
    

    
     
    
    
     
       */
     
    

    
     
    
    
     
      var myModule1 = angular.module(
      "myModule1", []);
     
    

    
     
    
    
     
      myModule1.controller(
      'MyCtrl', [
      '$scope',
     
    

    
     
    
    
         
      function($scope) {
     
    

    
     
    
    
     
              $scope.Name = 
      "Puppet";
     
    

    
     
    
    
     
          }
     
    

    
     
    
    
     
      ]);
     
    

    
     
    
    
     
      // angular.element(document).ready(function() {
     
    

    
     
    
    
     
      //     angular.bootstrap(app1, ['MyModule1']);
     
    

    
     
    
    
     
      // });
     
    

    
     
    
    
     
      /**
     
    

    
     
    
    
     
       * 第二个APP
     
    

    
     
    
    
     
       * @type {[type]}
     
    

    
     
    
    
     
       */
     
    

    
     
    
    
     
      var myModule2 = angular.module(
      "myModule2", []);
     
    

    
     
    
    
     
      myModule2.controller(
      'MyCtrl', [
      '$scope',
     
    

    
     
    
    
         
      function($scope) {
     
    

    
     
    
    
     
              $scope.Name = 
      "Vincent";
     
    

    
     
    
    
     
          }
     
    

    
     
    
    
     
      ]);
     
    

    
     
    
    
     
      angular.element(
      document).ready(
      function() {
     
    

    
     
    
    
     
          angular.bootstrap(app2, [
      'myModule2']);
     
    

    
     
    
    
     
      });

美文美图

给我老师的人工智能教程打call！http://blog.youkuaiyun.com/jiangjunshow