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基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
jqPlot jquery的页面图表绘制工具
Jul 25 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 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
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
python判断数字是否是超级素数幂
2018/09/27 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
常用的HTML5列表标签
2017/06/20 HTML / CSS
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
《草虫的村落》教学反思
2014/02/16 职场文书
抄作业检讨书
2014/02/17 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
婚宴父亲致辞
2015/07/27 职场文书
清明扫墓感想
2015/08/11 职场文书
乔迁新居祝福语
2019/11/04 职场文书
Nginx本地目录映射实现代码实例
2021/03/31 Servers
vue引入Excel表格插件的方法
2021/04/28 Vue.js
pytorch 使用半精度模型部署的操作
2021/05/24 Python
Python selenium的这三种等待方式一定要会!
2021/06/10 Python
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang