Неизвестный поставщик - PullRequest
Новая
       6

Неизвестный поставщик

0 голосов
/ 20 сентября 2018

Я могу запустить код из одного файла JavaScript.но когда я хочу разделить службы в отдельный файл (в папке customServices), появляется ошибка инжектора: - неизвестный поставщик.Отладчик, когда он помещен в мой membersService.js - он ударил, но все равно выдает ошибку.

Аналогично, я не могу отделить маршрутизацию от другого файла.Выдает ту же ошибку.

структура папок: -

публичные контроллеры 1. app.js

customservices 1. membersService.js

просмотров 1. 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 Worksдо здесь.но после перемещения служебного кода в другой файл, как показано в начальной структуре папок, выдается ошибка неизвестного поставщика.

МОЙ СЕРВИСНЫЙ КОД - ГДЕ я получаю сообщение об ошибке: - 

 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 не работает 4. Неизвестная ошибка поставщика при использовании AngularJS

Яя думаю, упустил что-то концептуальное.Некоторый код намеренно удален для удобства чтения.

Моя концепция внедрения службы - это простой js-файл, который можно внедрить в любой контроллер приложения и использовать в соответствии с приложением.Он также должен быть зарегистрирован с правильной структурой папок.

1 Ответ

0 голосов
/ 20 сентября 2018

Я добавил ваш код в plunker, чтобы посмотреть, что происходит.

Во-первых, у вас много пропущенных } и ) в вашем примере, что делает ваш пример не компилируемым.

Затем, когда я разобрался с этим, он пожаловался на setnotanoption и compileservice, которые вы определили как зависимость в membershipController.Эти экземпляры не представлены в вашем примере.

При их удалении все работало нормально.

Примечание : Вместо привязки всех компонентов к объекту app, на который я ссылалсяк угловому модулю как angular.module("tdmModule")

Вот Плункер.

...