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知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
JS闭包原理及其使用场景解析
Dec 03 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
php 数学运算验证码实现代码
2009/10/11 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
js事件触发操作实例分析
2019/06/21 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
python pickle 和 shelve模块的用法
2013/09/16 Python
python中二维阵列的变换实例
2014/10/09 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
Python数据集切分实例
2018/12/08 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
项目计划书范文
2014/01/09 职场文书
高二地理教学反思
2014/01/24 职场文书
求职面试个人自我评价
2014/02/28 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
2015年试用期工作总结
2014/12/12 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
vue修饰符.capture和.self的区别
2022/04/22 Vue.js