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 相关文章推荐
Javascript 判断函数类型完美解决方案
Sep 02 Javascript
TBCompressor js代码压缩
Jan 05 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
Mar 29 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
Java无向树分析 实现最小高度树
Apr 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
星际中的相关伤害
2020/03/04 星际争霸
在PHP的图形函数中显示汉字
2006/10/09 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
canvas的神奇用法
2017/02/03 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
vue实现一个炫酷的日历组件
2018/10/08 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
Python和Java进行DES加密和解密的实例
2018/01/09 Python
python生成requirements.txt的两种方法
2019/09/18 Python
tensorflow 环境变量设置方式
2020/02/06 Python
Python中Selenium库使用教程详解
2020/07/23 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
金融专业个人的自我评价
2013/10/18 职场文书
购房协议书范本
2014/10/02 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
2014年少先队工作总结
2014/12/03 职场文书
学期个人自我总结
2015/02/13 职场文书
导游词书写之黄山
2019/08/06 职场文书