Menu
I need some help out there. I am learning Angularjs and trying to create a service. Currently I am trying to separate everything in their modules. When I create a new module called (bac.route-manager) and try to inject it in the app config as RouterService I get an error that I do not understand the meaning or how to fix it. All my other stuff seems to work, except when I tried to add this module this unknown provider starts showing up only after I try to inject it. Please any help is appreciated.
My error
Uncaught Error: Unknown provider: RouterService from bac
My app.js file
angular.module('bac', [
'bac.route-manager'
])
.config( function bacAppConfig( $routeProvider, RouterService ) {
//I dont knwo if i can do this but right now it doesnt matter because of error
console.log(RouterService.getRoutes());
});
My route-manager.js file
angular.module('bac.route-manager', [])
.service('RouterService', function() {
this.getRoutes = function() {
return {
"/login": {
templateUrl: 'app/modules/login-manager/partials/login.tpl.html',
requiredLogin: false
},
"/dashboard": {
templateUrl: 'app/modules/dashboard-manager/partials/dashboard.tpl.html',
controller: 'DashboardController',
requiredLogin: true
}
};
};
});
I using grunt to generate the js includes in my html file but here is what that looks like with alot of stuff removed for brevity.
My index.html
<html lang="en" class="no-js" ng-app="bac">
<body>
<ng-view></ng-view>
<script type="text/javascript" src="vendor/angular/angular.js"></script>
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/modules/dashboard-manager/dashboard-manager.js"></script>
<script type="text/javascript" src="app/modules/route-manager/route-manager.js"></script>
</body>
</html>
989
ngMessages is a directive that is designed to show and hide messages based on the state of a key/value object that it listens on. The directive itself complements error message reporting with the ngModel $error object (which stores a key/value state of validation errors).
Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies. The AngularJS injector subsystem is in charge of creating components, resolving their dependencies, and providing them to other components as requested.
An AngularJS module defines an application. The module is a container for the different parts of an application. The module is a container for the application controllers. Controllers always belong to a module.
In the config phase, the services declared are not available yet. Only those who have been declared using provide will through serviceNameProvider (add Provider after the name you have defined). For example:
.provide('RouterService', function() {
var service = { };
var routes = {
"/login": {
templateUrl: 'app/modules/login-manager/partials/login.tpl.html',
requiredLogin: false
},
"/dashboard": {
templateUrl: 'app/modules/dashboard-manager/partials/dashboard.tpl.html',
controller: 'DashboardController',
requiredLogin: true
}};
service.getRoutes = function() { return routes; };
this.$get = function() { return service; }
this.setupRoute = function(data) { /* something here */ };
};
When you get a provider, all method defined on this will be available. When you access the normal service, what is injected is the return of the $get function. Depending on what you need, you either need to change your service to use provide or ask to be injected with the service in the run method:
angular.module('bac', ['bac.route-manager'])
.config(function ($routeProvider, RouterServiceProvider) {
// Here, only RouterServiceProvider.setupRoute will be available
}).run(function (RouterService) {
// Here, the service singleton return with the $get function will
// be injected
console.log(RouterService.getRoutes());
});
Edit
As a side note, I believe that even if you have defined your RouterService as a service, asking for RouterServiceProvider would still work but no method will be present as service is essentially a wrapper around provider to only return the function in the $get
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
