ui-routerを使用した角度1.5のコンポーネント解決：不明なプロバイダ

Question

私はアプリケーションを角度2で準備しているコンポーネントにコントローラを変換することに問題がありますが、問題はマイグレーションがうまくいかないため、いくつかのコントローラでバージョンを使用していますが、コントローラのバージョンは動作していますが、コンポーネントのバージョンはまったく動作しています。私は多くのガイドに従いましたが、コードにはうまくやっているようですが、

Iはコントローラと以下モジュール有する：

(function() { 
    'use strict'; 

    angular 
    .module('app.sample', []) 
    .config(config); 

    /** @ngInject */ 
    $stateProvider 
    .state('app.sample', { 
     url : '/sample', 
     views : { 
     'content@app': { 
      templateUrl: 'app/main/sample/sample.html', 
      controller : 'SampleController as vm' 
      } 
     }, 
     resolve: { 
      SampleData: function (myService) { 
      return myService.getSample(); // I return a promise here 
      } 
     } 
    }); 
    } 
})(); 

コントローラ：

(function() 
{ 
    'use strict'; 
    angular 
     .module('app.sample') 
     .controller('SampleController', SampleController); 

    /** @ngInject */ 
    function SampleController(SampleData) 
    { 
     var vm = this; 
     vm.helloText = SampleData.data.helloText; 
    } 
})(); 

うまく機能上のコード、BUT 成分そのとしてそれを行った後に次のようになります：

(function() { 
    'use strict'; 

    angular 
    .module('app.sample', []) 
    .config(config); 

    /** @ngInject */ 
    function config($stateProvider) { 
    // State 
    $stateProvider 
     .state('app.sample', { 
     url: '/sample', 
     views: { 
      'content@app': { 
      template: '<sample></sample>' 
      } 
     }, 
     resolve: { 
      SampleData: function (myService) { 
      return myService.getSample(); // I return a promise here 
      } 
     } 
     }); 
    } 
})(); 

コンポーネント：今

(function() { 
    'use strict'; 

    angular 
    .module('app.sample') 
    .component('sample', { 
     templateUrl: 'app/main/sample/sample.html', 
     bindings: { 
     }, 
     controller: Sample 
    }); 

    /** @ngInject */ 
    function Sample(SampleData) { 
    var $ctrl = this; 
    $ctrl.helloText = SampleData.data.helloText; 
    } 
})(); 

しかし、その作業を、私に次のエラー与えない：

"dependencies": { 
    "angular": "1.5.7", 
    "angular-animate": "1.5.7", 
    "angular-aria": "1.5.7", 
    "angular-cookies": "1.5.7", 
    "angular-material": "1.1.0-rc.5", 
    "angular-messages": "1.5.7", 
    "angular-resource": "1.5.7", 
    "angular-sanitize": "1.5.7", 
    "angular-ui-router": "1.0.0-beta.1", 
    "jquery": "2.2.4", 
    "mobile-detect": "1.3.2", 
    "moment": "2.13.0" 
    } 

： bower.json内部

Error: [$injector:unpr] Unknown provider: SampleDataProvider <- SampleData 
http://errors.angularjs.org/1.5.7/$injector/unpr?p0=SampleDataProvider%20%3C-%20SampleData 
    at angular.js:68 
    at angular.js:4502 
    at Object.getService [as get] (angular.js:4655) 
    at angular.js:4507 
    at getService (angular.js:4655) 
    at injectionArgs (angular.js:4679) 
    at Object.invoke (angular.js:4701) 
    at $controllerInit (angular.js:10234) 
    at nodeLinkFn (angular.js:9147) 
    at angular.js:9553 

私の依存関係を

何が問題なのか、何が分からないの？代わりに、上記のように与えるの

Answer 1

は最後にそれを解決したあなたのために働く

'use strict'; 
angular 
    .module('app.sample') 
    .controller('SampleController', ['SampleData', SampleController]); 

/** @ngInject */ 
function SampleController(SampleData) 
{ 
    var vm = this; 
    vm.helloText = SampleData.data.helloText; 
} 

希望が、私はどのようにすることを誤解コンポーネントが動作しています。

最初に私はSampleDataからsampleDataに変更しますが、最初の文字は小さいです。

はその後module内の私はにtemplate: '<sample sample-data="$resolve.sampleData"></sample>'

とresolveにtemplateを変更：

resolve: { 
    sampleData: function (msApi) { 
    return msApi.resolve('sample@get'); 
    } 
} 

そしてcomponentのために私は同様に結合変更：

bindings: { 
    sampleData: '=' 
}, 

そしてcontroller内をcomponent署名からSampleDataを編集し、$ctrl.helloText = $ctrl.sampleData.data.helloText;のように呼びます。

だから、最終的なコードは今のようです：

(function() { 
    'use strict'; 

    angular 
    .module('app.sample', []) 
    .config(config); 

    /** @ngInject */ 
    function config($stateProvider) { 
    // State 
    $stateProvider 
     .state('app.sample', { 
     url: '/sample', 
     views: { 
      'content@app': { 
      template: '<sample sample-data="$resolve.sampleData"></sample>' 
      } 
     }, 
     resolve: { 
      sampleData: function (myService) { 
      return myService.getSample(); // I return a promise here 
      } 
     } 
     }); 
    } 
})(); 

そして、このようなコンポーネント：

(function() { 
    'use strict'; 

    angular 
    .module('app.sample') 
    .component('sample', { 
     templateUrl: 'app/main/sample/sample.html', 
     bindings: { 
     sampleData: '=' 
     }, 
     controller: Sample 
    }); 

    /** @ngInject */ 
    function Sample() { 
    var $ctrl = this; 
    $ctrl.helloText = $ctrl.sampleData.data.helloText; 
    } 
})(); 

そして最後に働いたモジュールについては 。

編集： 質問外P.S：あなたが状態なしで、あまりにも、あなたが好きな場所あなたがコンポーネントを呼び出すことができますので、代わりに決意のコントローラ内のデータを取得する必要があるコンポーネントを使用する場合は、スコープを答えます。

Answer 2

'use strict'; 
angular 
    .module('app.sample') 
    .controller('SampleController', SampleController); 

/** @ngInject */ 
function SampleController(SampleData) 
{ 
    var vm = this; 
    vm.helloText = SampleData.data.helloText; 
} 

、以下のように、あなたのコントローラに「SampleDataを」決意を注入してみてください。