CODEWITHSUNDEEP
angularjs
Riki
Riki

Reputation: 341

Use service in multiple modules AngularJS

I have 2 modules that should be connected. The main module, called mainPage has the second module, called router, injected. They are in separate files. I want to use my service called userPropagatorService in mainPage and in router. This service should be used to get and set currently logged in user. I tried to inject service to router module, but I get errors. How can I achieve this?

mainPage file:

var app = angular.module('mainPage',['reg','router']);

//Returns a promise which generates our user.
app.factory('userLoginService',['$http',function ($http){

   return{
     loginService: function(username,password){

        var info = {username:username, password:password}

        var user={};

        //Returning http request because of promises
        return $http({

            url: 'webapi/users/login',
            method: 'POST',
            data: info,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            transformRequest: function(obj) {
                var str = [];
                for(var p in obj)
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                return str.join("&");
            },
            data:{username: info.username, password: info.password}

        }).then(function (response)
        {

            user = response.data
            return user;

        });

    }
   }
}]);


app.service('userPropagatorService', function(){

   return{

       get:function(){

           return this.u;
       },

       set:function(user){

           this.u = user;

       }
   }

});

router file:

var r = angular.module('router',['ngRoute'])
    .config(['$routeProvider', '$locationProvider','userPropagatorService',
        function($routeProvider, $locationProvider, userPropagatorService) {

        $locationProvider.html5Mode(true);

        $routeProvider
        .when("/home",{
            templateUrl: "pages/MainPage.html",
            controller:"homeController"
        })
        .when("/forums",{
            templateUrl: "pages/forumsPage.html",
            controller:"forumController"
        })
        .when("/topics",{
            templateUrl: "pages/topicsPage.html",
            controller:"topicsController"
        })
        .when("/comments",{
            templateUrl: "pages/commentsPage.html",
            controller:"commentsController"
        })
        .otherwise({
            redirectTo:"/home"
        });
    }])

    .controller("homeController",['$scope','$http',function($scope,$http){

        /*$http({
            url: "webapi/forums/all",
            method:"GET"
        })
        .then(function(response){
            console.log("YEA!");
            console.log(response.data);
        },
        function(response){
            console.log("NO:(");
        })*/

        $scope.username = "visitor!"
        $scope.user = userPropagatorService.get();
        if($scope.user != null){
            $scope.username=$scope.user.username + "!";
        }

    }])
    .controller("forumController",['$scope','$http',function($scope,$http){

        $scope.username = "visitor!"

    }])
    .controller("commentsController",['$scope','$http',function($scope,$http){

        $scope.username = "visitor!"

    }]);

Upvotes: 0

Views: 1096

Answers (2)

georgeawg
georgeawg

Reputation: 48948

If you want to use the userLoginService in the router module, it needs to be broken out of the main app.

var app = angular.module('mainPage',['reg','router']);

angular.module("services",[])
  .factory('userLoginService',['$http',function ($http){

    return{ 
       //Service code here
    };
}]);

Then add it as a dependency in the router module:

var r = angular.module('router',['ngRoute','services'])

Upvotes: 1

Samar Pattanayak
Samar Pattanayak

Reputation: 1

You cant inject Service "userPropagatorService" in config block. Make it a provider with $method and return function from there .

ang.provider('userPropagatorService', function(){
    return{
            get:function(){
                        console.log("in get");
        },
            set:function(user){
          },
            $get: function(){
                    return {
                        meth1: function(){

                        }
                    }
             }
   }
});

ang.config(function(userPropagatorServiceProvider){
    console.log(userPropagatorServiceProvider.meth1())
})

Upvotes: 0

Related Questions