在Angular中创建数据服务

时间:2017-03-10 10:09:16

标签: angularjs

我正在尝试创建基础数据服务,然后再使用它

(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'不可用

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

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

任何想法!

1 个答案:

答案 0 :(得分:0)

要检查的一件事是,如果您要定义子模块&#39; app.directives&#39;和&#39; app.features&#39;

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

以上是这些模块的设定者。我只能看到&#39; app.features&#39;您附加&#39; customerService&#39;的模块。和&#39; CustomerCtrl&#39;在你当前的代码中。

还要检查的另一件事是在index.html中调用js文件的顺序(如果它们是分开的)。如果一个人依赖另一个人,则应该在依赖资源之前调用它。

请试一试让我知道。有时候这些事情会发生很多变化:)并且相信我已经发生了好几次。