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

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

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

父页面parent.html代码如下:

　　　　　　& lt; html> 　　& lt; head> 　　& lt;脚本src=" https://www.yisu.com/zixun/angular-1.2.2/angular.js "祝辞& lt;/script> 　　& lt; script> 　　函数rootController(范围、rootScope美元,美元注射器) 　　{ 　　$ rootScope.name=癮ty”; 　　rootScope美元。年龄=25; 　　} 　　& lt;/script> 　　& lt;/head> 　　& lt;身体ng-app ng-controller=皉ootController”比; 　　& lt; h2>你好,{{名称}}! & lt;/h2> 　　& lt; h2>你好,{{年龄}}! & lt;/h2> 　　& lt; div id="包括" ng-include=癱hild.html”比; 　　& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/2 "/比; 　　& lt;/div> 　　& lt;/body> 　　& lt;/html> 　　　　之前　　　　

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

　　　　　　& lt; div> 　　& lt; h2>包括{{名称}}! & lt;/h2> 　　& lt; h2>包括{{年龄}}! & lt;/h2> 　　& lt;/div> 　　　　之前　　　　

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

铬下报错信息如下:

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

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

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

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