ngDialog in mean.js application

3
votes

I have created a webapp with MeanJS. I want to use ngDialog in the application, but not sure how and where to add the ngDialog.js in the application. Im trying to inject the ngDialog in the controller as shown below, but everytime error as unknown provider

angular.module('myModule').controller('MyController', ['$scope', '$http', 'ngDialog', function ($scope, $http, ngDialog) {

error : Error: [$injector:unpr] Unknown provider: ngDialogProvider <- ngDialog

Can anyone please let me know how to include the ngDialog in the meanjs application.

Thanks in advance

3
angularjsangularjs-directivemeanjs

3 Answers

2
votes

You should use bower to install ngDialog first. In your application root (where bower.json is located), issue the following command,

bower install --save ngDialog

Then, make sure you add ngDialog module in the app level. The following answer is specific to MEAN.JS.

In file public/config.js, find the line

var applicationModuleVendorDependencies = ['ngResource', 'ngCookies', 'ngAnimate', 'ngTouch', 'ngSanitize', 'ui.router', 'ui.bootstrap', 'ui.utils'];

Add 'ngDialog' to the end of the list

var applicationModuleVendorDependencies = ['ngResource', 'ngCookies', 'ngAnimate', 'ngTouch', 'ngSanitize', 'ui.router', 'ui.bootstrap', 'ui.utils', 'ngDialog'];

Then, include ngDialog's CSS and JavaScript file into the HTML template of the Angular application.

In file config/env/all.js, find assets.lib.css, append 'public/lib/ngDialog/css/ngDialog.min.css' to the list.

In the same file, find assets.lib.js, append 'public/lib/ngDialog/js/ngDialog.min.js' to the list.

1
votes

You should add the ngDialog module in your module, like so: angular.module('myModule', ['ngDialog']).controller('MyController'...

1
votes

The original answer is still correct but for the new Mean.js 0.4 some stuff changed.

You still use 

bower install --save ngDialog

to install ngDialog.

To add the dependency 'ngDialog' go to modules/core/client/app/config.js and add

var applicationModuleVendorDependencies = ['ngResource', 'ngCookies', 'ngAnimate', 'ngTouch', 'ngSanitize', 'ui.router', 'ui.bootstrap', 'ui.utils', 'ngDialog'];

Then this is where I struggled.

To include ngDialog's CSS and JavaScript file into the HTML template of the Angular application go to

config/assets/default.js

and under client.lib.css add 'public/lib/ng-dialog/css/ngDialog.min.css'

and client.lib.js add 'public/lib/ng-dialog/js/ngDialog.min.js' .

Note that the path of ngDialog changed to ng-dialog.