inject service[declared in separate file] in app.config or use it in a controller

Question

I am trying to use the code from here to show routes only when a promise is TRUE

I am following this for my directory structure

app
 - Orders
   -orders.html
   -OrderController.js
   -OrderService.js

Main-Config [app.js]

var myApp = angular.module('myApp', ['ngRoute','ngAnimate','ui.bootstrap','myApp.OrderController']);
myApp.config(function($routeProvider, $locationProvider){
 $locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});
  $routeProvider
  .when('/orders', {
    templateUrl: 'orders/orders.html',
    controller: 'OrderController',
    resolve:{
        customerExpenses: function(OrderService){
            return OrderService.getOrders($route.current.params.customerName);
        }
    }
  })
})

OrderService.js

angular.module('myApp').factory('OrderService', ['$http', function($http) {
  var sdo = {
    getNames: function() {
      var promise = $http({ 
        method: 'GET', 
        url: ''
      });
      promise.success(function(data, status, headers, conf) {
        return data;
      });
      return promise;
    }
  }
  return sdo;
}]);

I have tried the Accepted answer from here, and one of the suggestion from another SO article

angular.module('myApp')
  .service('FooService', function(){
    //...etc
  })
  .config(function(FooServiceProvider){
    //...etc
  });

As I have my service in a different file, I am trying to determine if I can use it in app.js file without using provider or is that the only way to use service in app.config?

UPDATE 1: If i want to use the service in a controller

angular.module('myApp.OrderController',[]).controller('OrderController', function ($scope) {
    $scope.displayed=[];
    $scope.displayed.push(OrderService.getNames());
});

I get OrderService not available

Have tried this:

angular.module('myApp.OrderController',[]).controller('OrderController', ['$scope','OrderService',function ($scope) {
    $scope.displayed=[];
    $scope.displayed.push(OrderService.getNames());
}]);

followed example :

angular.
module('myServiceModule', []).
 controller('MyController', ['$scope','notify', function ($scope, notify) {
   $scope.callNotify = function(msg) {
     notify(msg);
   };
 }]).
factory('notify', ['$window', function(win) {
   var msgs = [];
   return function(msg) {
     msgs.push(msg);
     if (msgs.length == 3) {
       win.alert(msgs.join("\n"));
       msgs = [];
     }
   };
 }]);

but can not use my service. my controller and service are in different files

I added this question here as I feel they are somewaht related.

you need to create provider if you wanted to access that service in `config` block http://stackoverflow.com/a/28262966/2435473 — Pankaj Parkar, Sep 03 '15 at 19:46
OrderService is not injected, change your code in very first line — Ali Adravi, Sep 03 '15 at 19:49
What's the exact reason for having it in config? Service provider helps to configure the service before it was instantiated. It doesn't matter in which file it was defined. — Estus Flask, Sep 03 '15 at 19:51
@estus: As part of my learning, I came across article i mentioned and wanted to try the code with my sample project. — user721264, Sep 03 '15 at 19:55

score 0 · Answer 1 · answered Sep 03 '15 at 19:51

You have not injected your service OrderService, change your code in very first line

var myApp = angular.module('myApp', ['ngRoute','ngAnimate', ....'OrderService'])
myApp.config(function($routeProvider, $locationProvider, OrderService){
....
})

Rest of the code looks good

inject service[declared in separate file] in app.config or use it in a controller

1 Answers1