AngularJS使用angular.bootstrap完成模块手动加载的方法分析  更新时间:2017年01月19日 10:38:16   作者:aitangyong   这篇文章主要介绍了AngularJS使用angular.bootstrap完成模块手动加载的方法,结合实例形式分析了angular.bootstrap函数手动加载模块的步骤与相关操作技巧,需要的朋友可以参考下 本文实例分析了AngularJS使用angular.bootstrap完成模块手动加载的方法。分享给大家供大家参考,具体如下: 之前我们看到使用ng-app指令,可以实现模块的自动加载。现在我们看下,angular中如何手动加载模块。需要使用到angular.bootstrap这个函数。 div1:{{name}} div2:{{name}} IE运行这个网页,发现变量能够被angular框架正确解析;F12发现控制台也没有报错误。到这里为止,我们知道了如何加载angular的模块,也明白了手动加载和自动加载的区别。接下来,我们就可以去继续学习AngularJS框架的其他知识。 更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》 希望本文所述对大家AngularJS程序设计有所帮助。 您可能感兴趣的文章: AngularJS $injector 依赖注入详解 AngularJs学习第五篇从Controller控制器谈谈$scope作用域 深入解析AngularJS框架中$scope的作用与生命周期 angularJS 中$scope方法使用指南 AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】 AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法 AngularJS的依赖注入实例分析(使用module和injector) AngularJS 使用ng-repeat报错 [ngRepeat:dupes] AngularJS使用ng-inlude指令加载页面失败的原因与解决方法 Angularjs实现搜索关键字高亮显示效果 AngularJS中的缓存使用 AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析 AngularJS angular.bootstrap 模块 手动加载 相关文章 AngularJS使用拦截器实现的loading功能完整实例 这篇文章主要介绍了AngularJS使用拦截器实现的loading功能,结合完整实例形式分析了AngularJS拦截器的设置、调用及loading功能实现技巧,需要的朋友可以参考下 2017-05-05 angular使用md5,CryptoJS des加密的方法 这篇文章主要介绍了angular使用md5,CryptoJS des加密的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2019-06-06 详解AngularJS 路由 resolve用法 本篇文章主要介绍了AngularJS 路由 resolve用法,详细的介绍了resolve用法,想要了解resolve用法的朋友可以了解一下 2017-04-04 Angular4实现图片上传预览路径不安全的问题解决 这篇文章主要给大家介绍了关于Angular4实现图片上传预览路径不安全问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧。 2017-12-12 Angular学习教程之RouterLink花式跳转 这篇文章主要给大家介绍了关于Angular学习教程之RouterLink花式跳转的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2018-05-05 AngularJs表单验证实例详解 这篇文章主要介绍了用AngularJs验证表单实例详解的相关资料,需要的朋友可以参考下 2016-05-05 Angularjs实现上传图片预览功能 本文通过实例代码给大家介绍了Angularjs实现上传图片预览功能,非常不错,具有参考借鉴价值,需要的朋友参考下吧 2017-09-09 AngularJS动态生成select下拉框的方法实例 这篇文章主要给大家介绍了关于AngularJS动态生成select下拉框的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用AngularJS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2019-11-11 Angularjs自定义指令实现三级联动 选择地理位置 这篇文章主要介绍了Angularjs自定义指令实现三级联动,选择地理位置,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-02-02 Agularjs妙用双向数据绑定实现手风琴效果 最近在工作总遇到需要实现类似手风琴效果的需求,下面小编通过本文给大家分享angularjs巧用双向数据绑定实现手风琴效果,需要的朋友可以参考下 2017-05-05 最新评论

本文实例分析了AngularJS使用angular.bootstrap完成模块手动加载的方法。分享给大家供大家参考,具体如下:

之前我们看到使用ng-app指令,可以实现模块的自动加载。现在我们看下,angular中如何手动加载模块。需要使用到angular.bootstrap这个函数

<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>

IE运行这个网页,发现变量能够被angular框架正确解析;F12发现控制台也没有报错误。到这里为止,我们知道了如何加载angular的模块,也明白了手动加载和自动加载的区别。接下来,我们就可以去继续学习AngularJS框架的其他知识。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

您可能感兴趣的文章:

  • AngularJS $injector 依赖注入详解
  • AngularJs学习第五篇从Controller控制器谈谈$scope作用域
  • 深入解析AngularJS框架中$scope的作用与生命周期
  • angularJS 中$scope方法使用指南
  • AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
  • AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
  • AngularJS的依赖注入实例分析(使用module和injector)
  • AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
  • AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
  • Angularjs实现搜索关键字高亮显示效果
  • AngularJS中的缓存使用
  • AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
张贴在3