AngularJS - How to load a service from other app

Question

I have this angular code:

This is my controller:

MyApp.controller('vtCustomerController', function ($scope, messageBus, customerDetails, $http, $q) {


   $scope.loadCustomerDetail = function (customerID) {
        customerDetails.loadCustomerDetails(customerID);

    };


});

This is my service:

MyApp.factory('customerDetails', function($rootScope,$http, $q) {

        var customer = {};

        getCustomer = function()
        {
            return customer;
        };

       loadCustomerDetails = function(customerID) {
             $http.post('/customer/data/getsingleexpanded',
                   {'customer':customerID})
                    .success(function(data,status, headers, config){
                        angular.copy(data, customer);
                    })
                    .error(function(data,status, headers, config){
                        console.log(status);
                    });   
        };
});

And this is an autocomplete method:

angular.module('text-autocomplete',[])
                .directive('text-autocomplete', function(){
                    return {
                                require: '^ngModel',
                                restrict: 'A',
                                scope:{
                                    ngModel:'=',
                                    datasource:'=',
                                    minlength:'=',
                                    itemid:'='
                                },
                                link: function(scope, elem, attr, ctrl) {

                                        elem.autocomplete({
                                            autoFocus : !_.isUndefined(attr.autofocus)? true : false,
                                            open: function(event,ui){console.log('autocomplete open message received')},
                                            source: function(request,response){
                                                    scope.datasource(ctrl.$viewValue)
                                                         .then(function(result){
                                                             console.log('data source then function called');
                                                             console.log(result.data);
                                                                response(result.data)});
                                                },
                                            minLength: scope.minlength,
                                            select: function(event,ui){
                                                console.log('autofocus select called');
                                                console.log(ui);
                                                    //-1 indicates item not found
                                                 //store the information in the control. 
                                                 if(ui.item.value != '-1')
                                                 {
                                                         scope.ngModel = ui.item.label;
                                                         if(attr.itemid)
                                                         {
                                                             scope.itemid = ui.item.value;
                                                         }

                                                 }
                                                 else if(ctrl.$viewValue != '')
                                                 {
                                                     scope.ngModel = ctrl.$viewValue;
                                                     scope.itemid = 0;
                                                 }
                                                 else
                                                 {
                                                     console.log('setting the account number to blank');
                                                     scope.ngModel = '';
                                                     scope.itemid = -1;                                                     
                                                 }
                                                 scope.$apply();

                                                 return false;
                                                },
                                             focus: function(event,ui){
                                                return false;
                                                },
                                             close: function(event,ui){
                                                 console.log('autocomplete close called');
                                                 console.log(ui);
                                                }
                                          });



                                }
                    };
                });

What i need to do is, in the select in the autocomplete, which is when you click an item ) call the customerDetails.loadCustomerDetails method (from the service). But it's in other app, right?

Is there any way to do this? Or maybe, a better way?

Answer 1

EDIT - This only addresses the OP's misunderstanding of the problem, while @TongShen seems to have offered a solution to the actual problem.

I think you're conflating the concept of an app with that of a module.

Apps would tend to need some extra layer (e.g. an API) to communicate with one another, so if what you demonstrated were apps, then yes, you might have a problem.

Instead, your code demonstrates the use of modules, which can be used extensively with Angular to help segment and encapsulate your code. Provided that each module is interfaced properly through use of dependency injection, they can access one another.

Here is a simple demonstration, loosely patterned from your code:

var myApp = angular.module('myApp', ['otherApp']);
var anotherModule = angular.module('otherApp', []);

myApp.factory('MyFactory', function(){
  var stuff = {};

  stuff.doSomething = function(){
    console.log('just did something');
  }

  return stuff;
});

anotherModule.directive('myDirective', function(MyFactory){
  return {
    restrict: 'E',
    link: function(){
      MyFactory.doSomething();
    }  
  }
});

... and you can see that the console.log does fire in this Plunker.