使用服务与Angular和Mean.js在控制器之间共享数据

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.

我会更好地解释自己并分享我迄今为止所做的代码。我仍然是一个Angular“noob”,所以我希望你们能帮助我做到这一点。

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)

我正在使用Mean.js开发一个应用程序,它在客户端使用Angular。 Mean.js在不同的目录中分别创建模块,每个模块都有服务器和客户端目录。到目前为止,我创建了一个Customers模块和一个Appointments模块(这些模块就像CRUD模块一样)

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:

在创建约会视图中,我有这个typeahead组件,我想在键入其名称时显示客户:

<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:

同时,在Customers模块中,我创建了一个服务(这是我仍然不太了解的一件事)使用yeoman服务生成器为mean.js,这基本上是一个模板,我只是添加了一些像调用Customers.query()这是Customers客户端控制器中的一个函数,调用Server控制器以使客户列表更具体:

'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:

然后我将以下代码行添加到Appointments控制器中,希望开始让这个东西起作用:

'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.

所以当然没有达到我的预期。我知道我可能在这里遇到一些重大错误。事实证明,Angular在某些方面相当容易,但在其他方面很复杂(至少对我而言),模块/控制器之间的这种通信让我陷入困境。

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.

为了澄清,我在两个单独的目录(客户和约会)中有两个模块,我将ShareService添加到客户模块(因此我能够“共享”一些信息)。我到目前为止唯一的错误是浏览器控制台给出的错误。在grunt控制台中没有错误。但这有点乱,所以我知道我做错了。什么?这就是问题所在。

Thanks for your time.

谢谢你的时间。

1 个解决方案

#1

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

好吧,你正在调用ShareService的listCustomers,但是这个服务没有这个名字的方法。

Just changed the returned object by your ShareService to:

刚刚将ShareService更改为返回的对象:

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:

listCutomers函数没有返回任何内容,这就是对象未定义的原因。只需添加如下所示的返回:

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