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.
Related
I'm trying to make an Angular Service that houses common functions.
I bundled the code within my MVC app:
bundles.Add(new ScriptBundle("~/bundles/Angular")
.IncludeDirectory("~/app", "*.js", true));
And I checked in Developer Tools if it actually brought in my Common Folder with Common.js :
I added Common to the App :
var app = angular.module('app',
[
'JobCtrl',
'JobSvc',
'WebsiteCtrl',
'WebsiteSvc',
'myClientCtrl',
'ClientSvc',
'MediaCompanyCtrl',
'MediaCompanySvc',
'PageAlertSvc',
'ui.bootstrap',
'ui.bootstrap.tpls',
'Common'
]
);
and to the Controller:
angular.module('app', ['ui.bootstrap', 'ui.bootstrap.tpls'])
.controller('JobCtrl',
[
'JobService',
'WebsiteService',
'MediaCompanyService',
'ProductService',
'$scope',
'$uibModal',
'PageAlertService',
'Common',
function (JobService, WebsiteService, MediaCompanyService,
ProductService, $scope, $uibModal,PageAlertService, Common)
This is what my Common.js file looks like:
angular.module('app')
.service('Common', function () {
this.heyThere = function ()
{
console.log('Just wanted to say hey there')
};
});
Whenever it is called within my JobCtrl I get a Error: $injector:unpr
Unknown Provider.
Could anyone see what I may be doing wrong where it won't recognize my Common.js file? When I move Common.js to the Services folder and try calling it within my controller it works, but not when it is in my Common Folder. Makes no sense!
Thanks in advance!
That is simply because you are defining your app..twice!!!!
angular.module('app', []) // this is where you re-define your app
.service('Common', function () {
this.heyThere = function ()
{
console.log('Just wanted to say hey there')
};
});
should be:
angular.module('app')
.service('Common', function () {
this.heyThere = function ()
{
console.log('Just wanted to say hey there')
};
});
the module function has 2 modes.. with 2 arguments you are setting up your app.. with a single argument you just getting a reference to an existing app (which is already defined before that)
Please be careful when you use the declaration of a module. You are basically reassigning the app module to different instances.
angular.module('app', [dependencies]) //Constructs a module with dependencies
angular.module('app').service(...) //Associates the components (service)
//with the app module.
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.
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) {
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.
I have a simple Angular app, calling a controller, which in turn calls a service. This service then loops through an array and returns a few strings.
If I leave the dependencies on the angular.module empty in the controller and the service it does not return the array:
app.js
angular.module('list_app', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/list', {
templateUrl: 'views/template.html',
controller: 'ListCtrl'
})
.otherwise({redirectTo: '/list_page'});
});
Controller
angular.module('list_app', [])
.controller('ListCtrl', ['$scope', 'Service', function ($scope, Service) {
Service.getList($scope);
}]);
Service
angular.module('list_app', [])
.factory(
'Service', function Service() {
function getList($scope){
var listRules = $scope.rules=['Test One', 'Test Two'];
var arrayLength = listRules.length;
for (var i = 0; i < arrayLength; i++) {
return(listRules[i]);
}
};
return {
getList: getList
}
});
But if I remove the dependancy [] from the controller and service, it works fine...
Like this:
angular.module('list_app', )...
Can anyone tell me why this is?
Thats because you only need to initialize your module once.
This happens when you use the curly braces:
angular.module('list_app', ['ngRoute'])
Afterwards you dont need them anymore as the module already is initialized.
So afterwards you can just call in all subsequent calls (controller, service):
angular.module('list_app')
Missing Include?
In order to use ngRoute you need to include angular-route before you load your controller. That would be the following (as of right now):
<script type="text/javascript" src="//code.angularjs.org/1.2.14/angular-route.min.js" />
You can also download the minified or full version of this library from the angular site.
Multiple Module Definitions
Another thing I noticed about the code is it looks like you are calling "angular.module" multiple times. You should only do this once, something like:
var list_app = angular.module('list_app', ['ngRoute']);
// define the service as an example:
list_app.factory('MyService', function Routine() {
});
// then define the controller
list_app.controller('MainController, ['$scope', function ($scope) {
}]);
The point is after you define the module once - you should use that reference to make any further declarations! This also might help fix your issue.
Side Note
One more comment is that when you try to inject a dependency that angular can't find the most common error you will see in the console is:
Uncaught Error: [$injector:modulerr] (etc.)
Whenever you see a message like this you should start to look at whether or not you are missing script includes and checking to make sure these are in the correct order.