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
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.
You should add the ngDialog module in your module, like so:
angular.module('myModule', ['ngDialog']).controller('MyController'...
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.
Related
I'm working on an angularjs app, it uses ui-select but it only works on chrome.
I don't provide code because it works well in a plunker.
Have you ever see this kind of behaviour, i'm suspecting a conflict with another angular module.
Here is the list of modules that i am using.
'ngAnimate',
'ngCookies',
'ngResource',
'ngSanitize',
'ngTouch',
'ui.router',
'pascalprecht.translate',
'ui.bootstrap',
'ui.select',
'ngLodash',
'ngIntlTelInput',
'angularjs-dropdown-multiselect',
'AxelSoft',
'ngFileUpload',
'toastr',
'tmh.dynamicLocale'
I have this problem: where should I add module dependencies in mean.js (for ng-sortable)
One answer to this question was to add this code-line in the config.js file:
var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate',
'ui.router', 'ui.bootstrap', 'ui.utils', 'ui.sortable'];
The problem is that I don't have a config.js file. Instead I have a config.json file. My question is how I could do the corresponding action in my config.json?
I am using angularjs in my application, by using ngDialog the page is not loading and shows blank page
I have used like
angular.module('pswApp', ['ngRoute', 'ngAnimate', 'ngTouch', 'ngDialog', 'ui.grid', 'myApp','newApp'])
.config(['$routeProvider',
function($routeProvider) {}]);
But the page is not loaded, when i use ngDialog in the module wherever i use it. I have used the ngDialog.js file in the common html file and i load the pages using ng route
Even i used it in another js file like this
angular.module('myApp', [ 'ngDialog' ]).controller('mainCtrl',
function($scope, ngDialog) {
});
The page is not getting loaded, is there any other way to solve this issue.
You are declaring module again while defining controller.
Injection should also be in controller.
angular.module('myApp', []).controller('mainCtrl', 'ngDialog',
function($scope, ngDialog) {
});
I have a an angular app and in it I can see this coffee in the app.coffee file....
app = angular.module 'app', [
'ngRoute',
'ngResource',
'ui.router',
'app.filters',
'app.services',
'app.directives',
'app.controllers',
'app.templates',
]
angular.module('app.services', ['ngResource'])
angular.module('app.controllers',[])
angular.module('app.directives', [])
angular.module('app.filters', [])
angular.module('app.templates', [])
angular.module('app.models', [])
I don't really understand why I have to inject ngResource into the app.services module direct AND into the app module. Surely I can just wire up All dependencies into the app module and then it will allow global access to the rest of the modules?
When you write
app = angular.module 'app', [
'ngRoute',
'ngResource',
'ui.router',
'app.filters',
'app.services',
'app.directives',
'app.controllers',
'app.templates',
]
this means these are the dependencies of your app.
When you write
angular.module('app.services', ['ngResource'])
this means app.services has a dependency ngResource. About your question as to why you need to write it again. It is fairly simple, app.services uses ngResource. If you don't want the whole app to have ngResouce dependency, you can ignore it in the first line, but it has to be there for app.services
You can read more about it here
This is the first time I've tried using Angular with Wordpress. I want to inject $location into the config module so I can use it like this:
app = angular.module 'app', [ 'ngResource', 'ngRoute' ]
app.config [ '$routeProvider', '$location', ( $routeProvider, $location )->
$location.hasPrefix '!'
$location.html5Mode true
]
Unfortunately, using $location or $locationProvider with config is causing an Unknown Provider error. I've included all necessary dependencies ie. angular-route.min.js, however, it's still not resolving properly.
If I remove $location it works.
app = angular.module 'app', [ 'ngResource', 'ngRoute' ]
app.config [ '$routeProvider', ( $routeProvider )->
# ROUTES
]
EDIT
If I replace $location with $locationProvider I get Failed to instantiate module app due to: TypeError: Object # has no method 'hasPrefix'
Seems fine if you use the name $locationProvider as the name of the injectable.
Here is a plunker.
And the js:
angular.module('myApp', ['ngResource', 'ngRoute'])
.config(function($routeProvider, $locationProvider) { // provider-injector
$locationProvider.hasPrefix = '!';
$locationProvider.html5Mode = true;
});
For reference from Docs:
Configuration blocks - get executed during the provider registrations
and configuration phase. Only providers and constants can be injected
into configuration blocks. This is to prevent accidental instantiation
of services before they have been fully configured.
The error was a simple typo.
$location.hasPrefix('!');
should be
$location.hashPrefix('!');