How to add angular js plugins to work properly?

[axelex]

I wanted to add angular grid (http://www.angulargrid.com/angular-grid-install/index.php) to the project but I didn't managed to make it work. I added the plugin with bower and then added the 'angularGrid' as a dependency in main.js but it throws me an error: Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:modulerr] Failed to instantiate module app.controllers due to: Error: [$injector:modulerr] Failed to instantiate module angularGrid due to: Error: [$injector:nomod] Module 'angularGrid' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

• The grid is properly added and integrated in vendor.js by gulp so it should be recognized and the name is the right one (http://www.angulargrid.com/angular-grid-getting-started/index.php)

Can you help me with this? Thank you!

[jadjoubran]

Hi,

of course I can help!

So what are the steps that you follow?

Did you start by running bower install ag-grid --save?

[axelex]

yes. after that I ran gulp watch and then I checked the vendor.js and vendor.css for the new plugin and everything looked all right.

then I tried to add the new plugin as a dependency (as shown in the plugin example http://www.angulargrid.com/angular-grid-getting-started/index.php) in main.js.

• first I added for app.controllers like this: -- angular.module('app.controllers', ['ui.router', 'ngMaterial', 'ngStorage', 'restangular', 'ngMdIcons', 'angular-loading-bar', 'angularGrid']);
• then I tried adding it in the controller of the page where I wanted to add the grid (grid.js is the file) -- angular.module('app.controllers', ['angularGrid']).controller('exampleCtrl', function($scope){

I got the same error in both cases.

[jadjoubran]

hmm.. would it be possible to push a sample repo with this issue so I can fix it? If you can do this it'll make it easier for me to replicate the issue and fix it. Or else, I'll have to do it myself

Thanks!

[axelex]

Unfortunately I can't do that due to work policies. But It shouldn't take you too long to do this. just need to run angular-material-starter commands from the install section and then:

• gulp && gulp watch
• php artisan serve
• bower install ag-grid --save
• add a new sidebar link and a new route for that link.
• add a controller for the new page:

(function(){ "use strict";

angular.module('app.controllers').controller('exampleCtrl', function($scope){

    var columnDefs = [
        {headerName: "Make", field: "make"},
        {headerName: "Model", field: "model"},
        {headerName: "Price", field: "price"}
    ];

    var rowData = [
        {make: "Toyota", model: "Celica", price: 35000},
        {make: "Ford", model: "Mondeo", price: 32000},
        {make: "Porsche", model: "Boxter", price: 72000}
    ];

    $scope.gridOptions = {
        columnDefs: columnDefs,
        rowData: rowData,
        dontUseScrolls: true // because so little data, no need to use scroll bars
    };

});

})();

• and in the html part of the page add

<div ng-controller="exampleCtrl">
    <div ag-grid="gridOptions" class="ag-fresh" style="height: 100%;"></div>
</div>

this is how a simple table with this plugin should work.

[jadjoubran]

okay no worries. I'm working on it

[axelex]

Great! Thanks a lot!

[jadjoubran]

So the issue here is that, if you look at the generated vendor.js file, angularGrid is being loaded before Angular. This is happening for 2 main reasons:

• angularGrid comes before angular (alphabetically)
• and most importantly, the author of angularGrid forgot to declare angular as a dependency for angularGrid.

You can suggest that he fixes this. And as a workaround, you can just move the "angular-grid" line under "angular" in bower.json

Let me know if this works for you. I was able to fix it here

[axelex]

Works like a charm. Thanks a lot!

[shiruken1]

Necromancy's never cool, but I don't want to open a new issue, because I'm just really curious.

How do Bower packages get loaded into vendor.js?

I looked at bower.task.js, but can't figure out how

    new Task('bower-js', function() {
        return gulp.src(mainBowerFiles())
            .on('error', onError)
            .pipe(filter('**/*.js'))
            ...

manages to load restangular (which is in restangular/dist/restangular.js) or angular-material-data-table (which I just installed, and is also in the dist/ subfolder).

Awesome work, man!

[jadjoubran]

Hi @shiruken1 So mainly this package does the heavy lifting

gulp.src(mainBowerFiles())
.on('error', onError)
.pipe(filter('**/*.js'))
.pipe(concat(jsFile, {sourcesContent: true}))
.pipe(gulpIf(Elixir.config.production, uglify()))
.pipe(gulp.dest(jsOutputFolder || Elixir.config.js.outputFolder))

then we're filtering javascript files and then concatenating them into 1 file If the environment is set to production, they will be minified and finally they're saved in the jsOutputFolder which is defined in your elixir.json file