docs(guide): updates for legacy IE7 support

- note re: id="ng-app" to bootstrap/IE partials
- added doctype/xmlns to markup
- add cond comment re: json2/3 to markup
This commit is contained in:
Brian Campbell 2013-04-10 18:46:57 -06:00 committed by Vojta Jina
parent a752e5763e
commit f24cf4b58f
2 changed files with 49 additions and 24 deletions

View file

@ -38,6 +38,10 @@ initialization.
<html ng-app> <html ng-app>
* If IE7 support is required add `id="ng-app"`
<html ng-app id="ng-app">
* If you choose to use the old style directive syntax `ng:` then include xml-namespace in `html` * If you choose to use the old style directive syntax `ng:` then include xml-namespace in `html`
to make IE happy. (This is here for historical reasons, and we no longer recommend use of to make IE happy. (This is here for historical reasons, and we no longer recommend use of
`ng:`.) `ng:`.)

View file

@ -15,33 +15,54 @@ To make your Angular application work on IE please make sure that:
1. You polyfill JSON.stringify if necessary (IE7 will need this). You can use 1. You polyfill JSON.stringify if necessary (IE7 will need this). You can use
[JSON2](https://github.com/douglascrockford/JSON-js) or [JSON2](https://github.com/douglascrockford/JSON-js) or
[JSON3](http://bestiejs.github.com/json3/) polyfills for this. [JSON3](http://bestiejs.github.com/json3/) polyfills for this.
<pre>
<!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>
</pre>
2. you **do not** use custom element tags such as `<ng:view>` (use the attribute version 2. add `id="ng-app"` to the root element in conjunction with `ng-app` attribute
<pre>
<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
...
</html>
</pre>
3. you **do not** use custom element tags such as `<ng:view>` (use the attribute version
`<div ng-view>` instead), or `<div ng-view>` instead), or
3. if you **do use** custom element tags, then you must take these steps to make IE happy: 4. if you **do use** custom element tags, then you must take these steps to make IE happy:
<pre>
<pre> <!doctype html>
<html xmlns:ng="http://angularjs.org"> <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
<head> <head>
<!--[if lte IE 8]> <!--[if lte IE 8]>
<script> <script>
document.createElement('ng-include'); document.createElement('ng-include');
document.createElement('ng-pluralize'); document.createElement('ng-pluralize');
document.createElement('ng-view'); document.createElement('ng-view');
// Optionally these for CSS // Optionally these for CSS
document.createElement('ng:include'); document.createElement('ng:include');
document.createElement('ng:pluralize'); document.createElement('ng:pluralize');
document.createElement('ng:view'); document.createElement('ng:view');
</script> </script>
<![endif]--> <![endif]-->
</head> </head>
<body> <body>
... ...
</body> </body>
</html> </html>
</pre> </pre>
The **important** parts are: The **important** parts are: