Navigating with Angular in IE8

I used the following guide: http://docs.angularjs.org/guide/ie

Despite following the instructions, I am unable to view the content in IE8. Everything works fine in modern browsers. Can ngRoute helper module be used with IE8? Any advice would be appreciated.

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="demoApp">
  <head>
    <!--[if lte IE 8]>
        <script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.3.0/json3.min.js"></script>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body> 
    <div class="container">
        Search by: 
        <span class="searchby"><a href="#/nameSearch">Name</a> | <a href="#/">Back</a></span>
        <div ng-view=""></div>
    </div>
    <script src="angular.min.js"></script>
    <script src="angular-route.min.js"></script>
    <script>
        var demoApp = angular.module("demoApp", ["ngRoute"]);
        demoApp.config(function ($routeProvider) {
            $routeProvider
                .when ('/',
                    {
                        templateUrl: "views/welcomePage.html",
                        controller: "SimpleController"
                    })
                .when ('/nameSearch',
                    {
                        templateUrl: "views/nameSearch.html",
                        controller: "SimpleController"
                    })
                .otherwise ({ redirectTo: '/' });
        })

        demoApp.controller("SimpleController", function ($scope) {
        })          
    </script>   
</body>

Answer №1

After some investigation, I discovered the issue at hand. The initial view was not being displayed properly on Internet Explorer 8 and 9. However, the views were functioning as expected. To resolve this, I made a switch from ng-route to ui.router and included the following line in the header:

<meta http-equiv="X-UA-Compatible" content="IE=8">

Answer №2

Yes, ngRoute is compatible with IE8, but setting it up can be a bit tricky. I've managed to get it working in my app using the following approach:

<html xmlns:ng="http://angularjs.org" class="ng-app:demoApp" id="ng-app" ng-app="demoApp">
<head>
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!--[if lte IE 8]>
        <script src="scripts/json2.js"></script>
    <![endif]-->

     <!--[if lte IE 8]>
      <script>
        document.createElement('ng-include');
        document.createElement('ng-pluralize');
        document.createElement('ng-view');

        // You might also need these for CSS
        document.createElement('ng:include');
        document.createElement('ng:pluralize');
        document.createElement('ng:view');
      </script>
    <![endif]-->
</head>

Here's the link to Json2: https://github.com/douglascrockford/JSON-js/blob/master/json2.js

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Websocket issues with onopen function not consistently triggering in AngularJS application

I am currently working on an application that is reading data from an external device. My chosen JavaScript framework is AngularJS and I am using angular-ui for routing purposes. To ensure that the web socket can be accessed across multiple screens, I am ...

My JavaScript code is not triggering during the page load. Could this be related to .net

I've been attempting to trigger a JavaScript function upon the refresh of an update panel, but for some reason it's not working. Oddly enough, I'm using the same approach that has worked for other functions. In C#, this is what I have in th ...

The functionality of stateprovider is not functioning properly when transitioning between pages

