javascript - Angularjs - ng-route not working on IE9 - the views are not displayed

I'm a beginner with Angularjs. I'm going to develop an application with this framework and Coldfusion for retrieving data from the database.

I have a problem with the compatibility on IE9 (mandatory and used by default in my office). All works in Chrome and Firefox, and I do not know why the application does not work on IE9.

The view is not shown when you click on the button in the top menu (in order to display all contacts or the view with the form foradding a contact). I think that it's a problem with the "ng-route" dependency, but I'm not sure.

I'm using the version AngularJS v1.2.23 and the dependency "ng-route" (angular-route.min.js).

here my code:

index.html

<html ng-app="ContactsApp" class="ng-app:ContactsApp" id="ng-app">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Expires" content="0">
        <title>Application</title> 
        <link rel="stylesheet" href="lib/css/bootstrap-3.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="lib/css/bootstrap-3.1.1/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="css/styles.css" rel="stylesheet">
        <link rel="stylesheet" href="css/select.css" rel="stylesheet">     
    </head>  
    <body>

        <div class="container">
            <div class="spacer navbar">

                <h1 class="nav nav-pills navbar-left">Application</h1>

                <ul class="nav nav-pills navbar-right" data-ng-controller="NavbarController">
                    <li data-ng-class="{'active':getClass('/all-contacts')}"><a href="#/all-contacts">All contacts</a></li>
                    <li data-ng-class="{'active':getClass('/add-contacts')}"><a href="#/add-contacts">Add contacts</a></li>
                </ul>

            </div>        

            <div ng-view></div>

            <hr/>

            <div class="footer">
                <p>@Copy right 2014</p>
            </div>

      </div>

      <script src="lib/js/angular.min.js"></script>
      <script src="lib/js/bootstrap.min.js"></script>
      <script src="lib/js/jquery.min.js"></script>
      <script src="lib/js/angular-route.min.js"></script>              
      <script src="lib/js/ng-infinite-scroll.min.js"></script>              
      <script src="lib/js/ui-bootstrap-tpls-0.11.0.min.js"></script>          
      <script src="app/app.js"></script>
      <script src="app/appService.js"></script>                
    </body>
</html>

app.js (controller)

var app=angular.module('ContactsApp', ['ngRoute', 'ui.bootstrap']);    
app.config(function($routeProvider){
    $routeProvider.when('/all-contacts',
    {
      templateUrl: 'template/allContacts.html',
      controller: 'ctrlContacts'        
    })
    .when('/view-contacts/:contactId',
    {
      templateUrl: 'template/viewContact.html',
      controller: 'ctrlViewContacts'
    })
    .when('/search-contacts',
    {
      templateUrl: 'template/fastSearch.html',
      controller: 'ctrlContactSearch'
    })  
    .when('/add-contacts',
    {
      templateUrl: 'template/manageContact.html',
      controller: 'ctrlAddContacts'
    }) 
    .otherwise({redirectTo:'/all-contacts'});  
});    

app.controller('ctrlContacts', function ($scope, ContactService){
    $scope.contacts=null;
    $scope.search = function(searchText) {
        if (searchText.length>2) {
            ContactService.fastSearch(searchText).success(function(contacts){
                $scope.contacts = contacts; 
            }); 
        }else{
            $scope.contacts=null;
        }
    }   

    // recherche   
    $scope.searchText = null;
    $scope.razRecherche = function() {
        $scope.searchText = null;
    }   

    // tri   
    $scope.champTri = null;
    $scope.triDescendant = false;
    $scope.triEmails = function(champ) {
        if ($scope.champTri == champ) {
            $scope.triDescendant = !$scope.triDescendant;
        } else {
            $scope.champTri = champ;
            $scope.triDescendant = false;
        }   
    }

    $scope.cssChevronsTri = function(champ) {
        return {
            glyphicon: $scope.champTri == champ,
            'glyphicon-chevron-up' : $scope.champTri == champ && !$scope.triDescendant,
            'glyphicon-chevron-down' : $scope.champTri == champ && $scope.triDescendant 
        };
    }

    $scope.confirmDel = function (id) {
        if(confirm('Do you want to delete this contact?')){
            ContactService.delContact(id).success(function(){
                ContactService.getContact().success(function(contacts){
                    $scope.contacts = contacts; 
                });             
            });
        }
        $scope.orderby = orderby;
    };

    $scope.setOrder = function (orderby) {
        if(orderby === $scope.orderby){
            $scope.reverse = !$scope.reverse;
        }
        $scope.orderby = orderby;
    };

});

