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 serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
js实现省市级联效果分享
Aug 10 Javascript
WebSocket的通信过程与实现方法详解
Apr 29 Javascript
新版小程序登录授权的方法
Dec 12 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
Angular CLI 使用教程指南参考小结
Apr 10 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 Javascript
antd配置config-overrides.js文件的操作
Oct 31 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代码实现爬虫记录――超管用
2015/07/31 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
Yii框架安装简明教程
2020/05/15 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
layui使用label标签的方法
2019/09/14 Javascript
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
pandas重新生成索引的方法
2018/11/06 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
python统计中文字符数量的两种方法
2019/01/31 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书