AngularJS implémentant ui-grid

Question

J'essaye d'utiliser la ui-grid le long de w/AngularJS pour la première fois. Au départ, je faisais un tutoriel sur ngGrid ... mais quand j'ai regardé les fichiers de référence, ils m'ont tous dit ui-grid ... alors maintenant je suis un peu confus.

J'ai mentionné ce qui suit dans ma page ASPX: -

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script src="http://code.angularjs.org/1.0.5/angular.js"></script> 
<link href="Content/bootstrap.css" rel="stylesheet" />  
<script src="Scripts/jquery-1.12.0.min.js"></script> 
<script src="Scripts/ui-grid.min.js"></script> 
<link href="Content/ui-grid.min.css" rel="stylesheet" /> 

Mon Javascript pour obtenir le GridView de travailler ressemble à ceci: -

<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="secondaryContent"> 
<script type="text/javascript">  
     var app = angular.module('', ['ngGrid']); 
     app.controller('UserController', function ($scope) { 

      $scope.myData = [{ name: "xxxx", age: 50 }, 
          { name: "yyyy", age: 43 }, 
          { name: "zzzz", age: 27 }, 
          { name: "eeee", age: 29 }, 
          { name: "ffff", age: 34 }]; 

      $scope.gridOptions = { 
       data: 'myData', 
       showGroupPanel: true, 
       jqueryUIDraggable: true 
      }; 
     }); 

    </script> 
</asp:Content> 

et enfin mon corps ASPX ressemble à: -

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 


    <h1>My AngularJS Application</h1> 

    <div class="row"> 
     <div style="margin-top: 40px"></div> 
     <div data-ng-app="" data-ng-controller="UserController"> 
      <b>Employee List</b><br /> 
      <br /> 
      <div class="gridStyle" data-ng-grid="gridOptions"></div> 

Avec tout cela en place, je reçois une grille vide avec le style suivant, référencé par mon div class: -

.gridStyle { 
    border: 1px solid rgb(212,212,212); 
    width: 400px; 
    height: 300px 
} 

Je dois être raté quelque chose ... aucune idée de quoi si.

Quand je vérifie la console sur mon navigateur, il me donne l'erreur suivante: - Uncaught Erreur: fournisseur inconnu: $ rootScopeProvider < - $ rootScope

Edit: - J'ai créé mon code plunker et il fonctionne sur l'émulateur, mais pas via mon Visual studio 2013 sur la page ASPX (il fonctionne via une page html): -

http://plnkr.co/edit/L3n5CETMtlTQagNm6axK?p=preview

Answer 1

Vous devez injecter 'ui.grid' pas 'ngGrid' et la mise en œuvre du changement:

<div id="grid1" ui-grid="gridOptions" class="grid"></div> 

Vérifiez cet exemple: http://plnkr.co/edit/Bq8AVBVb7UxwBeBNKoRO?p=preview