AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法  更新时间:2017年01月04日 11:59:09   作者:aitangyong   这篇文章主要介绍了AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法,结合实例形式分析了ng-app自动加载我们自定义的模块作为根模块的操作步骤与实现技巧,需要的朋友可以参考下 本文实例讲述了AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法。分享给大家供大家参考,具体如下: 接着前面那篇《AngularJS使用ng-app自动加载bootstrap框架问题分析》,现在我们看下如何使用带属性值的ng-app命令,让ng-app自动加载我们自定义的模块作为根模块。 div1:{{name}} 可以看到,我们使用了angular.module()函数,创建了一个自定义的模块,我们并没有显示加载。但是通过运行效果可以看出:ng-app这个指令自动加载了我们自定义的rootMoudle。我们知道,使用angular.bootstrap()可以手动加载模块,如果我们自己调用这个函数是什么效果呢? div1:{{name}} 用IE运行这个网页,用F12观察控制台报错: SCRIPT5022: [ng:btstrpd] App Already Bootstrapped with this Element ” 这就是说:ng-app已经自动完成了rootMoudle的加载,我们没有必要多此一举,再次显示调用angular.bootstrap来加载。也可以看得出:angular框架,一个模块只允许加载一次。ng-app用来自动加载模块,bootstrap用来手动加载模块。 更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》 希望本文所述对大家AngularJS程序设计有所帮助。 您可能感兴趣的文章: Angular.js回顾ng-app和ng-model使用技巧 AngularJS ng-app 指令实例详解 Angular在一个页面中使用两个ng-app的方法(二) AngularJS使用ng-app自动加载bootstrap框架问题分析 Angular.js初始化之ng-app的自动绑定与手动绑定详解 AngularJS ng-app 自动加载 相关文章 体验jQuery和AngularJS的不同点及AngularJS的迷人之处 AngualrJS是一个很贴心的web应用框架,本篇通过jQuery和Angular两种方式来实现同一个实例,从而体验两者的不同点以及AngularJS的迷人之处 2016-02-02 AngularJS基础学习笔记之指令 指令(Directives)是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令。这篇教程会为你讲述如何自定义指令,以及介绍如何在实际项目中使用。 2015-05-05 详解Angular组件之中间人模式 设计一个组件时,组件应该是内聚的,应该不依赖外部已经存在的组件,要实现这种松耦合的组件要使用中间人模式。 2021-05-05 Angular用来控制元素的展示与否的原生指令介绍 这篇文章主要介绍了Angular用来控制元素的展示与否的原生指令的用法及区别,非常详细,这里推荐给小伙伴们 2015-01-01 AngularJS ng-controller 指令简单实例 本文主要介绍AngularJS ng-controller 指令,这里对ng-controller指令资料的整理,并附代码示例和效果图,有需要的朋友看下 2016-08-08 Angular中ng-repeat与ul li的多层嵌套重复问题 这篇文章主要介绍了Angular中ng-repeat与ul li的多层嵌套重复问题,需要的朋友可以参考下 2017-07-07 angular2倒计时组件使用详解 这篇文章主要为大家详细介绍了angular2倒计时组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-01-01 深究AngularJS中$sce的使用 本篇文章主要介绍了深究AngularJS中$sce的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 AngularJS实用基础知识_入门必备篇(推荐) 下面小编就为大家带来一篇AngularJS实用基础知识_入门必备篇(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-07-07 AngularJS基础 ng-dblclick 指令用法 本文主要介绍AngularJS ng-dblclick 指令,这里对ng-dblclick基础资料整理并详细介绍,简单的代码实例和实现效果,希望能帮助学习AngularJS的朋友 2016-08-08 最新评论

本文实例讲述了AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法。分享给大家供大家参考,具体如下:

接着前面那篇《AngularJS使用ng-app自动加载bootstrap框架问题分析》,现在我们看下如何使用带属性值的ng-app命令,让ng-app自动加载我们自定义的模块作为根模块。

<!DOCTYPE html>
<html>
  <head>
    <script src="angular.js"></script>
    <script>
    var rootMoudle = angular.module('rootMoudle', []);
    rootMoudle.controller("rootControl",function($scope){$scope.name="aty"});
  </script>
  <head>
  <body>
    <div id="moudle1" ng-app="rootMoudle" ng-controller="rootControl">div1:{{name}}</div>
  </body>
</html>

可以看到,我们使用了angular.module()函数,创建了一个自定义的模块,我们并没有显示加载。但是通过运行效果可以看出:ng-app这个指令自动加载了我们自定义的rootMoudle。我们知道,使用angular.bootstrap()可以手动加载模块,如果我们自己调用这个函数是什么效果呢?

<html>
  <head>
    <script src="angular-1.2.2/angular.js"></script>
    <script>
    var rootMoudle = angular.module('rootMoudle', []);
    rootMoudle.controller("rootControl",function($scope){$scope.name="aty"});
    //页面加载完成后,加载rootMoudle
    angular.element(document).ready(function(){
      angular.bootstrap(document.getElementById("moudle1"), ['rootMoudle']);
    });
  </script>
  <head>
  <body>
    <div id="moudle1" ng-app="rootMoudle" ng-controller="rootControl">div1:{{name}}</div>
  </body>
</html>

用IE运行这个网页,用F12观察控制台报错:

SCRIPT5022: [ng:btstrpd] App Already Bootstrapped with this Element ‘<div class=”ng-scope ng-binding” id=”moudle1″ ng-app=”rootMoudle” ng-controller=”rootControl”>’

这就是说:ng-app已经自动完成了rootMoudle的加载,我们没有必要多此一举,再次显示调用angular.bootstrap来加载。也可以看得出:angular框架,一个模块只允许加载一次。ng-app用来自动加载模块,bootstrap用来手动加载模块

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

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

您可能感兴趣的文章:

  • Angular.js回顾ng-app和ng-model使用技巧
  • AngularJS ng-app 指令实例详解
  • Angular在一个页面中使用两个ng-app的方法(二)
  • AngularJS使用ng-app自动加载bootstrap框架问题分析
  • Angular.js初始化之ng-app的自动绑定与手动绑定详解
张贴在3