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面向对象之体会[总结]
Nov 13 Javascript
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 Javascript
树结构之JavaScript
Jan 24 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 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
无数据库的详细域名查询程序PHP版(5)
2006/10/09 PHP
PHP HTML代码串 截取实现代码
2009/06/29 PHP
php缓存技术详细总结
2013/08/07 PHP
php实现httpRequest的方法
2015/03/13 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
python操作xml文件详细介绍
2014/06/09 Python
Python导入txt数据到mysql的方法
2015/04/08 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
python3 flask实现文件上传功能
2020/03/20 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
Python对列表的操作知识点详解
2019/08/20 Python
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
测试时代收集的软件测试面试题
2013/09/25 面试题
追悼会子女答谢词
2014/01/28 职场文书
平面设计师岗位职责
2014/09/18 职场文书
高中学生自我评价范文
2014/09/23 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
管理失职检讨书
2015/05/05 职场文书
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis