AngularJS使用ng-app自动加载bootstrap框架问题分析


Posted in Javascript onJanuary 04, 2017

本文实例分析了AngularJS使用ng-app自动加载bootstrap框架问题。分享给大家供大家参考,具体如下:

前面的文章《AngularJS框架的ng-app指令与自动加载实现方法分析》 提出了使用ng-app指令的情况。之前觉得出现第4和第5种情况很奇怪,因为只看到了现象,没有看到本质。JS错误,最直观的表现方式就是:弹出一个非常不友好的JS错误窗口。当脚本出现了未捕获的错误,浏览器才会弹出错误提示。还有一种比较隐晦的表示:在浏览器的控制台输出错误信息。这提示我们:使用JS框架的时候,一定要用下F12看看控制台是否有错误。

第3种情况 和 第5种情况:不带属性的ng-app模块不能自动加载,用F12发现控制台报错:

SCRIPT5022: [$injector:modulerr] Failed to instantiate module app1 due to:
Error: [$injector:nomod] Module 'app1' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument。

什么意思呢?大概就是我们使用了ng-app,要求自动加载我们自定义的模块,但是我们却没有提供这些模块。再看下官方的ngApp说明文档:

Use this directive to auto-bootstrap an AngularJS application. The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the <body> or <html> tags.Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application。

1、如果在html中定义了ng-app,那么angular框架会自动初始化,不管它有没有带属性值;

     如果没有使用ng-app,那么需要自己手动初始化。

2、如果ng-app没有属性值,angular会默认创建一个模块作为root,然后启动框架。

3、ng-app属性如果有值,即自定义module,也会被解析出来,前提是我们必须先创建module。

也就是说ng-app就是用来自动启动angular框架的,是否带属性值的差别在于:根模块的创建,到底是默认的,还是我们自定义的。

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

Javascript 相关文章推荐
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
JS控制输入框内字符串长度
May 21 Javascript
Javascript基础教程之变量
Jan 18 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
微信小程序如何调用图片接口API并居中显示
Jun 29 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 #Javascript
bootstrap laydate日期组件使用详解
Jan 04 #Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 #Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 #Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 #Javascript
通过sails和阿里大于实现短信验证
Jan 04 #Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 #Javascript
You might like
html中select语句读取mysql表中内容
2006/10/09 PHP
php 一元分词算法
2009/11/30 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
深入密码加salt原理的分析
2013/06/06 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
php生成图片验证码
2015/06/09 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
Python中的日期时间处理详解
2016/11/17 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
对python函数签名的方法详解
2019/01/22 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
干部行政关系介绍信
2014/01/17 职场文书
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
益达广告词
2014/03/14 职场文书
班级寄语大全
2014/04/10 职场文书
大型活动组织方案
2014/05/10 职场文书
2015中学学校工作总结
2015/07/20 职场文书
听课评课活动心得体会
2016/01/15 职场文书