3

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

MaheshGupta
  • 143
  • 3
  • 12

3 Answers3

2

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.

Jingjie Zheng
  • 452
  • 3
  • 8
  • Hi, thanks for the response. I have followed your steps still I get error, but this time it is a different error Uncaught Error: [$injector:modulerr] Failed to instantiate module techkb due to: Error: [$injector:modulerr] Failed to instantiate module ngDialog due to: Error: [$injector:nomod] Module 'ngDialog' 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. – MaheshGupta Feb 08 '15 at 12:49
  • The problem now is that we have not added the ngDialog js and css file to the html template. See my edited answer to resolve this issue. – Jingjie Zheng Feb 09 '15 at 01:21
1

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

srcrustaceo
  • 90
  • 9
1

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.

Luke Kroon
  • 1,016
  • 12
  • 19