AngularJS giving errror as module not defined - javascript

In one file i have created module & controller as
var module = angular.module('app', []);
module.controller('ContactController', function ($scope, ContactService)
Then in second file i created service
module.service('ContactService', function ($http)
And included this service file in Main controller file. But getting error as module not defined and service not defined.

Try to give some different name while defining the module. Also make sure that you have inserted the module in the HTML.That is for example,
<html ng-app="your module definition name here">

Don't use global variable for angular.module
angular.module('app', []).controller('ContactController', function ($scope, ContactService);
angular.module('app').service('ContactService', function ($http);
Only first time you need second argument in angular.module.

Related

Failed to instantiate module myApp

Facing the following error:-
Failed to instantiate module myApp due to:
Error: [$injector:nomod]
at Error (native)
at
If i remove the content from function then I am not facing the issue but when I put it in the function legislator and try to call it I get the issue. Is there any way to solve it by keeping it in the function only. I kind of need to use it again and again.
The code can be found at:-
https://raw.githubusercontent.com/anirbanmishra/congress.php/master/web_test
You have instantiated the module inside a function and called the function inside onclick.
<html lang="en" ng-app="myApp">
<a href="#legislator" onclick="legislator()">
<script>
function legislator() {
var app = angular.module('myApp', ['angularUtils.directives.dirPagination']);
....
}
</script>
That module instantiation part should be outside.
EDIT : For your second problem, angularUtils.directives.dirPagination should not be passed as a dependency in module instantiation.
This link might help you.
var app = angular.module('myApp', ['angularUtils.directives.dirPagination']);
should be replaced with
var app = angular.module('myApp', []);
Replacing this would still give you error about legislators.length not defined... That you need to look yourself, that's not related to angular, some issue with the http request you had made to getData.php.

Why controllers is being created 2 times in my AngularJS + RequireJS application?

I am creating small application called puzometr. It is for educational needs only. I want to create this application using AngularJS. Also, I want to use RequireJS as module system.
I have strange problem. I created my test controller and I got problem: controller initialization fires two times.
Firstly, full code available here on GitHub (wait, don't click me, I will explain everything below).
So, problem is in myCtrl.js file. Here is code of this file:
define(['angular'], function (angular) {
var module = angular.module('main.myModule', []);
module.controller('main.myCtrl', function ($scope) {
console.log($scope.$id);
$scope.bob = function () {
}
})
});
It is included in main/controllers/controllers.js by this:
define(['app', 'main/controllers/myCtrl'], function (app) {
var module = angular.module('main.controllers', ['main.myModule']);
});
This file included in main.js by this code:
angular.module('main', ['ngRoute', 'main.services', 'main.controllers', 'main.directives']);
And main.js is included into app.js:
var app = angular.module('myApp', ['ngRoute', 'main', 'common']);
So, I incidentally noticed, that function definition in myCtrl controller fired two times. I put console.log there and saw this:
Can you please explain me why is this happens? Why controller is being initialised two times?
Also, I have this in ng-inspector:
So one scope is created as child for another scope. Notice, that scope with id 3 has correct controller name.
If you use ng-route to register controllers and bind them with views, then don't add them again using attributes in your html files.

Difference between angular as global variable and parameter?

I wrote a factory of Angular. There was a critical error for me. I wandered to fix it. Finally, I cleared this problem... without reason. So I need clear description of below code problem.
Here is my code A:
angular
.module('BinD', ['ngSails'])
.factory('UserService', function ($sails) {
...
});
And another B is:
(function (angular) {
'use strict';
angular
.module('BinD', ['ngSails'])
.factory('UserService', function ($sails) {
...
});
})(angular);
And the error part is:
(function (angular) {
'use strict';
angular
.module('BinD', ['ngSails'])
.controller('SignUpCtrl', function ($scope, $window, UserService) {
code B works well. code A made error message "UserServiceProvider is unknown(may?)". I really don't know why aforemetioned two same code works differently. Let me know about it.
Wrapping the .factory call in a function shouldn't make any difference. I think you must have made a different change as-well.
In your third code snippet, when you call .module with two parameters you create a new module. This would overwrite the module you created in either "Code A" or "Code B".
You are not reusing the same module, but creating a new one. Therefore it makes sense that your UserService does not exist on the new module.
Your last snippet should call .module('BinD') with only one parameter. Just the name of the module you want to use.
angular
.module('BinD')
.controller('SignUpCtrl', function ($scope, $window, UserService) {
Another option is that you only call .module once, and save it.
var app = angular.module('BinD', ['ngSails']);
Then later you can call app.controller or app.factory without having to worry about the syntax.
In your Code A or Code B in both part you had created one module BinD with the dependency of ngSails and then you are registering factory with that module, but Code A will declare a variable globally if you are using it & Code B will do the coding using IIFE pattern which will make your variable available inside the declared function only. But that doesn't related your error which you are getting.
Inside your controller you want utilize that factory, but while you are creating controller you shouldn't create a new module like by doing angular.module('BinD', ['ngSails']), which will flush the previously registered factory(or other components) with the BinD module and will create a new module with name BinD. That's why after injecting UserService inside your controller is throwing an $injector error, because the UserService is not available inside that module.
Controller
(function (angular) {
'use strict';
angular
.module('BinD') //<- utilizing already created module
.controller('SignUpCtrl', function ($scope, $window, UserService) {

Angularjs: inject Controller on module inside anonymous function

I am a bit newbiew with javascript and i am starting to use angular.js
So my question is if there is a way to inject a controller inside a module that is declared in an anonymous function
my code looks like this
app.js
(function(angular) {
var app = angular.module('Organizer', ['ngMaterial', 'ngAnimate', 'ngAria']);
})(angular);
siteController.js
(function(angular, app) {
app.controller('site', function($scope, $mdDialog)
{
var alert = $mdDialog.alert({
title: 'Test',
content: 'Testing',
ok: 'Exit'
});
$mdDialog.show(alert);
});
})(angular);
i have tried to look for ways if it is possible, but still i would like to see if anyone here could explain how this can be made if it could.
Note: I have already used angular.js before and i wanted to try a different way to declare controllers so the client wont have any way to modify it
If you create a module in Angular, then you can not obfuscate it in this way. In the console, a user can just run angular.module('Organizer') to get access to your app, and then call any method they want on it.
The reason your code won't work as written, is because you are not passing the app variable to your anonymous function. So if you want to add a controller to the Organizer module, then you would do something like this:
(function(angular)
{
angular.
module('Organizer').
controller('site', function($scope, $mdDialog)
{
...
});
})(angular);
Theres no need to wrap any of this code in self executing functions as if you are trying to keep variables out of the global scope. The only one that's global is the "angular" object.
Your app.js should only have
'use strict';
angular.module('Organizer', ['ngMaterial', 'ngAnimate', 'ngAria']);
You controller file should only have
'use strict';
angular.module('Organizer').controller('siteController', function($scope, $mdDialog) {
var alert = $mdDialog.alert({
title: 'Test',
content: 'Testing',
ok: 'Exit'
});
$mdDialog.show(alert);
});
The first call to module in app.js passes the second parameter which angular uses to instantiate your module. Subsequent calls that omit the second parameter "get" the module.

Unsure why 'userApp' module is unavailable

Just getting started with angularJS and I'm unsure as to why I'm getting module unavailable.
The first code snippet is the one referenced in the HTML (main.js).
'use strict';
angular.module('userApp')
.controller('MainCtrl', function($scope, $http) {
$scope.user = [];
$http.get('http://127.0.0.1:8080/collector/50001366562').success(function(data) {
$scope.user = data;
})
})
<html ng-app="userApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="js/controllers/main.js"></script>
</head>
<body ng-controller="MainCtrl">
{{user}}
</body>
</html>
Can someone please explain why this doesn't work?
In the chrome JS console I get the following errors:
Uncaught Error: [$injector:nomod] Module 'userApp' 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.
Uncaught Error: [$injector:modulerr] Failed to instantiate module userApp due to:
Error: [$injector:nomod] Module 'userApp' 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 function angular.module can be used both as getter and setter:
You have to use setter when creating new module
angular.module('userApp', []);
The second param here is dependencies array
When you wanna access your existing module, e. g. to add services, controllers etc you can use getter (w/o second param)
angular.module('userApp')
Getter will return you the module, it can be called many times during app lifecycle.
I'm also pretty new to Angular but when you declare a module don't you need that second parameter?
angular.module('userApp', []);
This solution is what the error message is communicating:
If registering a module ensure that you specify the dependencies as the second argument.

Categories