I am attempting to use the ui-grid along w/ AngularJS for the first time. I was initially doing a tutorial on ngGrid... but when I looked up the reference files they all said ui-grid on them.... so now I am a bit confused.
I have referenced the following in my aspx page:-
<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" />
My Javascript to get the GridView to work looks like this:-
<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>
and finally my aspx body looks like:-
<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>
With all of this in place, I get an empty grid with the following style, referenced through my div class:-
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 300px
}
I must be missing something ... no idea what though.
When I check the console on my browser, it gives me the following error:- Uncaught Error: Unknown provider: $rootScopeProvider <- $rootScope
Edit:- I created my code in plunker and it works on the emulator but not via my Visual Studio 2013 on the aspx page (it works via an html page):-
