Sharing data between Controllers using a Service, with Angular and Mean.js

Question

Ok I asked this a few days ago without having started to code it. Now after doing some research and played around with the code I find myself a little lost.

I will explain myself better and share the code I've done so far. I am still an Angular "noob" so I hope you guys help me do this right.

I am developing an app using Mean.js which uses Angular in the client side. Mean.js creates the modules separately in diferent directories, each module has both the server and the client directories. So far I created a Customers module and an Appointments module (these being like CRUD modules)

When creating an appointment, I want to be able to select a customer from the list of customers (meaning that I have to get that data from the customers controller)

In the create appointments view, I have this typeahead component where I want to display the customers while typing their name:

<section data-ng-controller="AppointmentsController">
    <input type="text" ng-model="asyncSelected" typeahead="customer for customer in findCust()" typeahead-loading="loadingCustomers" class="form-control">
</section>

Meanwhile, in the Customers module, I created a Service (this is one thing that I still don't understand pretty well) using the yeoman service generator for mean.js, which is basically a template, I just added a few things like the call to Customers.query() which was a function in the Customers client controller, a call to the Server controller to get the list of customers to be more specific:

'use strict';

angular.module('customers').factory('ShareService', [ 'Customers',
  function(Customers) {
    // Share service logic
    // ...

    // Public API
    return {
        listCustomers: function() {
            Customers.query(); //I added this call 
        }
    };
  }
]);

Then I added the following lines of code to the Appointments controller, hoping to start getting this thing to work:

'use strict';

// Appointments controller
angular.module('appointments').controller('AppointmentsController',['$scope', '$stateParams', '$location', 
 'Authentication', 'Appointments','ShareService',
    function($scope, $stateParams, $location, Authentication, Appointments, ShareService) {
        $scope.authentication = Authentication;

        /* 
            Appointments CRUD ops logic here
        */

        // Find a list of Customers
        $scope.findCust = function() {
            ShareService.listCustomers();
        };
    }
]);

After that I went to the app, but no data is being sent, the console giving me this error when typing in the text box:

Cannot read property 'length' of undefined

So of course not getting what I expected. I know that I may have some major mistakes here. Angular has proven to be pretty easy in some things but complex in others (at least for me) and this communication between modules/controllers has gotten me stuck.

Just to clarify, I have two modules in two separate directories (Customers and Appointments), I added the ShareService to the customers module (so I was able to "share" some info). The only error I'm getting so far is the one given by the browser console. No errors in the grunt console. But this is a little messy so I know that I'm doing something wrong. What? well that's the question.

Thanks for your time.

Erazihel · Accepted Answer · 2015-07-24 21:37:55Z

1

Well, you're calling the listCustomers of you ShareService but this service has no method with this name.

Just changed the returned object by your ShareService to:

return {
    listCustomers: function() {
        Customers.query(); //I added this call
    }
};

EDIT

The listCutomers function is not returning anything, this is why the object is undefined. Just add the return in the like this:

return {
    listCustomers: function() {
        return Customers.query(); //I added this call
    }
};

edited Jul 24, 2015 at 21:37

answered Jul 24, 2015 at 20:43

Erazihel

7,6456 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

dlvx Over a year ago

Thanks for your answer, actually I forgot to change the someMethod name to listCustomers in the ShareService, but still no results. But I did printed the result, and it is in fact returning the array of users, so it seems the problem is when displaying them in the search box? Besides that I still get the error: Cannot read property 'length' of undefined

dlvx Over a year ago

This is what I was able to log to the console from Customers.query( ) but it seem that it is not returning it or at least in the proper way so it can be displayed, as you see it queries from the list of users

dlvx Over a year ago

[$promise: Object, $resolved: false]0: Resource__v: 0_id: "55a9288c43cc16746f470282"b_day: 9b_month: 1cod_depelle: "22222B"created: "2015-07-17T16:08:44.881Z"email: "[email protected]"firstname: "André"last_pur: "2015-07-17T16:08:44.881Z"last_visit: "2015-07-17T16:08:44.881Z"lastname_1: "Cordero"lastname_2: "Villalobos"phone_1: "22222222"phone_2: ""referred: truesurname: ""user: Object

Erazihel Over a year ago

See my edit as I added a return statement to the listCustomers function.

dlvx Over a year ago

Thanks, added that, it actually gets to the appointments controller, I did: console.log(ShareService.listCustomers()); inside the findCust function and I get the results, BUT it still says it's undefined, so it can't get it's length. I did console.log(typeof ShareService.listCustomers()); and I get Object so it seems everything is ok, but it won't pass through the search box

Collectives™ on Stack Overflow

Sharing data between Controllers using a Service, with Angular and Mean.js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related