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重要知识点小结
Nov 06 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
可插入图片的TEXT文本框
Dec 27 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
浅谈JS的二进制家族
May 09 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
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
javascript实现移动端红包雨页面
2020/06/23 Javascript
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
Python发送Email方法实例
2014/08/21 Python
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
python常用函数详解
2016/09/13 Python
Python yield与实现方法代码分析
2018/02/06 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
Python: 传递列表副本方式
2019/12/19 Python
Pytorch之parameters的使用
2019/12/31 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
python三引号如何输入
2020/07/06 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
Python类型转换的魔术方法详解
2020/12/23 Python
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
旅游管理专业大学生职业规划书
2014/02/27 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书