Menu
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('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.
624
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.
60
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With