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 读取xml,写入xml 实现代码
Jul 10 Javascript
JavaScript OOP面向对象介绍
Dec 02 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
vue组件vue-esign实现电子签名
Apr 21 Vue.js
微信小程序 解决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.ini中文版(1)
2006/10/09 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
简单实现python画圆功能
2018/01/25 Python
Django开发中的日志输出的方法
2018/07/02 Python
详解Django的CSRF认证实现
2018/10/09 Python
Django 路由系统URLconf的使用
2018/10/11 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
平面设计的岗位职责
2013/11/08 职场文书
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技