zoukankan      html  css  js  c++  java
  • angular.bootstrap手动加载angularjs模块

    一、概述

    描述:
      此方法用于手动加载angularjs模板
      (官方翻译:注意基于端到端的测试不能使用此功能来引导手动加载,他们必须使用ngapp。 angularjs会检测这个模板是否被浏览器加载或者加载多次并且在控制台给出警告在加载其他模块的时候,这防止了奇怪的结果,在实际应用中,angularjs在尝试其它的多个  实例来研究DOM)。

    使用方法:

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

    参数:

    参数名称参数类型描述
    element DOMElement DOM元素
    modules Array 要加载的模板
    config Object 配置选项的对象。

     

     

    返回值:

      返回这个应用程序的新创建的injector 对象。

     

    二、使用

    使用angular.bootstrap完成模块的手动加载(一个页面多个ng-app时使用)

    <html>
    
      <head>
        <script src="angular.js"></script>
        <script>
    
        // 创建moudle1
        var rootMoudle = angular.module('moudle1', []);
        rootMoudle.controller("controller1",function($scope){$scope.name="aty"});
    
        // 创建moudle2
        var m2 = angular.module('moudle2', []);
        m2.controller("controller2",function($scope){$scope.name="aty"});
    
    
        // 页面加载完成后,再加载模块
        angular.element(document).ready(function() {
          angular.bootstrap(document.getElementById("div1"),["moudle1"]);
          angular.bootstrap(document.getElementById("div2"),["moudle2"]);
        });
    
      </script>
    
      <head>
      <body>
        <div id="div1"  ng-controller="controller1">div1:{{name}}</div>
        <div id="div2"  ng-controller="controller2">div2:{{name}}</div>
      </body>
    
    </html>
  • 相关阅读:
    第一章
    第三章
    第四章
    第十章 读书笔记
    第八章 读书笔记
    第九章 读书笔记
    第7章实验心得
    第六章实验心得
    第五章心得体会
    第四章实验心得
  • 原文地址:https://www.cnblogs.com/miny-simp/p/8399219.html
Copyright © 2011-2022 走看看