AngularJS issues with injecting a new service into my controller

Question

I have a new userContext.js file which attempts to create a new service entitle "userService". This service in turn will communicate with the server and return some environmental settings, as well as a user session ID.

This all works fine when I call it from my dashboard.js into my datacontext.js controller; however I would like to actually create a service for this. I would then persist those session vars throughout the lifetime of each user session.

In my initial attempt to create the service I am getting lots of injector errors, for example :

       Error: [ng:areq] Argument 'fn' is not a function, got string

I have included it in my index.html:

  <script src="app/services/userContext.js"></script>

Here's a dashboard controller snippet where I attempt to inject 'userService' :

 (function () {
'use strict';
var controllerId = 'dashboard';
angular.module('app').controller(controllerId, ['$scope', '$routeParams', '$location', 'common', 'datacontext', 'userService', dashboard]);

function dashboard($scope, $routeParams, $location, common, datacontext, userService) {
    var getLogFn = common.logger.getLogFn;
    var log = getLogFn(controllerId);

    var vm = this;

    getRzInitParams();

    function getRzInitParams() {
        log('Initializing Server Connection...');
        var rzParams = "";
        datacontext.getRzInitParams().then(function (data) {
            rzParams = data;
            initRz(data);
        });
    }
    function initRz(data) {         
        var response;
        datacontext.initRz().then(function (data) {
            response = data[0].split(":")                
            if (response[1].match(/SUCCESS/g)) {
                log('Server init returned ' + response[1].match(/SUCCESS/g));
                openUserSession();
            }
            else {
                log('Server init failed !');
            }

        });            
    }
 }
})();

and here's a snippet from datacontext.js :

(function () {
'use strict';

var serviceId = 'datacontext';
angular.module('app').factory(serviceId, ['$http', 'common', datacontext]);

function datacontext($http, common) {
    var $q = common.$q;

    var service = {
        initRz: initRz,
        openUserSession: openUserSession,
        getRzInitParams: getRzInitParams
    };

    return service;

function initRz() {
        domain = "localhost:"
        port = "49479";
        controllerpath = "/api/init";
        space = "rz64698";
        env = "rz64698";
        cl_config = "C:\\Rz\\rz64698\\master\\bin\\cl_config.xml";

        var url = "http://" + domain + port + controllerpath + "?space=" + space + "&environment=" + env + "&clConfig=" + cl_config;
        var deferred = $q.defer();
        deferred.notify("Getting init parameters...");
        var retval = [];            
        $http({
            method: 'GET',
            encoding: 'JSON',
            headers: {
                'Access-Control-Allow-Origin': 'true'
            },                
            withCredentials: true,
            url: url
        }).success(function (data, status, headers, config) {
            retval = data;
            deferred.resolve(retval);
        });
        return deferred.promise;
    }
    function getRzInitParams() {
        var deferred = $q.defer();
        var retval = [];
        $http({
            method: 'GET',
            encoding: 'JSON',
            url: 'breeze/breeze/GetRzEnv'
        }).success(function (data, status, headers, config) {
            retval = data;
            deferred.resolve(retval);
        });            
        return deferred.promise;
    }
  }
  })();

and finally the new 'userService' service I am now creating :

     (function () {
'use strict';

var app = angular.module('app');

app.service('userService', '$http', function () {
    // define private vars
    var _rzEnvParams = [];
    var _sessionID = '';

    this.initrz = function(domain, port, controllerpath, space, env, clariteconfig) {
        domain = "localhost:"
        port = "49479";
        controllerpath = "/api/init";
        space = "rz64698";
        env = "rz64698";
        cl_config = "C:\\rz\\rz64698\\master\\bin\\clarite_config.xml";

        var url = "http://" + domain + port + controllerpath + "?space=" + space + "&environment=" + env + "&clariteConfig=" + cl_config;
        var deferred = $q.defer();
        deferred.notify("Getting Rage init parameters...");
        var retval = [];

        $http({
            method: 'GET',
            encoding: 'JSON',
            headers: {
                'Access-Control-Allow-Origin': 'true'
            },
            withCredentials: true,
            url: url
        }).success(function (data, status, headers, config) {
            retval = data;
            deferred.resolve(retval);
        });
        return deferred.promise;
    }
    this.getrzInitParams = function () {
        var deferred = $q.defer();
        deferred.notify("Getting Rage init parameters...");
        var retval = [];
        $http({
            method: 'GET',
            encoding: 'JSON',
            url: 'breeze/Rage/GetrzEnv'
        }).success(function (data, status, headers, config) {
            retval = data;
            deferred.resolve(retval);
        });
        return deferred.promise;
    }
    this.openUserSession = function() {
        domain = "localhost:"
        port = "49479";
        controllerpath = "/api/open";
        user = "";
        pass = "";
        var url = "http://" + domain + port + controllerpath + "?userid=" + user + "&pass=" + pass;
        var deferred = $q.defer();
        deferred.notify("Opening user session...");
        var retval = [];
        $http({
            method: 'GET',
            encoding: 'JSON',
            headers: {
                'Access-Control-Allow-Origin': 'true'
            },
            withCredentials: true,
            url: url
        }).success(function (data, status, headers, config) {
            retval = data;
            deferred.resolve(retval);
        });
        return deferred.promise;
    }
    this.closeUserSession = function(domain, port, controllerpath) {

    }
});
 })();

Answer 1

If you want to inject some service you should use one of this syntaxes

if you need only angular services

app.service('userService', function ($http) {
 ...

if you need custom services

app.service('myService', ['$http', 'myOtherService', function($http, myOtherService) { 
... 
}])