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

2019-07-10 14:43:58 阅读：269 来源： 互联网

标签：javascript angularjs angularjs-service modularity

我能够从一个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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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