js STUDIO

Internet Explorer最適化

このドキュメントでは、カスタムHTML属性とタグを扱う際の、Internet Explorer(IE)固有の事について説明をします。 AngularアプリケーションをIE8、またはその前のバージョンで動作保証する予定がある場合に読んで下さい。

ショートバージョン

IEをAngularアプリケーション上で動作させるために、次のことを確認してください。

  1. 必要に応じて、JSON.stringifyのPolyfill(古いブラウザにモダンブラウザの機能を提供すること)を行って下さい。 JSON2またはJSON3を、 このPolyfillに使用することが出来ます。 
    <!doctype html>
<html xmlns:ng="http://angularjs.org">
  <head>
    <!--[if lte IE 8]>
      <script src="/path/to/json2.js"></script>
    <![endif]-->
  </head>
  <body>
    ...
  </body>
</html>
  2. id="ng-app"をng-app属性のあるルート要素に追加してください。 
    <!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
  ...
</html>
  3. <ng:view>のような、カスタム要素タグを使用しないで下さい。 (代わりに、<div ng-view>の属性バージョンの方を使用してください。)
  4. もし、カスタムタグを使用するのであれば、下記の手順を行わなければいけません。 
    <!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
  <head>
    <!--[if lte IE 8]>
      <script>
        document.createElement('ng-include');
        document.createElement('ng-pluralize');
        document.createElement('ng-view');

        // Optionally these for CSS
        document.createElement('ng:include');
        document.createElement('ng:pluralize');
        document.createElement('ng:view');
      </script>
    <![endif]-->
  </head>
  <body>
    ...
  </body>
</html>

重要な部分は、

xmlns:ng 名前空間
使用する予定のある各カスタムタグ用の名前空間を必要とします。
document.createElement(yourTagName) カスタムタグ名の作成
これは古いバージョンのIEのみでの問題であり、状況に応じて読み込む必要があります。 名前空間を持たずHTMLに定義されていない各タグは、IEのために予め宣言しておく必要があります。

 Back to top

© 2017 Google
Licensed under the Creative Commons Attribution License 3.0.

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。