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 相关文章推荐
JS正则中的RegExp对象对象
Nov 07 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 Javascript
ligerUI---ListBox(列表框可移动的实例)
Nov 28 Javascript
vue实现密码显示隐藏切换功能
Feb 23 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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
Home Coffee Roasting
2021/03/03 咖啡文化
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
修改发贴的编辑功能
2007/03/07 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
python冒泡排序算法的实现代码
2013/11/21 Python
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
django云端留言板实例详解
2019/07/22 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
linux面试题参考答案(5)
2016/11/05 面试题
驾驶员岗位职责
2014/01/29 职场文书
药品采购员岗位职责
2014/02/08 职场文书
公司授权委托书样本
2014/09/15 职场文书
个人更名证明
2015/06/23 职场文书
导游词之介休绵山
2019/12/31 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
goland 设置project gopath的操作
2021/05/06 Golang
MySQL 数据丢失排查案例
2021/05/08 MySQL
教你怎么用Python操作MySql数据库
2021/05/31 Python