AngularJS使用ng-inlude指令加载页面失败的原因与解决方法


Posted in Javascript onJanuary 19, 2017

本文实例讲述了AngularJS使用ng-inlude指令加载页面失败的原因与解决方法。分享给大家供大家参考,具体如下:

AngularJS中提供的ng-include指令,很类似于JSP中的<jsp:include>用来将多个子页面合并到同一个父页面中,避免父页面过大,可读性差,不好维护。

父页面parent.html代码如下:

<html>
 <head>
  <script src="angular-1.2.2/angular.js"></script>
  <script>
   function rootController($scope,$rootScope,$injector)
   {
    $rootScope.name = "aty";
    $rootScope.age = 25;
   }
  </script>
 </head>
 <body ng-app ng-controller="rootController">
    <h1>Hello, {{name}}!</h1>
    <h1>Hello, {{age}}!</h1>
  <div id="included" ng-include="'child.html'">
      <input type="button" value="2"/>
    </div>
 </body>
</html>

被包含的子页面child.html代码如下:

<div>
    <h1>included, {{name}}!</h1>
    <h1>included, {{age}}!</h1>
</div>

我用IE11和Chrome39运行parent.html,发现child.html页面不能包含到parent.html中。IE下报错信息如下:

Error: 拒绝访问。
   at Anonymous function (file:///D:/learn/angular-1.2.2/angular.js:7852:7)
   at sendReq (file:///D:/learn/angular-1.2.2/angular.js:7720:9)
   at serverRequest (file:///D:/learn/angular-1.2.2/angular.js:7454:9)

chrome下报错信息如下:

XMLHttpRequest cannot load file:///D:/learn/include.html.
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///D:/learn/include.html'.

IE下的提示有些晦涩,不过chrome提示很明显:不能跨域访问。通过上面的错误提示,可以看到:使用ng-include指令的时候,会用到AJAX请求XMLHttpRequest。但是我们是直接用浏览器打开的parent.html,并没有通过web容器访问,所以存在跨域访问问题,加载child.html也就失败了。解决办法很简单:将代码部署到tomcat等web容器下,通过http访问即可。

平时在练习JavaScript或者是JS框架的时候,一版都是使用比较轻量级的工具,不会使用像Eclipse之类IDE,我一般使用Notepad++编写js代码。Notepad++可以方便地调用本机安装的浏览器。像ng-include这样的指令,必须要有web容器的支持。可以使用前端开发神器webstorm,该工具运行html的时候,会自动启动内置的web容器,这样ng-include指令就不会报错了。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
javascript 异步页面查询实现代码(asp.net)
May 26 Javascript
appendChild() 或 insertBefore()使用与区别介绍
Oct 11 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 Javascript
快速掌握jQuery插件开发
Jan 19 #Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 #Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 #Javascript
使用JavaScript触发过渡效果的方法
Jan 19 #Javascript
详解支持Angular 2的表格控件
Jan 19 #Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 #Javascript
JS生成一维码(条形码)功能示例
Jan 19 #Javascript
You might like
laravel 4安装及入门图文教程
2014/10/29 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
php之可变变量的实例详解
2017/09/12 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
ext读取两种结构的xml的代码
2008/11/05 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
range 标准化之获取
2011/08/28 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
Python深度优先算法生成迷宫
2018/01/22 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
python如何实现图片压缩
2020/09/11 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
法人代表委托书
2014/04/04 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
综合素质自我评价评语
2015/03/06 职场文书
python 命令行传参方法总结
2021/05/25 Python