Difference between angular as global variable and parameter? - javascript

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) {

Related

AngularJS giving errror as module not defined

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.

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.

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.

Initialize Angular Service (factory) when application start

In my Angular application I adding tracing functionality, which should work as separate plugin, so if script included into HTML Angular should create service and initialize (run) it. Plugin is service because it has mandatory dependency on $rootScope.
For implementation I select to use Angular factory, like (code is in myservice.js):
angular.module('app').factory('mysevice', ['$rootScope', '$interval', serviceFunc]);
function serviceFunc($rootScope, $interval) {
return {
run: function () { ... }
}
}
And now I have problem how to immediately initialize it. My solution is to enhance Angular app run function (code is in myservice.js):
window.app.run(['mysevice', function (srvc) {
srvc.run();
}]);
Where app defined in separate main app.js file like:
var app = window.app = angular.module('app', [...]);
app.run(['$state', 'breeze', ...,
function ($state, breeze, ...) { ..real initialization.. }
The code is working fine. Both main run and run for myservice calls are fine. The application together with the service are working well, but the code looks ugly, especially storing the app in the global window object and multicasting the run function.
Is there a better way to do Angular service and initialize it immediately after app starts with some other Angular services dependencies.
You can call angular.module('app').run(function(){...}). So you will not need a global variable anymore.
Example:
angular.module('app').run(['mysevice', srvc.run.bind(srvc)]);

$injector unable to resolve required dependency

I'm trying to get into the habit of structuring my Angular projects following LIFT protocol (Locate, Identify, Flat, Try(Dry)) but I'm having some difficulty resolving dependencies from other files.
I have the following factory:
(function () {
'use strict';
angular
.module('CBPWidget', [])
.factory('apiManufacturers', apiManufacturers);
function apiManufacturers () {
function hello () {
return 'hello';
}
return {
hello: hello
};
}
})();
and the following controller:
(function () {
'use strict';
angular
.module('CBPWidget', [])
.controller('stepOneController', stepOneController);
stepOneController.$inject = ['$scope', 'apiManufacturers'];
function stepOneController ($scope, apiManufacturers) {
$scope.step = 'step1';
console.log(apiManufacturers.hello);
}
})();
and the following error is thrown:
Error: [$injector:unpr] Unknown provider: apiManufacturersProvider <- apiManufacturers <- stepOneController
My factory JS file is placed above the controller JS file in my HTML (which will be minified).
Any advice on where I'm going wrong would be greatly appreciated as I'm new to structuring projects this way.
Here you are creating CBPWidget module two times.
angular.module('CBPWidget',[]) is used for creating module and
angular.module('CBPWidget') is used for getting already created module.
so replace controller code with this :
(function () {
'use strict';
angular
.module('CBPWidget')//now you are getting CBPWidget module
.controller('stepOneController', stepOneController);
stepOneController.$inject = ['$scope', 'apiManufacturers'];
function stepOneController ($scope, apiManufacturers) {
$scope.step = 'step1';
console.log(apiManufacturers.hello);
}
})();
Your angular.module('CBPWidget', []) block code is redefining angular app, which was flushing apiManufacturers service associated with it, & it is defining controller in it. You should never do that, you should use existing module which was already defined.
Code
angular
.module('CBPWidget') //don't overide app here use existing
.controller('stepOneController', stepOneController);
From the documentation for AngularJS, you'll find that
.module('CBPWidget', [])
is different from
.module('CBPWidget')
The latter is what you need to refer to a module, the former is for defining one. In all cases except where you first define it, you should be using the latter form.

Categories