AngularJS implementing ui-grid

Question

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):-

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

Answer 1

You must inject 'ui.grid' not 'ngGrid' and change implementation:

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

Check this example: http://plnkr.co/edit/Bq8AVBVb7UxwBeBNKoRO?p=preview