app.controller('NavbarController', function($scope, $location){
    $scope.getClass=function(path){

        if($location.path().substr(0,path.length) == path){
            return true;
        }else{
            return false;
        }

    }
});

...

appService.js

    app.factory('ContactService', function($http){
        var factory={};

        factory.getContact=function(id){
            return $http.get('/amadese/AngularVersion/contacts.cfc?method=getContacts&subsString=' + id);
        };

        factory.loadPersonById=function(id){
            return $http.get('/amadese/AngularVersion/contacts.cfc?method=loadPersonById&idPerson=' + id);
        };  

        factory.loadCategory=function(id){
            return $http.get('/amadese/AngularVersion/categories.cfc?method=loadCategory&typeContact=' + id);
        };  

        factory.getCountry=function(id){
            return $http.get('/amadese/AngularVersion/countries.cfc?method=getCountries&countryid=' + id);
        };

        factory.fastSearch=function(string){
            if (string){
                chaine='/amadese/AngularVersion/contacts.cfc?method=fastSearch&subsString=' + string;     
            }else{
                chaine='';      
            }
            //alert(chaine);
            return $http.get(chaine);
        };

        factory.addNewPerson=function(objContact){
            //alert(objContact);
            return $http.get('/amadese/AngularVersion/contacts.cfc?method=addNewPerson&jsStruct=' + JSON.stringify(objContact))
        };  

        return factory;
    })

allContacts.html (view)

<h4>View all contacts</h4>

<table ng-show="contacts.length"  class="table table-striped table-hover spacer">
    <thead>
        <tr>
            <th class="colPerson">
                <a ng-click="triEmails('PERSON')">Person</a>
                <span class="hSpacer" ng-class="cssChevronsTri('PERSON')"></span>
            </th>
            <th class="colCompany">
                <a ng-click="triEmails('COMPANY')">Company</a>
                <span class="hSpacer" ng-class="cssChevronsTri('COMPANY')"></span>
            </th>
            <th class="colDate">
                <a ng-click="triEmails('REQUESTTRUEDATE')">Date</a>
                <span class="hSpacer" ng-class="cssChevronsTri('REQUESTTRUEDATE')"></span>
            </th>
            <th class="colDescription">
                <a ng-click="triEmails('REQUESTDESCRIPTION')">Description</a>
                <span class="hSpacer" ng-class="cssChevronsTri('REQUESTDESCRIPTION')"></span>
            </th>
            <th class="colAction">Action</th>
        </tr>
      </thead>       
      <tbody>     
        <tr ng-repeat="contact in contacts | filter:searchText | orderBy:champTri:triDescendant" class="clickable">
        <td><a href="#/view-contacts/{{contact.ID}}">{{contact.PERSON}}</a></td>
        <td>{{contact.COMPANY}}</td>
        <td>{{contact.REQUESTTRUEDATE}}</td>
        <td>{{contact.REQUESTDESCRIPTION}}</td>     

        <td style="min-width100px;">
        <a href="#/edit-contacts/{{contact.ID}}" class="inline btn btn-primary"><span class="glyphicon glyphicon-pencil"></span></a> 
        <button class="inline btn btn-default" data-ng-click="confirmDelPerson(contact.ID)">
            <span class="glyphicon glyphicon-remove"></span>
        </button>        
        </td>
        </tr>
      </tbody> 
    </table>
    <div ng-show="busy">Loading data...</div>
  </div>

Could you please help me to solve this problem?

Many thanks in advance for your help.

I'm a beginner with Angularjs. I'm going to develop an application with this framework and Coldfusion for retrieving data from the database.

I have a problem with the compatibility on IE9 (mandatory and used by default in my office). All works in Chrome and Firefox, and I do not know why the application does not work on IE9.

I'm using the version AngularJS v1.2.23 and the dependency "ng-route" (angular-route.min.js).

here my code:

index.html

