127
rated 0 times
[
133]
[
6]
/ answers: 1 / hits: 6997
/ 10 Years ago, wed, october 1, 2014, 12:00:00
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.
More From » html
