AngularJs學習筆記（2）——ng-include

時間 2019-12-17

標籤 angularjs 學習筆記 include 欄目 AngularJS 简体版

原文原文鏈接

編寫html文檔的時候，爲了實現代碼模塊化，增長複雜頁面的代碼可讀性和可維護性，咱們經常會想到將代碼分散寫入不一樣的HTML文件javascript

angularJS裏面的ng-include指令結合ng-controller可以很方便的實現這個目的html

ng-include 指令用於包含外部的 HTML 文件。前端

ng-include能夠做爲一個屬性，或者一個元素使用java

demo示例以下：angularjs

index.htmlweb

<!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.htmlchrome

<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, httpstomcat

提示很明顯：不能跨域訪問。經過上面的錯誤提示，能夠看到:使用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直接編輯代碼，結果仍是得用到這個所謂的前端神器，玩我呢。。。