I have develop a Liferay portlet and using AngularJS for the slient side. By using service injection such as $scope in controller will produce an error of the following:-
Error: Unknown provider: aProvider <- a
Example code:-
<script>
function PayrollCalcCtrl($scope){
}
</script>
If $scope is removed, no error will occur. Any workaround to avoid this situation.
Your JS optimizer/obfuscator is messing with your dependencies.
Take a look at the DI docs.
You'll want to define your controller in $inject or inline annotation:
var MyController = function(myScope) {
...
}
MyController.$inject = ['$scope'];
or
app.controller('MyCtrl', ['$scope', function($scope) {
...;
}]);
Related
I have an angularJS app with three modules: myApp(parent/core module), services(contains all the factories and services), and controllers(contains all the controllers).
This is my app.js file
angular.module('services', []);
angular.module('controllers', []);
var app = angular.module('myApp', ['services', 'controllers']);
I read here that setting up my modules and defining dependencies in this way will allow each of my modules to access the other without having to inject the dependencies.
Here's my index.html file
<script src="/js/app.js"></script>
<script src="/js/services/testFactory.js"></script>
<script src="/js/controllers/testCtrl.js"></script>
testFactory.js file
angular.module('services').factory('testFactory', ['$rootScope', 'apiCall', function($rootScope, apiCall){
let testFactory = {};
testFactory.testFunc = function(){
console.log('testFactory.testFunc called');
}
return testFactory;
}])
testCtrl.js file
angular.module('controllers').controller('testCtrl', ['$scope', 'testFactory', function($scope, testFactory){
console.log("inside testCtrl");
$scope.testing = function(){
console.log("testing function called");
testFactory.testFunc();
}
}])
When I call the testFactory.testFunc inside the myApp module, it functions correctly. But, when I try calling it in the controller module, I'm getting the following error
TypeError: Cannot read property 'testFunc' of undefined
I even tried injecting the service module inside the controller module as a dependency, but I still got the same error.
How do I get the service module to work inside the controller module?
I have a piece of javascript code which needs to call an angular service. I try to access the service by retrieving the angular module where the service is defined and then getting the service it self:
var messagemanagerModule = angular.injector(['ng', 'portal.services.messagemanager']);
var messageService = messagemanagerModule.get('MessageService');
messageService.postMessage('portal', moduleId, 'selectModule');
The module and service is defined like this:
angular.module('portal.services.messagemanager', ['modules.modal', 'modules.softlogoff'])
.factory('MessageService', messageService);
messageService.$inject = ['$rootScope', '$modal', '$translate', 'ConfigurationService'];
function messageService($rootScope, $modal, $translate, ConfigurationService) {
var service = {
showMessage: showMessage,
showSoftLogoff: showSoftLogoff,
postMessage: postMessage,
supportedMessages: supportedMessages
};
return service;
Unfortunately I get the error:
Error: $injector:unpr Unknown provider: $modalProvider <- $modal <- MessageService"
I think I need to inject $modal, but I don't know how to do it.
The ui-bootstrap library now uses `$uibModal' service.
So you need to inject $uibModal service.
messageService.$inject = ['$rootScope', '$uibModal', '$translate', 'ConfigurationService'];
function messageService($rootScope, $uibModal , $translate, ConfigurationService) {
var service = {
showMessage: showMessage,
showSoftLogoff: showSoftLogoff,
postMessage: postMessage,
supportedMessages: supportedMessages
};
return service;
I think you need to include the ui.bootstrap module as a dependency of your module:
include ui.bootstrap in you dependencies:
angular.module('portal.services.messagemanager', ['modules.modal','modules.softlogoff','ui.bootstrap'])
Further you need to include the ui-bootstrap-xxx.min.js somewhere in your html.
If you use ui-bootstrap in version >= 0.14 you need to change $modal to $uibModal
I like to use Popover in my AngularJS application and have included ui-bootstrap for this, but I get an injection error:
Error: [$injector:unpr] Unknown provider: ui.bootstrapProvider <- ui.bootstrap
In my index.html
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>
In my controller class:
angular
.module('app')
.controller('TeamsController', TeamsController);
TeamsController.$inject = ['Flash', '$scope', 'ui.bootstrap'];
function TeamsController(Flash, $scope, $modal)
{
//Code here
}
I cant really figure out how to do this correctly.
You have to include it as a dependency to your app:
angular.module('myModule', ['ui.bootstrap']);
More info on the Angular UI page.
Update
Working plunker. Note that I have removed the Flash dependency because I don't know what it is, you must add it yourself back in the script.
I followed all the steps to install angular-timer and it works correctly in the development build but when I try to do a production build (minified, concatinated) I get an
Uncaught Error: [$injector:modulerr]
Any thoughts?
please just make sure that you are defining your controllers "safe for Minification", you can either definde your dependencies using the $inject service or you can define your dependencies as text in your controller definitions.
I'm quoting the documentation here:
Since Angular infers the controller's dependencies from the names of
arguments to the controller's constructor function, if you were to
minify the JavaScript code for your controller, all of its
function arguments would be minified as well, and the dependency
injector would not be able to identify services correctly.
Using $inject:
function myCtrl($scope, $http) {...}
myCtrl.$inject = ['$scope', '$http'];
app.controller('myCtrl', myCtrl);
Inline annotation
function myCtrl($scope, $http) {...}
app.controller('myCtrl', ['$scope', '$http', myCtrl]);
I am still relatively new to Ionic and AngularJS and I have the following problem: I created a service in the controller.js file and now need this service at loadup (app.js) to detect which start page I will route to. How can I export the service from controller.js into some other js file so that it will become available in both files app.js and controller.js.
Thanks,
EL
You import it using angular's dependency injection.
If your controller.js looks something like:
angular.module('myModule', [])
.service('myService', ['$scope', 'otherDependency', function($scope, otherDependency){
//some service code
}]);
Then the module you want to use the service in would need to import the module where the service is located and then inject the service itself. So something along the lines of:
angular.module('app', ['myModule'])
.controller('appCtrl', ['$scope', 'myService', function($scope, myService){
//some code using your service
}]);
This documentation might help:
AngularJS services - https://docs.angularjs.org/guide/services
AngularJS dependency injection - https://docs.angularjs.org/guide/di