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字符串连接性能问题有争议
Jan 12 Javascript
JQuery学习笔记 nt-child的使用
Jan 17 Javascript
js 获取元素下面所有li的两种方法
Apr 14 Javascript
js怎么覆盖原有方法实现重写
Sep 04 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
JS实现拖动模糊框特效
Aug 25 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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
YII中assets的使用示例
2014/07/31 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
videocapture库制作python视频高速传输程序
2013/12/23 Python
Python有序字典简单实现方法示例
2017/09/28 Python
python检测IP地址变化并触发事件
2018/12/26 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
业务员薪酬管理制度
2014/01/15 职场文书
优秀的导游求职信范文
2014/04/06 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
公司职员入党自传书
2015/06/26 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
Python中Permission denied的解决方案
2021/04/02 Python