CODEWITHSUNDEEP
javascriptjqueryangularjsangular-ui-router
Dade
Dade

Reputation: 241

using angular router ui with trNgGrid issues

I've been working on a fairly large application and am starting to dig much deeper in AngularJS then I have before. Most of the stuff I've done before has been pretty simple (image galleries, navigation, etc) and I've never had multiple controllers, modules and plugins.

Now I have two plugins (Angular UI Router and trNgGrid) that I'm trying to use together and they don't seem to be working very well together.

The page I'm using trNGrid is an internal page. I have a search feature that is supposed to return a JSON file and I need to take the data and put it into a table with some basic grid controls.

I have one main template (index) and then I'm using partials with UI Router to insert the HTML dynamically for the various pages.

The search page html looks like this:

Search Results 
<div ng-controller="MainCtrl">
    <table tr-ng-grid items='myItems'>

    </table>
</div>

Then I have both the UI Router and the trNgGrid modules in the same app.js file:

var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'global/partials/home.html'
        })
        .state('search', {
            url: '/search',
            templateUrl: 'search/partials/search.html'
        })
});


angular.module('routerApp', ['trNgGrid'])
    .controller("MainCtrl", ["$scope", function ($scope) {
        $scope.myItems = [{name: "Moroni", age: 50},
                 {name: "Tiancum", age: 43},
                 {name: "Jacob", age: 27},
                 {name: "Nephi", age: 29},
                 {name: "Enos", age: 99}];
        }]);

When you click to the search page, nothing happens and it seems to break everything. No console warnings, no nothing. Take the trNgGrid module out and everything works fine.

I do have the ng-app directive in place that bootstraps the app, I've checked to make sure I have no 404 errors, and have all the scripts in place and they're all loading on the index.html page.

Should I put the trNgGrid module in a separate file? This is going to be a big app so having a ton of different modules in different files seems to be a temporary fix and will cause me headaches later on.

Right now, I'm just trying to get these two to work together. If there's another alternative which would be easier to work with, I'm fine with that.

Upvotes: 1

Views: 359

Answers (1)

Matt M
Matt M

Reputation: 3779

I believe you're overwriting your module with this line:

angular.module('routerApp', ['trNgGrid'])

Try doing this instead:

var routerApp = angular.module('routerApp', ['ui.router', 'trNgGrid']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/home');

$stateProvider
    .state('home', {
        url: '/home',
        templateUrl: 'global/partials/home.html'
    })
    .state('search', {
        url: '/search',
        templateUrl: 'search/partials/search.html'
    })
});


routerApp.controller("MainCtrl", ["$scope", function ($scope) {
    $scope.myItems = [{name: "Moroni", age: 50},
             {name: "Tiancum", age: 43},
             {name: "Jacob", age: 27},
             {name: "Nephi", age: 29},
             {name: "Enos", age: 99}];
    }]);

Upvotes: 2

Related Questions