本文實(shí)例講述了AngularJS使用ng-inlude指令加載頁(yè)面失敗的原因與解決方法。分享給大家供大家參考，具體如下：

專注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)武清免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

AngularJS中提供的ng-include指令，很類似于JSP中的用來(lái)將多個(gè)子頁(yè)面合并到同一個(gè)父頁(yè)面中，避免父頁(yè)面過(guò)大，可讀性差，不好維護(hù)。

父頁(yè)面parent.html代碼如下：

 
  
  
 
 
    
Hello, {{name}}!
    
Hello, {{age}}!
  

      
    
 

被包含的子頁(yè)面child.html代碼如下：

    
included, {{name}}!
    
included, {{age}}!

我用IE11和Chrome39運(yùn)行parent.html，發(fā)現(xiàn)child.html頁(yè)面不能包含到parent.html中。IE下報(bào)錯(cuò)信息如下：

Error: 拒絕訪問(wèn)。
   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下報(bào)錯(cuò)信息如下：

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下的提示有些晦澀，不過(guò)chrome提示很明顯：不能跨域訪問(wèn)。通過(guò)上面的錯(cuò)誤提示，可以看到:使用ng-include指令的時(shí)候，會(huì)用到AJAX請(qǐng)求XMLHttpRequest。但是我們是直接用瀏覽器打開(kāi)的parent.html，并沒(méi)有通過(guò)web容器訪問(wèn)，所以存在跨域訪問(wèn)問(wèn)題，加載child.html也就失敗了。解決辦法很簡(jiǎn)單：將代碼部署到tomcat等web容器下，通過(guò)http訪問(wèn)即可。

平時(shí)在練習(xí)JavaScript或者是JS框架的時(shí)候，一版都是使用比較輕量級(jí)的工具，不會(huì)使用像Eclipse之類IDE，我一般使用Notepad++編寫js代碼。Notepad++可以方便地調(diào)用本機(jī)安裝的瀏覽器。像ng-include這樣的指令，必須要有web容器的支持?？梢允褂们岸碎_(kāi)發(fā)神器webstorm，該工具運(yùn)行html的時(shí)候，會(huì)自動(dòng)啟動(dòng)內(nèi)置的web容器，這樣ng-include指令就不會(huì)報(bào)錯(cuò)了。

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。