I've been experimenting with Angular and have a basic test project that is functional. However, as soon as I add the ngGrid module, everything stops working.
Here's a snippet of the functioning HTML code:
<div class="navbar-header">
<a class="navbar-brand" ui-sref="home">{{hdr.title}}</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ng-click="hdr.setIndex(0)" ng-class="(index==0) ? 'active' : ''">
<a ui-sref="{{hdr.menu[0].state}}">{{hdr.menu[0].name}}</a>
</li>
<li ng-click="hdr.setIndex(1)" ng-class="(index==1) ? 'active' : ''">
<a ui-sref="{{hdr.menu[1].state}}">{{hdr.menu[1].name}}</a>
</li>
<li ng-click="hdr.setIndex(2)" ng-class="(index==2) ? 'active' : ''">
<a ui-sref="{{hdr.menu[2].state}}">{{hdr.menu[2].name}}</a>
</li>
</ul>
</div>
The script includes:
angular.module('app', ['ui.router'])
The issue arises when I update the script to include either of the following:
angular.module('app', ['ui.router','ngGgrid'])
angular.module('app', ['ngGgrid'])
Instead of the page displaying correctly, all that shows up is:
{{hdr.title}} {{hdr.menu[0].name}} {{hdr.menu[1].name}} {{hdr.menu[2].name}}
I am loading the script file using:
<script src="Scripts/ng-grid.js"></script>
Thank you in advance for any help or suggestions provided.