<html ng-app="ContactsApp" class="ng-app:ContactsApp" id="ng-app">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Expires" content="0">
        <title>Application</title> 
        <link rel="stylesheet" href="lib/css/bootstrap-3.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="lib/css/bootstrap-3.1.1/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="css/styles.css" rel="stylesheet">
        <link rel="stylesheet" href="css/select.css" rel="stylesheet">     
    </head>  
    <body>

        <div class="container">
            <div class="spacer navbar">

                <h1 class="nav nav-pills navbar-left">Application</h1>

                <ul class="nav nav-pills navbar-right" data-ng-controller="NavbarController">
                    <li data-ng-class="{'active':getClass('/all-contacts')}"><a href="#/all-contacts">All contacts</a></li>
                    <li data-ng-class="{'active':getClass('/add-contacts')}"><a href="#/add-contacts">Add contacts</a></li>
                </ul>

            </div>        

            <div ng-view></div>

            <hr/>

            <div class="footer">
                <p>@Copy right 2014</p>
            </div>

      </div>

      <script src="lib/js/angular.min.js"></script>
      <script src="lib/js/bootstrap.min.js"></script>
      <script src="lib/js/jquery.min.js"></script>
      <script src="lib/js/angular-route.min.js"></script>              
      <script src="lib/js/ng-infinite-scroll.min.js"></script>              
      <script src="lib/js/ui-bootstrap-tpls-0.11.0.min.js"></script>          
      <script src="app/app.js"></script>
      <script src="app/appService.js"></script>                
    </body>
</html>

app.js (controller)

var app=angular.module('ContactsApp', ['ngRoute', 'ui.bootstrap']);    
app.config(function($routeProvider){
    $routeProvider.when('/all-contacts',
    {
      templateUrl: 'template/allContacts.html',
      controller: 'ctrlContacts'        
    })
    .when('/view-contacts/:contactId',
    {
      templateUrl: 'template/viewContact.html',
      controller: 'ctrlViewContacts'
    })
    .when('/search-contacts',
    {
      templateUrl: 'template/fastSearch.html',
      controller: 'ctrlContactSearch'
    })  
    .when('/add-contacts',
    {
      templateUrl: 'template/manageContact.html',
      controller: 'ctrlAddContacts'
    }) 
    .otherwise({redirectTo:'/all-contacts'});  
});    

app.controller('ctrlContacts', function ($scope, ContactService){
    $scope.contacts=null;
    $scope.search = function(searchText) {
        if (searchText.length>2) {
            ContactService.fastSearch(searchText).success(function(contacts){
                $scope.contacts = contacts; 
            }); 
        }else{
            $scope.contacts=null;
        }
    }   

    // recherche   
    $scope.searchText = null;
    $scope.razRecherche = function() {
        $scope.searchText = null;
    }   

    // tri   
    $scope.champTri = null;
    $scope.triDescendant = false;
    $scope.triEmails = function(champ) {
        if ($scope.champTri == champ) {
            $scope.triDescendant = !$scope.triDescendant;
        } else {
            $scope.champTri = champ;
            $scope.triDescendant = false;
        }   
    }

    $scope.cssChevronsTri = function(champ) {
        return {
            glyphicon: $scope.champTri == champ,
            'glyphicon-chevron-up' : $scope.champTri == champ && !$scope.triDescendant,
            'glyphicon-chevron-down' : $scope.champTri == champ && $scope.triDescendant 
        };
    }

    $scope.confirmDel = function (id) {
        if(confirm('Do you want to delete this contact?')){
            ContactService.delContact(id).success(function(){
                ContactService.getContact().success(function(contacts){
                    $scope.contacts = contacts; 
                });             
            });
        }
        $scope.orderby = orderby;
    };

    $scope.setOrder = function (orderby) {
        if(orderby === $scope.orderby){
            $scope.reverse = !$scope.reverse;
        }
        $scope.orderby = orderby;
    };

});

app.controller('NavbarController', function($scope, $location){
    $scope.getClass=function(path){

        if($location.path().substr(0,path.length) == path){
            return true;
        }else{
            return false;
        }

    }
});

...

appService.js

    app.factory('ContactService', function($http){
        var factory={};

        factory.getContact=function(id){
            return $http.get('http://dev.remede.eurostat.cec/amadese/AngularVersion/contacts.cfc?method=getContacts&subsString=' + id);
        };

        factory.loadPersonById=function(id){
            return $http.get('http://dev.remede.eurostat.cec/amadese/AngularVersion/contacts.cfc?method=loadPersonById&idPerson=' + id);
        };  

        factory.loadCategory=function(id){
            return $http.get('http://dev.remede.eurostat.cec/amadese/AngularVersion/categories.cfc?method=loadCategory&typeContact=' + id);
        };  

        factory.getCountry=function(id){
            return $http.get('http://dev.remede.eurostat.cec/amadese/AngularVersion/countries.cfc?method=getCountries&countryid=' + id);
        };

        factory.fastSearch=function(string){
            if (string){
                chaine='http://dev.remede.eurostat.cec/amadese/AngularVersion/contacts.cfc?method=fastSearch&subsString=' + string;     
            }else{
                chaine='';      
            }
            //alert(chaine);
            return $http.get(chaine);
        };

        factory.addNewPerson=function(objContact){
            //alert(objContact);
            return $http.get('http://dev.remede.eurostat.cec/amadese/AngularVersion/contacts.cfc?method=addNewPerson&jsStruct=' + JSON.stringify(objContact))
        };  

        return factory;
    })

