微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

页面parent.HTML代码如下:

rush:js;"> Hello,{{name}}!

Hello,{{age}}!

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

rush:xhtml;">

included,{{name}}!

included,{{age}}!

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

chrome下报错信息如下:

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相关内容感兴趣的读者可查看本站专题:《》及《

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