After signing in on the login page, I want to load the program setup HTML page in my program. The configuration function for the login pages is as follows: .config(function config($stateProvider) { $stateProvider.state('login', { url: &apo ...

Utilize the power of checkboxes in Vue.js and Quasar framework to enable specific functionalities upon being

There are two checkboxes available: 'Show Active' and 'Show Live'. Initially, the 'Show Live' checkbox is disabled. I need a feature where if 'Show Active' is checked, it will enable the 'Show Live' checkb ...

Is it possible to use the inheritance type for a function parameter derived from an object?

When working with Angular, I have been using TypeScript for some time now. Previously, I used to set function parameter types in a hardcoded way, as shown below: login(email: string) {} However, I recently tried to inherit from another object and changed ...

Error Message: While attempting to use the aggregate function, I encountered a CastError where the value "totalsales" could not be cast to an ObjectId for the "_id" path in the "Order" model, as it is of type string

Encountering an error: CastError: Cast to ObjectId failed for value "totalsales" (type string) at path "_id" for model "Order". I followed the code from a tutorial but received this error. Similar error occurred when _id didn't match objectId type, bu ...

Assigning a unique identifier to a button that will vary depending on the selected radio input

UPDATED HTML: The circumstances have changed because I am no longer in my office, but the concept remains unchanged. The situation is that on a certain part of a website, users have the option to choose from multiple saved addresses. Each address has a un ...

Refreshing the page in Angular when switching route parameters

I am currently working on a web application that consists of multiple pages with tabs within one of them. To navigate between the tabs, I have implemented routes using the ng-view directive for the parent page and an ng-switch within a small div to display ...

When implementing fancybox within bxslider, numerous thumbnails are shown simultaneously

My issue arises when using fancybox within bxslider. Once I open an image, multiple thumbnails start repeating themselves endlessly. This problem only started occurring after adding bxslider. Any thoughts on why this might be happening? ...

Unable to assign the 'id' property within Datatable

Hello there, I am currently using a datatable and fetching data via AJAX. For each data entry, I add a row to my datatable. However, I keep encountering an error that reads: "Uncaught TypeError: Cannot set property 'id' of null in line code " ...

using node js to make an angular http get request

When working with MongoDB, I am able to query data and then send it as JSON to a specific URL. In the process of querying data from MongoDB router.get('fillSurvey/:ID', function (req, res) { Survey.findOne({_id:req.params.ID}, function ( ...

What is the best method for linking my chatbot's user interface to the API.AI server host using either the Python SDK or JavaScript

Looking for a way to seamlessly integrate my chatbot UI, created using HTML and CSS, with the API.AI server using the token provided by API.AI and Python SDK? Below is the HTML code snippet for reference: <!DOCTYPE html> <html> <head> ...

Create a personalized edit button for ContentTools with a unique design

I'm struggling to figure out how to customize the appearance and location of the edit button in ContentTools, a wysiwyg editor. After some research, I learned that I can use editor.start(); and editor.stop(); to trigger page editing. However, I want ...

transferring data between PHP frames

Having a PHP variable within a frame from a frameset that must be passed to two other frames at the same time is proving to be a challenge. One of those frames refreshes every 5 seconds, making it easy to extract the variable from the URL. The other frame, ...

Code snippet: Retrieve the previous and upcoming events based on the current date from an array (JavaScript/Angular)

Is there anyone who can assist me with an algorithm? I have a list of events and need to retrieve the next event and previous events based on the current date. For example: I fetch all events from an SQL database like so: events = [ {eventId:1, event ...

Trouble with loading images on hbs/nodejs

I'm currently working on a web application using NodeJs and express-handlebars. However, I am facing an issue with images not displaying correctly on the HTML page that is being rendered using handlebars. Here is the structure of my app: The root fo ...

When attempting to transfer data to a CSV file from my Firebase database, I encounter an issue where the

I am facing an issue with exporting data from my Firebase Firestore to a .csv file. I have followed all the necessary steps, but whenever I try to add the values for export, they show up as undefined. While I am not an expert in React and consider myself ...

The image fails to display when using THREE.js and Panolens.js

Trying to create a 360-degree environment with informational buttons using THREE.js and Panolens.JS However, I'm unable to resolve why the image is not appearing. Continuously encountering the error: Uncaught ReferenceError: process is not defined. ...

How to style the second child div when hovering over the first child div using makeStyles in Material UI

I am working on a web project with a parent div and two child divs. I need to apply CSS styles to the second child div when hovering over the first child div. Below is the structure of the render method. <div className={classes.parent}> <div c ...

Merge JSON objects while retaining duplicate keys

I am looking to merge two arrays containing JSON objects while retaining duplicate keys by adding a prefix to the keys. In this specific scenario, the data from 'json2' is replacing the data from 'json1' due to having identical keys, bu ...