วันพุธที่ 11 กันยายน พ.ศ. 2556

angular with ie | เมื่อจะใช้ angular โดยที่รองรับ ie

Before doing angular follow this document :) http://docs.angularjs.org/guide/ie you will be happy with ie

แปลเป็นไทยนะครับ

สรุปให้ก่อนนะ
  • ไม่ควรใช้ custom tag (ถ้าใช้ละจะต้องทำเพิ่ม)
  • ใส่ id="ng-app" ไว้ที่เดียวกับ ng-app
  • ใส่ json2 หรือ json3 ไว้ด้วย



แบบสั้น

เพื่อที่จะให้ใช้งาน angular ทำงานกับ IE ได้ควรที่ต้องทำตามขั้นตอนนี้นะ
  1. ให้ใส่ JSON.stringify (IE7 ต้องการนะ). จะใช้ JSON2 หรือ JSON3 ก็ได้.
    ดูจากบรรทัดที่ 4 - 6
    1. <!doctype html>
    2. <html xmlns:ng="http://angularjs.org">
    3. <head>
    4. <!--[if lte IE 8]>
    5. <script src="/path/to/json2.js"></script>
    6. <![endif]-->
    7. </head>
    8. <body>
    9. ...
    10. </body>
    11. </html>
  2. ใส่ id="ng-app" ไว้ที่เดียว ng-app attribute
    1. <!doctype html>
    2. <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
    3. ...
    4. </html>
  3. ห้ามใช้ custom element เช่น <ng:view>, <progress> (ให้ใช้เป็น <div ng-view>, <div progress> แทน) เพราะ IE8 หรืออาจจะต่ำกว่านั้น จะไม่สามารถอ่าน custom element ได้
  4. ถ้าจะใช้ custom element จำเป็นจะต้องทำตามด้านล่างเพื่อให้ IE ใช้งานได้อย่างมีสุข
    1. <!doctype html>
    2. <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
    3. <head>
    4. <!--[if lte IE 8]>
    5. <script>
    6. document.createElement('ng-include');
    7. document.createElement('ng-pluralize');
    8. document.createElement('ng-view');
    9.  
    10. // Optionally these for CSS
    11. document.createElement('ng:include');
    12. document.createElement('ng:pluralize');
    13. document.createElement('ng:view');
    14. </script>
    15. <![endif]-->
    16. </head>
    17. <body>
    18. ...
    19. </body>
    20. </html>
ส่วนที่สำคัญคือ (ยังไม่เคยลองเลยไม่มั่นใจครับ):
  • xmlns:ng - namespace - you need one namespace for each custom tag you are planning on using.
  • document.createElement(yourTagName) - creation of custom tag names - Since this is an issue only for older version of IE you need to load it conditionally. For each tag which does not have namespace and which is not defined in HTML you need to pre-declare it to make IE happy.

ไม่มีความคิดเห็น:

แสดงความคิดเห็น