allContacts.html (view)

<h4>View all contacts</h4>

<table ng-show="contacts.length"  class="table table-striped table-hover spacer">
    <thead>
        <tr>
            <th class="colPerson">
                <a ng-click="triEmails('PERSON')">Person</a>
                <span class="hSpacer" ng-class="cssChevronsTri('PERSON')"></span>
            </th>
            <th class="colCompany">
                <a ng-click="triEmails('COMPANY')">Company</a>
                <span class="hSpacer" ng-class="cssChevronsTri('COMPANY')"></span>
            </th>
            <th class="colDate">
                <a ng-click="triEmails('REQUESTTRUEDATE')">Date</a>
                <span class="hSpacer" ng-class="cssChevronsTri('REQUESTTRUEDATE')"></span>
            </th>
            <th class="colDescription">
                <a ng-click="triEmails('REQUESTDESCRIPTION')">Description</a>
                <span class="hSpacer" ng-class="cssChevronsTri('REQUESTDESCRIPTION')"></span>
            </th>
            <th class="colAction">Action</th>
        </tr>
      </thead>       
      <tbody>     
        <tr ng-repeat="contact in contacts | filter:searchText | orderBy:champTri:triDescendant" class="clickable">
        <td><a href="#/view-contacts/{{contact.ID}}">{{contact.PERSON}}</a></td>
        <td>{{contact.COMPANY}}</td>
        <td>{{contact.REQUESTTRUEDATE}}</td>
        <td>{{contact.REQUESTDESCRIPTION}}</td>     

        <td style="min-width100px;">
        <a href="#/edit-contacts/{{contact.ID}}" class="inline btn btn-primary"><span class="glyphicon glyphicon-pencil"></span></a> 
        <button class="inline btn btn-default" data-ng-click="confirmDelPerson(contact.ID)">
            <span class="glyphicon glyphicon-remove"></span>
        </button>        
        </td>
        </tr>
      </tbody> 
    </table>
    <div ng-show="busy">Loading data...</div>
  </div>

Could you please help me to solve this problem?

Many thanks in advance for your help.

Share Improve this question edited Oct 6, 2014 at 8:26 asked Oct 1, 2014 at 11:42 coeurdange57 7432 gold badges10 silver badges29 bronze badges

1 Why is this tagged as 'ColdFusion'? – Scott Stroz Commented Oct 1, 2014 at 12:03
The file appService.js contains functions allowing to retrieve data from the database thanks to cfc files – coeurdange57 Commented Oct 1, 2014 at 12:21
Have you tried removing the # from the links in the <a href...> tags? – Fordio Commented Oct 6, 2014 at 8:47
Yes,but it doesn't work anymore on all browser – coeurdange57 Commented Oct 6, 2014 at 9:46

Add a comment |

3 Answers 3

Sorted by: Reset to default 8

I have found the solution by adding the following "meta" tag in the "head" part of the page:

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

With this tag, all works now perfectly in IE9.

I ran into the same problem where I just got a blank page in IE 9. In chrome, FF and IE 10 and 11 routing worked fine and the first page of my app, the login page, would appear. I tried the meta tag but it did not fix the issue. I also tried moving ng-app to the body tag. Still didn't fix it. One other strange thing was when I opened IE developer tools suddenly it would work and my login page would appear. I did some additional searching and found that using console.log anywhere in the JavaScript can cause issues in IE. Once I removed all console.log calls in JS files, added the meta tag and moved ng-app to the body tag, routing worked on IE 9 in both standard and compatibility mode.

This may be a shot in the dark but I have seen it happen before ..

Try moving

ng-app="ContactsApp" class="ng-app:ContactsApp" id="ng-app"

To the body tag and not the html tag

I don't know why this happens but I have had a similar issue, moving the tag to the body fixed it for me

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Angularjs - ng-route not working on IE9 - the views are not displayed - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)