I'm a beginner with Angularjs. I'm going to develop an application with
this framework and Coldfusion for retrieving data from a 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 IE10 and IE11,
and I do not know why the application does not work on IE9.
The problem is that 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
for adding a contact). I think that it's a problem with the "ng-route"
dependency, but I'm not sure. Or it could be a problem with the feature
"history.pushState"...
I'm using the version AngularJS v1.2.23 and the dependency "ng-route"
(angular-route.min.js).
Could you please help me to find a solution to this problem and allow to
the application to work on IE9.
*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
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;
}
}
});
...
- view: allContacts.html
<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>
Many thanks in advance for your help.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
