Module 'ConatactsApp' 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. var ContactsApp= angular.module('ContactsApp', [])
.run(function ($rootScope){
$rootScope.message = "Hello angular";
});
Check whether the html ng-app name is ConatactsApp or something else... if not ... change to ConatactsApp
Related
I'm trying to configure an ng-admin app. I'd like to load some data from a file before starting the configuration, however when I try to do this in a callback I get the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module adminModule due to:
Error: [$injector:nomod] Module 'adminModule' 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.
Here's the code:
$.get('/api/schema', function buildNgConfig(data) {
var adminModule = angular.module('adminModule', ['ng-admin']);
adminModule.config(['NgAdminConfigurationProvider', function (nga) {
var app = nga.application(data.label).baseApiUrl('/api/');
// ...
If I take the adminModule.config out of the ajax load callback (and use data embedded in the page so I don't need a callback) and put everything in the global scope, it works.
Is there something I need to do if I want to initialize the angular module in a function?
Okay, got this sorted out with some help from a friend. The error is a result of Angular's automatic initialization happening before your module has been created. Having:
<body ng-app="myApp">
<div ui-view></div>
in your HTML tells Angular to initialize itself immediately. Deferring initialization in a callback means your Angular module won't exist and Angular's attempt to initialize it will fail.
Angular's bootstrap process is documented here, along with instructions on how to defer initialization.
To make it work with ng-admin, remove the ng-app from the body:
<body>
<div ui-view></div>
Then in your app js, you can defer initialization. For example:
angular.element(document).ready(function() {
var myApp = angular.module('myApp', ['ng-admin']);
myApp.config(['NgAdminConfigurationProvider', function (nga) {
var app = nga.application('My App').baseApiUrl('/api/');
var someEntity = nga.entity(...
// add entities
nga.configure(app);
}]);
// Now we can manually boostrap
angular.bootstrap(document, ['myApp']);
});
This waits for page load rather than executing immediately, and everything is in the callback scope rather than global.
Includes:
angular/angular.min.js
angular-route/angular-route.min.js
angular-messages/angular-messages.min.js
This is my module.
var axipay = angular.module('axipay', [
'ngRoute',
'ngMessages',
'ngMessagesInclude',
'axipay.registration',
])
I used it like this.
<div ng-messages="form_register.phone.$error">
<div ng-messages-include="error-messages.html"></div>
</div>
This gets an error when loaded.
Failed to instantiate module ngMessagesInclude due to: Error:
[$injector:nomod] Module 'ngMessagesInclude' 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.
This working correctly without 'ngMessagesInclude'.
Ref:
https://docs.angularjs.org/api/ngMessages
https://docs.angularjs.org/api/ngMessages/directive/ngMessagesInclude
There is no module named ngMessagesInclude. Once you define the ngMessages dependency, you can access the ng-messages-include directive. So, remove the ngMessagesInclude dependency.
var axipay = angular.module('axipay', [
'ngRoute',
'ngMessages',
'axipay.registration',
])
This question already has answers here:
Angular JS, 'nomod',Module '{0}' is not available! You either misspelled
(3 answers)
Closed 7 years ago.
Uncaught Error: [$injector:nomod] Module 'myApp' 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.
http://errors.angularjs.org/1.2.16/$injector/nomod?p0=myApp
Following is my code snippet
Uncaught Error: [$injector:nomod] Module 'myApp' 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.
http://errors.angularjs.org/1.2.16/$injector/nomod?p0=myApp
Following is my code snippet
(function() {
angular.module('myApp').controller('MainCtrl', function($scope) {
$scope.data = {
Colors: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
}
});
angular.module('myApp').controller('OverviewCtrl', function($scope) {
$scope.list1 = {
title: 'AngularJS - Drag Me'
};
$scope.list2 = {};
});
}());
You are using the getter syntax, not the setter syntax when attempting to first define myApp.
You need to create the myApp module before trying to attach a controller to it. Note that it takes two parameters, a string name and an array of dependencies.
angular.module('myApp', []).controller('MainCtrl', function($scope) {
Once your module is created, you can reference it via the getter syntax:
angular.module('myApp').controller('OverviewCtrl', function($scope) {
My code is like this
App.js
angular.module('mailerApp', [
'mailerApp.services',
'mailerApp.controllers',
'ui.bootstrap',
'angular-loading-bar',
'textAngular',
'angularFileUpload'
]);
Cotrollers.js
angular.module('mailerApp.controllers').controller('MailerCntrl', ['$scope', 'FileUploader', function ($scope, FileUploader) {
}]);
Services.JS
angular.module('mailerApp.services', []).factory('rateRequestService', ['$http', rateRequestService]);
function rateRequestService($http) {
var service = { getData: getData };
return service;
function getData() {
return $http({
method: 'Get',
url: '../services/RateRequestWS.asmx/GetReadOnlyData?'
});
}
}
HTML
body ng-app="mailerApp" ng-controller="MailerCntrl">
</body>
Everything looks okay to me, But this throws an error
Uncaught Error: [$injector:nomod] Module 'mailerApp.controllers' 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.
Can any one point out What I am doing wrong here?
Instead of
angular.module('mailerApp.controllers').controller...
You need to do
angular.module('mailerApp').controller... // to add the controller to the mailerApp module
angular.module('mailerApp.controllers', []).controller... // to add the controller to a new mailerApp.controllers module
And the same goes with;
angular.module('mailerApp.services').factory...
Instead you need to
angular.module('mailerApp').factory... // add the factory to the mailerApp module
angular.module('mailerApp.services', []).factory... // add the factory to a new mailerApp.services module
When you create and angular module, you give it a name and the list of dependencies in the array;
var module = angular.module('<module_name>', [<dependencies>])
But then when you add a controller/factory to the module, you'll need to either use the module object you created.
when you write angular.module('mailerApp.controllers', [ ]), you create new module as 'mailerApp.controllers' and in second parameter you pass dependencies.
and when you write angular.module('mailerApp.controllers') it references previously created module.
But in your case your directly referencing module without creating it, therefore it gives you error for that. Same goes for other cases
Assuming I have a service MyService that has a property "data" that contains contents retrieved from 2 or 3 $http requests and stores it into "data". This "data" needs to be accessible or passed to a directive to process, (like a modal).
The service "MyService" contains an attribute "data" necessary for myDirective to process on first load.
// var app = angular.module...
app.service('MyService',...)
I have a separate directive "myDirective":
var myDirective = angular.module('myDirective', []);
myDirective.directive('control', ['Params', function(Params) {...
I tried to inject "MyService" by doing the following:
var myDirective = angular.module('myDirective', ['MyService']);
myDirective.directive('control', ['Params', function(Params) {...
Though it fails to instantiate saying:
error: [$injector:nomod] Module 'MyService' 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.
How do I properly instantiate my myDirective from myService? Is this the right approach or should I be using some controller/factory/provider?
You are treating myService as a module which it is not, it is a component of a module. You only inject modules into other modules. Once all dependent modules are injected into main module, components of all modules are directly available to other components, regardless of which module they are initially registered to.
To inject into a directive you do it the same way you are injecting Params into directive. I suspect you are needlessly creating a new module just to create a directive.
Try this way:
app.service('MyService',...);
app.directive('control', ['Params','MySerrvice', function(Params,MyService) {...
Now within the directive you have access to objects in service using MyService.propertyName
What you are trying is adding MyService service as a module to your MyDirective module which won't work.
The easy way would be to just add the directive to your app module and inject your service:
app.directive('control', ['Params', 'MyService', function(Params, MyService) {
//...
}]);
If you create extra modules for your directives and and maybe also for your services you will have to add these modules to your app module like for example (usually in app.js):
var directivesModule = angular.module('app.directives', []);
var servicesModule = angular.module('app.services', []);
var app = angular.module('app', ['app.directives', 'app.services']);
And then add your services and directives to the respective modules:
servicesModule.service('MyService',...);
directivesModule.directive('control', ['Params','MyService', function(Params, MyService) {
//...
}]);
Create one file per service/directive or a file for all services and one for all directives. Depends on the size of your app.