AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法


Posted in Javascript onJanuary 04, 2017

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
vue-cli 构建骨架屏的方法示例
Nov 08 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 Javascript
vue 解决provide和inject响应的问题
Nov 12 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 #Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 #Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 #Javascript
手机端js和html5刮刮卡效果
Sep 29 #Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 #Javascript
laydate.js日期时间选择插件
Jan 04 #Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
Jan 04 #Javascript
You might like
E路文章系统PHP
2006/12/11 PHP
PHP面向对象法则
2012/02/23 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
PHP实现合并discuz用户
2015/08/05 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
详解tween.js的使用教程
2017/09/14 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
Python转码问题的解决方法
2008/10/07 Python
python的dict,set,list,tuple应用详解
2014/07/24 Python
python批量同步web服务器代码核心程序
2014/09/01 Python
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
深入解析Python中的__builtins__内建对象
2016/06/21 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
Python2包含中文报错的解决方法
2018/07/09 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
python通过链接抓取网站详解
2019/11/20 Python
如何用PHP实现邮件发送
2012/12/26 面试题
环境科学专业个人求职信
2013/09/26 职场文书
卖车协议书
2014/04/21 职场文书
会议欢迎词范文
2015/01/27 职场文书
预备党员群众意见
2015/06/01 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python