首页 > 编程语言> > javascript – 未知提供者：membershipServiceProvider < - membershipService < - angularjs中的membershi

javascript – 未知提供者：membershipServiceProvider < - membershipService < - angularjs中的membershi

2019-07-10 14:43:58 作者：互联网

我能够从一个javascript文件运行代码.但是当我想将服务分离到一个单独的文件(在customServices文件夹中)时,它会给出一个注入器错误： – 未知的提供者.调试器放在我的membershipService.js中 – 它被命中但仍然会抛出错误.

同样,我无法将路由分离到另一个文件.它给出了同样的错误.

文件夹结构： –

上市
contollers
app.js

customservices
membership membership .js

意见
membersdetails.html
2. index.html

Index.html代码： –

 <head>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="stylesheets/style.css" rel="stylesheet">
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> 
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular- 
route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular- 
resource.js"></script>
<script src="CustomServices/membershipService.js"></script>
<script src="ngRoute/viewroute.js" type="text/javascript"></script>
<script src="controllers/app.js"></script>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

</head>
<div>
<div class="container pt-5">
    <div ng-view></div>
</div>
</div>

控制器代码 – app.js

   var app = angular.module("tdmModule", ["ngRoute"]);
   app.config(['$qProvider', function ($qProvider) {
   $qProvider.errorOnUnhandledRejections(false);
   }]);


 app.config(['$routeProvider','$locationProvider',
 function($routeProvider,$locationProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "home",
    controller: 'homeController'
})
.when("/home", {
    templateUrl : "home",
    controller: 'homeController'
})
.when("/membershipdetails", {
    templateUrl : "membershipdetails",
    controller: 'membershipController'
})
.otherwise({redirectTo: '/'});
}]);

   app.service("membershipService", function () {

   this.jsondata = function(getdata){
    var d = {};
    console.log("Service calling " +getdata);
    if(getdata != undefined && getdata.TopN != undefined){
            d.TopN = getdata.TopN;
    }
    if(getdata != undefined && getdata.MemberNo != undefined){
        d.MemberNo = getdata.MemberNo;
    }
   return d;
      };
    });


 app.controller('membershipController', function($scope,$filter, $http, 
 $httpParamSerializer, $location, membershipService, setnotanoption, 
 compileservice) {
 var absurl = $location.absUrl().split('/#!/')[1];
 $scope.pagename = absurl;

  app.controller('membershipController', function($scope,$filter, $http, 
  $httpParamSerializer, $location, membershipService, setnotanoption, 
  compileservice) {
var absurl = $location.absUrl().split('/#!/')[1];
$scope.pagename = absurl;
$scope.noOfColumn = false;





$http.get('http://localhost:3000/membership').then(function (res) {
    var options = res.data;
    $scope.options = options;



    $scope.removeField = function(rmdata) {
        setnotanoption.setNotAnOption(rmdata, false, options);
        var myEl = angular.element( document.querySelector ("."+rmdata ) );
        myEl.attr('ng-show',false);

        compileservice.compile(myEl);

        var btnEl = angular.element( document.querySelector("#btnEl" ) );
        compileservice.compile(btnEl);
        setnotanoption.setNotAnOption(rmdata, false, options);
    };
    $scope.deleteField = function (index){
        $scope.rmdata.splice(index,1);
        alert("JSON Name is deleted");
      }

    $scope.addField = function(data) {
        if(data != undefined && data.optionSelect != null){
            var myEl = angular.element( 
    document.querySelector("."+data.optionSelect ) );
            myEl.attr('ng-show',true);
            compileservice.compile(myEl);
            setnotanoption.setNotAnOption(data.optionSelect, true, options);
        }
    };






         });
       });

注意： – IT工作到此为止.但是一旦我将服务代码移动到不同的文件,如开始文件夹结构中所示,它会给出未知的提供程序错误

我的服务代码 – 我收到错误的地方： –

 var app = angular.module("tdmModule", ["ngRoute"]);


    app.service("membershipService", function 
   ($location,$rootScope,$http,$filter,$cookies,$timeout,$document,$window) 
   {
this.jsondata = function(getdata){
    var d = {};
    console.log("Service calling " +getdata);

    if(getdata != undefined && getdata.TopN != undefined){
            d.TopN = getdata.TopN;
    }
    if(getdata != undefined && getdata.MemberNo != undefined){
        d.MemberNo = getdata.MemberNo;
    }

         if(getdata != undefined &&getdata.MemberStartDateHigh !=undefined){
        d.MemberStartDateHigh = getdata.MemberStartDateHigh;
    }

    return d;
};
 });

我经历过
1. https://docs.angularjs.org/error/ $injector / unpr
2. https://viralpatel.net/blogs/angularjs-service-factory-tutorial/
3. AngularJS Service not working
4. Unknown Provider error using AngularJS

我猜想我错过了一些概念性的东西.为了便于阅读,有意删除了一些代码.

我的服务注入概念是一个简单的js文件,可以在应用程序的任何控制器中注入并按照应用程序使用.它也需要使用正确的文件夹结构进行注册.

解决方法:

我在一个plunker中添加了你的代码,看看发生了什么.

首先,您的示例中有很多缺失}和},这使您的示例无法编译.

然后,当我对它进行排序时,它抱怨了setnotanoption和compileservice,你已经将其定义为membershipController中的依赖项.
您的示例中未提供这些实例.

删除它们时,一切正常.

注意：我没有绑定对象应用程序上的所有组件,而是将角度模块称为angular.module(“tdmModule”)

Here’s的plunker.

标签：javascript,angularjs,angularjs-service,modularity
来源： https://codeday.me/bug/20190710/1424959.html