編寫html文檔的時候，為了實現代碼模塊化，增加復雜頁面的代碼可讀性和可維護性，我們常常會想到將代碼分散寫入不同的HTML文件
angularJS里面的ng-include指令結合ng-controller能夠很方便的實現這個目的
ng-include 指令用於包含外部的 HTML 文件。
ng-include可以作為一個屬性，或者一個元素使用
demo示例如下：
index.html
<!doctype html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>demo</title> <!-- angularjs引用 --> <script type="text/javascript" src="angular/angular.min.js" charset="utf-8"></script> <script type="text/javascript" src="subPage.controller.js" ></script> </head> <body ng-controller="myCtrl"> <div ng-include="'subPage.html'"></div> <!-- 路徑里面必須帶上單引號 --> </body> </html>
subPage.html
<div id="subPage"> <label>{{title}}<label> <input ng-model="value"> <img src="eg_tulip.jpg" alt="上海鮮花港 - 郁金香" style="width:400px;height:200px" /> </div>
subPage.controller.js
var app = angular.module('myApp',[]);
app.controller("myCtrl",function($scope){
$scope.title="類型";
$scope.value="圖片";
});
直接在google瀏覽器上運行index.HTML，報錯
XMLHttpRequest cannot load file:///D:/learn/include.html.
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https
提示很明顯：不能跨域訪問。通過上面的錯誤提示，可以看到:使用ng-include指令的時候，會用到AJAX請求XMLHttpRequest
像ng-include這樣的指令，必須要有web容器的支持。直接用瀏覽器打開的index.html，並沒有通過web容器訪問，所以存在跨域訪問問題
解決方法：
1.將代碼部署到tomcat或者iis等web容器下，通過http訪問即可
2.可以使用前端開發神器webstorm，該工具運行html的時候，會自動啟動內置的web容器
在iis中發布出來，運行，又出現了中文亂碼問題，如下：
原因應該是HTML中指定了<meta charset="utf-8">，但是我的文件全部是用editplus編輯的，默認保存的格式是UTF-8
改格式，運行，還是有部分中文亂碼，百般查詢，結果大概如下：
於是在webstorm中打開文件，右鍵菜單中重新修改編碼格式，如下：
finally，over！
PS：本來是嫌webstorm太過笨重，占用內存太高炸雞吃不消，才轉而使用editplus直接編輯代碼，結果還是得用到這個所謂的前端神器，玩我呢。。。