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技巧收藏
Apr 07 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
js实现有时间限制消失的图片方法
Feb 27 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 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 callback函数使用方法和注意事项
2015/01/23 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
javascript Excel操作知识点
2009/04/24 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
Python爬虫代理IP池实现方法
2017/01/05 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
Python实现SMTP邮件发送
2020/06/16 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
python+opencv实现车道线检测
2021/02/19 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
What is EJB
2016/07/22 面试题
电信专业应届生自荐信
2013/09/28 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
企业业务员岗位职责
2014/03/14 职场文书
装修活动策划方案
2014/08/27 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
sql字段解析器的实现示例
2021/06/23 SQL Server