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 相关文章推荐
Code:findPosX 和 findPosY
Dec 20 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
微信小程序 解决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数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
php实现微信扫码支付
2017/03/26 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
浅谈document.write()输出样式
2015/05/07 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
pytorch 数据集图片显示方法
2018/07/26 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
浅谈django channels 路由误导
2020/05/28 Python
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
心理健康教育心得体会
2013/12/29 职场文书
关于元旦的广播稿
2014/02/16 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书