AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《angularjs入门与进阶教程》及《angularjs mvc架构总结》
希望本文所述对大家angularjs程序设计有所帮助。