I tried to add a custom service into the ng module directly
'use strict';
angular
.module("ng")
.service('getAQueryParameterByName', ['', function(){
console.log("getAQueryParameterByName service active");
this.getParameter = function(name){
console.log("getParameter!");
}
}]);
As a result, when I try to run the service by doing getAQueryParameterByName.getParameter(var) I encountered error of
ReferenceError: getAQueryParameterByName is not defined
Usually this error is because I did not inject the service, however, I suppose, as I inject the custom service directly into the module, therefore, I really do not need to inject again into controller? But, I tried to add the service again into the controller anyway, and I received error of
Error: [$injector:unpr] Unknown provider: Provider <- <- getAQueryParameterByName
I am really confused at this point... Where did I do wrong?
Change your definition to:
'use strict';
angular
.module("ng")
.service('getAQueryParameterByName', [function(){
console.log("getAQueryParameterByName service active");
this.getParameter = function(name){
console.log("getParameter!");
}
}]);
Although, I wouldn't recommend extending the ng module. That should be viewed as a third party as far as modular architecture.
Related
I am using Angular 1.5 to write mocked services for my project by following this little example: https://embed.plnkr.co/qsmx8RUmQlXKkeXny7Rx/
This is a simple code that I have written so far:
function() {
'use strict';
angular.module('agMock', ['ag', 'ngMockE2E'])
.run(function($httpBackend) {
$httpBackend.whenGET('https://localhost:8080/api/users')
.respond({user: 'fooBarBaz', roles: ['admin', 'user']});
});
})();
'ag' is the parent module of my project for which I am going to write mocks. When I try and run this, I get the error saying 'unknown provider: $httpBackend' although I have included angular.mocks library. Can anybody take a guess what can go wrong?
So I figured out why was I getting this error. The project in which I was getting this error uses gulp to inject dependencies and generate index.html files for dev and mocked environment. In the template index.html file, I had the main parent module, "äg" referenced in the ng-app.
I skipped the part where I had to substitute "agMock" instead of "ag" in the ng-app while generating mocked index. So this was the problem. Phew.
Hi I'm trying to use $window object in the module below.
var testInterceptor = function($provide,$httpProvider,$window){
// actual Code
}
angular.module('MyApp')
.config(testInterceptor);
But the page is throwing the error like below
Uncaught Error: [$injector:modulerr] Failed to instantiate module MyApp due to:
Error: [$injector:unpr] Unknown provider: $window
Please help me to resolve this issue.
$window is a service and can't be used in config phase.
Only providers and constants can be used here.
Read the documentation. https://docs.angularjs.org/guide/module
Configuration blocks - get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.
What you could do is place your necessary code in the run phase. Because you can use services here.
Try this one. (http://codepen.io/anon/pen/jWRmqZ)
var testInterceptor = function($provide,$httpProvider,$window){
// More Code
}
angular.module('MyApp', [])
.config(['$provide','$httpProvider','$window', testInterceptor]);
I have done a web application based in ASP MVC and angularJS, and everything works fine. Now, I want deploy it. In my bundleConfig I have put BundleTable.EnableOptimizations = true; to minified my scripts.
When I launch the app get a error:
Module 'dataService' is not available! You either misspelled...
In docs I have seen an interesting thing (it fits to error):
Careful: If you plan to minify your code, your service names will get renamed and break your app.
As docs suggests I use Inline Array Annotation. My code is:
app = angular.module("MyApp", ['ui.router', 'ui.bootstrap', 'kendo.directives', 'dataService', 'LoginFactory', 'globalService']);
in module dataService is:
app.service('dataService', ['$http', function($http) {
// service logic
}]);
I thought that would fix the error, but not.
PS: I have seen 3 differents methods of injection dependencies and I have used all. In example I use that because in docs is marked like preferred
replace app.Service with app.service.
I'm trying to inject service/provider into my provider but it seems like I cannot do it the same way with factory or service? Please tell me what I did wrong, I know it's simple and probably just a stupid mistake but I cannot findout
Plnkr: http://plnkr.co/edit/B1XGDZNOpiIJVE4q3zMP?p=preview
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: $window
As mentioned by #Michael, you cannot inject dependencies into provider this way. You can provide your dependencies in get method
this.$get =['$window', 'alert', function (window, alert){
}];
You can't do this. Provider will be registered during the configuration phase. And in this phase the services are not yet available for injection. See http://docs.angularjs.org/guide/module - Module Loading & Dependencies
Also checkout http://docs.angularjs.org/guide/providers. There you will see what is available during configuration phase.
I am new to AngularJS (reading docs for a week or so) so bear with me :) I am trying to expose some 3rd party library (JayData) functionality to AngularJS controllers via the DI/service infrastructure.
Creating a service is a straightforward thing, as long as you can manage to create your own module for this, and set ng-app to that module.
var mod = angular.module('myModule', [], function ($provide) {
$provide.factory('$data', ['$scope', function (sc) {
return $data;
}]);
});
<html ng-app='myModule'></html>
In my case developers will create their own app/startup module, or will use the "default ng app" without specifying an kind of module names like <html ng-app="".
How can I register a service that is globally accessible like the built-in services like $scope or $http?
You can add components to the ng module, which is the default module, with angular.module("ng").service(...). As mentioned in the comments, this is a bad idea for several reasons, most prominently that the Angular team might provide a service with the same name later.
For reference, the preferred way is to define your own module such as myAwesomeDataModule and add it as a dependency in other modules: angular.module("myModule", ["myAwesomeDataModule"]).