初めて AngularJS と共に ui-grid を使用しようとしています。最初は ngGrid のチュートリアルを行っていましたが、参照ファイルを調べたところ、それらはすべて ui-grid と書かれていました....だから今は少し混乱しています。
私の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" />
GridView を機能させるための私の Javascript は次のようになります。
<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>
そして最後に私のaspx本体は次のようになります:-
<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>
これらすべてを配置すると、div クラスを介して参照される、次のスタイルの空のグリッドが得られます。
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 300px
}
私は何かが欠けているに違いない...しかし、何がわからない。
ブラウザでコンソールを確認すると、次のエラーが表示されます:- Uncaught Error: Unknown provider: $rootScopeProvider <- $rootScope
編集:- 私はplunkerでコードを作成し、エミュレーターで動作しますが、aspxページのVisual Studio 2013では動作しません(htmlページで動作します):-