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可突破windows弹退效果代码
Aug 09 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
javascript判断非数字的简单例子
Jul 18 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
Mar 23 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
关于ES6尾调用优化的使用
Sep 11 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
自动生成文章摘要的代码[PHP 版本]
2007/03/20 PHP
php加密解密实用类分享
2014/01/07 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
php fread读取文件注意事项
2016/09/24 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
JS回调函数深入理解
2019/10/16 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
TensorFlow变量管理详解
2018/03/10 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
详解Python 切片语法
2019/06/10 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
如何利用Python识别图片中的文字
2020/05/31 Python
使用Python pip怎么升级pip
2020/08/11 Python
python实现canny边缘检测
2020/09/14 Python
python+opencv实现车道线检测
2021/02/19 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
MySQL8.0的WITH查询详情
2021/08/30 MySQL
PyTorch device与cuda.device用法
2022/04/03 Python