Implémentation d'une grid avec Angularjs

Bonjour,

j'essaye d'implémenter une grid (ui-grid) et je n'y arrive pas

Voici mon fichier html
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!doctype html> <html lang="en" ng-app="phonecatApp"> <head> <meta charset="utf-8"> <title>Google Phone Gallery</title> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="css/app.css"> <script src="bower_components/angular/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> <script src="bower_components/ui-grid/ui-grid.js"></script> <script src="bower_components/ui-grid/ui-grid.css"></script> <script src="js/controllers.js"></script> </head> <body ng-controller="PhoneListCtrl"> <div id="grid1" ui-grid="gridOptions" ui-grid-grouping class="grid"></div> </body> </html>
Voici mon controller et une directive
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 var phonecatApp = angular.module('phonecatApp', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.grouping']); phonecatApp.directive('fakemax', function () { return function(scope, iElement, iAttrs) { var value = iAttrs.val; value = value.replace("max:", ""); iElement[0].innerHTML = value; } }); phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', '$interval', 'uiGridGroupingConstants', function($scope, $http, $interval, uiGridGroupingConstants ) { console.log('ca passe'); $scope.gridOptions = { enableFiltering: true, treeRowHeaderAlwaysVisible: false, columnDefs: [ { name: 'a',field: 'a', displayName: 'A' , width: '2%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div class="ui-grid-cell-contents" > <fakemax val="{{COL_FIELD}}" /></div>'}, { name: 'b',field: 'b', displayName: 'B' , width: '2%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div class="ui-grid-cell-contents" > <fakemax val="{{COL_FIELD}}" /></div>'}, { name: 'c',field: 'c', displayName: 'C' , width: '2%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div class="ui-grid-cell-contents" > <fakemax val="{{COL_FIELD}}" /></div>'}, { name: 'd',field: 'd', displayName: 'D' , width: '2%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div class="ui-grid-cell-contents" > <fakemax val="{{COL_FIELD}}" /></div>'}, { name: 'e',field: 'e', displayName: 'E' , width: '2%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div class="ui-grid-cell-contents" > <fakemax val="{{COL_FIELD}}" /></div>'}, { name: 'id',field: 'id', displayName: 'N° CF', grouping: { groupPriority: 0 }, sort: { priority: 0, direction: 'asc' }, width: '10%', cellTemplate: '<span ng-if="row.groupHeader && col.grouping.groupPriority === row.treeLevel">{{row.getProperty(col.field)}}</span><span ng-if="!(row.groupHeader && col.grouping.groupPriority === row.treeLevel)">{{row.entity.partNumber}}</span>' }, { name: 'description',field: 'description', displayName: 'Description', width: '30%', cellTemplate: '<span ng-if="row.groupHeader && col.grouping.groupPriority === row.treeLevel">{{row.getProperty(col.field)}}</span><span ng-if="!(row.groupHeader && col.grouping.groupPriority === row.treeLevel)">{{row.entity.partDescription}}</span>' }, { name: 'manufacSiteCode',field: 'manufacSiteCode', displayName: 'Manufactoring Site Code' , width: '10%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div class="ui-grid-cell-contents" > <fakemax val="{{COL_FIELD}}" /></div>'}, { name: 'nissanLocalCode',field: 'nissanLocalCode', displayName: 'Nissan Local code' , width: '10%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div class="ui-grid-cell-contents" > <fakemax val="{{COL_FIELD}}" /></div>'}, { name: 'supplierName',field: 'supplierName', displayName: 'Supplier Name' , width: '10%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div class="ui-grid-cell-contents" > <fakemax val="{{COL_FIELD}}" /></div>'}, { name: 'town',field: 'town', displayName: 'Town' , width: '10%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div class="ui-grid-cell-contents" > <fakemax val="{{COL_FIELD}}" /></div>'}, { name: 'partNumber',field: 'partNumber', visible: false }, { name: 'partDescription',field: 'partDescription', visible: false } ], onRegisterApi: function( gridApi ) { $scope.gridApi = gridApi; } }; $http.get('phones/phones1.json').success(function(data) { $scope.gridOptions.data = data; }); $scope.orderProp = 'age'; }]);
déjà ici je ne suis pas arrivé à trouver où télécharger "ui.grid.grouping" et "uiGridGroupingConstants"

