在 Angular 中创建数据服务

Question

我正在尝试创建一个基础数据服务，然后在以后使用它

(function () {
'use strict';
angular.module('app.core').factory('dataService', ['$http','$q', dataService]);

var dataService = function ($http, $q) {        
    var service = {
        httpPost: httpPost,
        httpGet: httpGet,
        httpDelete: httpDelete
    };
    return service;
........

然后尝试由另一个服务使用它

(function () {
"use strict";
angular.module('app.features').factory('customerService',  ['dataService',customerService]);
var customerService = function (dataService) {
    var service = {
        search: search,
        ....
    };
    return service;
.....

但是当我尝试使用来自客户控制器的客户服务时

(function () {
'use strict';
angular.module("app.features").controller("CustomerCtrl", 
["$scope", "$rootScope", "$stateParams", "customerService", "$modal", "toaster", 
function ($scope, $rootScope, $stateParams, customerService, $modal, toaster) {
......

然后我得到以下错误

[ng:areq] 参数 'fn' 不是函数，未定义 并且错误消息是 Module 'ngLocale' is not available

当我从控制器中删除客户服务参考时，错误消失了。 这里也是模块声明

//The root for all other modules
(function () {
'use strict';
angular.module("app", [     
"app.core", //angular and external code
    "app.directives",//Componenets
    //Custome modules, refacactor later to module per feature
    "app.features"
]);
})();

(function () {
'use strict';
 angular.module('app.core', [
    //Angular modules
    "ngAnimate",
    "ngCookies",
    "ngResource",
    "ngSanitize",
    "ngTouch",
    //3rd party
    "ngStorage",
    'ui.utils',
    'ui.load',
    "ui.router",
    "ui.bootstrap",
    "ui.jq",
    "ui.validate",
    "oc.lazyLoad",
    "pascalprecht.translate"
]);
})();

脚本参考

<!-- Vendor scripts -->
<script src="scripts/dependencies/jquery/jquery.min.js"></script>
<script src="scripts/dependencies/angular/angular.js"></script>
<script src="scripts/dependencies/angular/angular-animate/angular-animate.js"></script>
<script src="scripts/dependencies/angular/angular-cookies/angular-cookies.js"></script>
<script src="scripts/dependencies/angular/angular-resource/angular-resource.js"></script>
<script src="scripts/dependencies/angular/angular-sanitize/angular-sanitize.js"></script>
<script src="scripts/dependencies/angular/ngstorage/ngStorage.js"></script>
<script src="scripts/dependencies/angular/angular-touch/angular-touch.js"></script>
<script src="scripts/dependencies/angular/angular-ui-utils/ui-utils.js"></script>
<script src="scripts/dependencies/angular/angular-ui-router/angular-ui-router.js"></script>
<script src="scripts/dependencies/angular/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="scripts/dependencies/angular/oclazyload/ocLazyLoad.js"></script>
<script src="scripts/dependencies/modules/angularjs-toaster/toaster.js"></script>

<!--Application starter& Configuration-->
<script src="scripts/app/app.module.js"></script>

<!--Rename to app.js-->
<script src="scripts/app/main.js"></script>


<!--core-->
<script src="scripts/app/core/core.module.js"></script>
<script src="scripts/app/features.module.js"></script>
<script src="scripts/app/directives/directives.module.js"></script>

<script src="scripts/app/core/dataService.js"></script>
<script src="scripts/app/config.js"></script>
<script src="scripts/app/config.lazyload.js"></script>
<script src="scripts/app/config.router.js"></script>

<!-- all my modules script goes here..-->

<!--Directives-->
<script src="scripts/app/core/ui-load.js"></script>
<script src="scripts/app/directives/setnganimate.js"></script>
<script src="scripts/app/directives/ui-butterbar.js"></script>
<script src="scripts/app/directives/ui-focus.js"></script>
<script src="scripts/app/directives/ui-fullscreen.js"></script>
<script src="scripts/app/directives/ui-jq.js"></script>
<script src="scripts/app/directives/ui-module.js"></script>
<script src="scripts/app/directives/ui-nav.js"></script>
<script src="scripts/app/directives/ui-scroll.js"></script>
<script src="scripts/app/directives/ui-shift.js"></script>
<script src="scripts/app/directives/ui-validate.js"></script>
<script src="scripts/app/directives/ui-panel.js"></script>

任何想法！

Answer 1

要检查的一件事是您是否定义了子模块“app.directives”和“app.features”

angular.module('myApp.directives',[]);
angular.module('myApp.features',[]);

上面是这些模块的设置器。我只能看到“app.features”模块的 getter，您在当前代码中附加了“customerService”和“CustomerCtrl”。

还要检查的另一件事是在 index.html 中调用 js 文件的顺序（如果它们是单独的）。如果一个依赖于另一个，则应在依赖资源之前调用它。

请试一试并告诉我。有时这些事情会引起很多问题 :) 相信我，这在我身上已经发生过好几次了。