コントローラにサービスを適用する - 不明なプロバイダ：ModalSrvProvider < - ModalSrv

Question

私は同様の例を見つけました：https://github.com/angular-fullstack/generator-angular-fullstack/issues/1551しかし、私の場合は何かが動作していません。また

/*jshint esnext: true */ 

class ModalSrv { 
    constructor($scope) { 
    } 

    open(data) { 
     $scope.data = data; 
     $scope.modalClass = 'open'; 
    } 
} 

ModalSrv.$inject = ['$scope']; 

export default ModalSrv; 

、非常にシンプルなコントローラ：

/*jshint esnext: true */ 

import ModalSrv from './ModalSrv' 


class ShowVersionCtrl { 
    contructor($rootScope, $scope, $http, ModalSrv) { 
     $scope.showVersion =() => { 
      $http.get('/my_data.json').then(
       result => {ModalSrv.open(result.data);} 
      ); 
     } 
    } 
} 

ShowVersionCtrl.$inject = ['$rootScope','$scope', '$http', 'ModalSrv']; 

export default ShowVersionCtrl; 

しかし、私は取得Unknown provider: ModalSrvProvider <- ModalSrvがどのようにこのコントローラとサービス、この種の仕事を作るために 私は非常に単純なサービスがありますか？

Answer 1

AngularJSを使用している場合は、作成したサービスをいくつかの名前で登録する必要があります。クラスを作成したので、このクラスを角度モジュールとして登録する必要があります。

import ModalSrv from './ModalSrv' 

angular.module(app, []).service('modalService', ModalSrv); 

だから、このクラスが一度modalService取ら依存関係として言及されるべきであることを、角度に言いました。角度はModalSrvクラスの単一インスタンスを作成します。

そして最後に、あなたのコードは次のようになり次のようになります。

/*jshint esnext: true */ 


class ShowVersionCtrl { 
    contructor($rootScope, $scope, $http, modalService) { 
     $scope.showVersion =() => { 
      $http.get('/my_data.json').then(
       result => {ModalSrv.open(result.data);} 
      ); 
     } 
    } 
} 

ShowVersionCtrl.$inject = ['$rootScope','$scope', '$http', 'modalService']; 

export default ShowVersionCtrl;