Et voici un extrait de mon fichier Json pour mes data (je sais qu'il est valide)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 [ { "description": "description1", "a": 1, "b": 3, "c": 3, "d": 2, "e": 3, "id": 1000, "manufacSiteCode": "manufacSiteCode1", "nissanLocalCode": "nissanLocalCode1", "supplierName": "supplierName1", "town": "town1", "partNumber": "part1", "partDescription": "partDescription1" }, { "description": "description1", "a": 1, "b": 3, "c": 3, "d": 2, "e": 3, "id": 1000, "manufacSiteCode": "manufacSiteCode1", "nissanLocalCode": "nissanLocalCode1", "supplierName": "supplierName1", "town": "town1", "partNumber": "part2", "partDescription": "partDescription2" }, ... .... ]
La page que j'obtient est la suivante
Pièce jointe 191471

Suite .................

Pièce jointe 191472

Et les logs que j'obtiens dans ma console Firebug sont les suivants

Citation:

Couleur attendue, mais « auto » trouvé. Couleur attendue, mais « -webkit-focus-ring-color » trouvé. Une fin de valeur était attendue, mais « -webkit-focus-ring-color » a été trouvé. Erreur d'analyse de la valeur pour « outline ». Déclaration abandonnée. bootstrap.css:1681:15
Pseudo-classe ou pseudo-élément « -ms-input-placeholder » inconnu. Jeu de règles ignoré suite à un mauvais sélecteur. bootstrap.css:1718:14
Pseudo-classe ou pseudo-élément « -webkit-input-placeholder » inconnu. Jeu de règles ignoré suite à un mauvais sélecteur. bootstrap.css:1721:15
Propriété « user-select » inconnue. Déclaration abandonnée. bootstrap.css:2007:21
Couleur attendue, mais « auto » trouvé. Couleur attendue, mais « -webkit-focus-ring-color » trouvé. Une fin de valeur était attendue, mais « -webkit-focus-ring-color » a été trouvé. Erreur d'analyse de la valeur pour « outline ». Déclaration abandonnée. bootstrap.css:2016:15
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée. bootstrap.css:2036:10
« none », URL, ou fonction filter attendu, mais « progid » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée. bootstrap.css:3074:10
Erreur d'analyse de la valeur pour « background-image ». Déclaration abandonnée. bootstrap.css:4540:20
Erreur d'analyse de la valeur pour « background-image ». Déclaration abandonnée. bootstrap.css:4552:20
Erreur d'analyse de la valeur pour « background-image ». Déclaration abandonnée. bootstrap.css:4559:20
Erreur d'analyse de la valeur pour « background-image ». Déclaration abandonnée. bootstrap.css:4566:20
Erreur d'analyse de la valeur pour « background-image ». Déclaration abandonnée. bootstrap.css:4573:20
Propriété « zoom » inconnue. Déclaration abandonnée. bootstrap.css:4579:6
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée. bootstrap.css:5066:10
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée. bootstrap.css:5074:10
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée. bootstrap.css:5140:10
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée. bootstrap.css:5144:10
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée. bootstrap.css:5204:10
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée. bootstrap.css:5208:10
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée. bootstrap.css:5472:10
Erreur d'analyse de la valeur pour « background-image ». Déclaration abandonnée. bootstrap.css:5476:20
« none », URL, ou fonction filter attendu, mais « progid » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée. bootstrap.css:5478:10
Erreur d'analyse de la valeur pour « background-image ». Déclaration abandonnée. bootstrap.css:5484:20
« none », URL, ou fonction filter attendu, mais « progid » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée. bootstrap.css:5486:10
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée. bootstrap.css:5493:10
Une fin de valeur était attendue, mais « \9 » a été trouvé. Erreur d'analyse de la valeur pour « background-color ». Déclaration abandonnée. bootstrap.css:5546:25
SyntaxError: illegal character ui-grid.css:5:0
ca passe controllers.js:14:3
Déclaration attendue, mais « { » trouvé. Passage à la déclaration suivante. index.html:1:6
Sélecteur attendu. Jeu de règles ignoré suite à un mauvais sélecteur. index.html:1:19
Déclaration attendue, mais « { » trouvé. Passage à la déclaration suivante. index.html:5:10
Déclaration attendue, mais « { » trouvé. Passage à la déclaration suivante. index.html:5:43
Déclaration attendue, mais « { » trouvé. Passage à la déclaration suivante. index.html:5:77
Erreur d'analyse de la valeur pour « height ». Déclaration abandonnée. index.html:6:14
Déclaration attendue, mais « { » trouvé. Passage à la déclaration suivante. index.html:9:10
Erreur d'analyse de la valeur pour « border-bottom-width ». Déclaration abandonnée. index.html:10:27
Sélecteur attendu. Jeu de règles ignoré suite à un mauvais sélecteur. index.html:13:4
Sélecteur attendu. Jeu de règles ignoré suite à un mauvais sélecteur. index.html:14:4
Sélecteur attendu. Jeu de règles ignoré suite à un mauvais sélecteur. index.html:22:4
Erreur d'analyse de la valeur pour « margin-left ». Déclaration abandonnée. index.html
« : » attendus, mais « } » trouvé. Déclaration abandonnée. index.html

Merci d'avance pour votre aide