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 相关文章推荐
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
文本框回车提交与禁止提交示例
Sep 27 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
jQuery表单验证之密码确认
May 22 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
微信小程序 解决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 setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
php中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
php中memcache 基本操作实例
2015/05/17 PHP
培养自己的php编码规范
2015/09/28 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
python调用新浪微博API项目实践
2014/07/28 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
我们是伦敦女孩:WalG
2018/01/08 全球购物
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
J2EE系统只能是基于web
2015/09/08 面试题
六十岁生日答谢词
2014/01/10 职场文书
优秀党员先进材料
2014/12/18 职场文书
追讨欠款律师函
2015/05/27 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
话题作文之财富(600字)
2019/12/03 职场文书