Angular 1.5 Komponenten mit UI-Router Auflösung: Unbekannter Provider

Question

Ich habe ein Problem mit der Konvertierung von Controllern zu Komponenten für die Vorbereitung meiner Anwendung für Angular 2, aber das Problem, die Migration läuft nicht gut, ich habe den UI-Router zu routen zwischen den Zuständen und der Verwendung in einigen Controllern, die Version mit Controller funktioniert, aber die Version der Komponenten funktioniert jetzt überhaupt, ich folgte eine Menge von Leitfäden und scheint mir gut für Code, aber es funktioniert nicht für mich.

Ich habe folgende Modul mit Controller:

(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 
      } 
     } 
    }); 
    } 
})(); 

Regler:

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

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

Der obige Code arbeitet gut, aber es als Komponente Nachdem ihre werden wie folgt:

(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 
      } 
     } 
     }); 
    } 
})(); 

Komponente:

(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; 
    } 
})(); 

Aber seine jetzt nicht funktioniert und gibt mir die folgende Fehlermeldung:

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 

Meine Abhängigkeiten innerhalb bower.json:

"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" 
    } 

Irgendeine Idee, was das Problem, was ich vermisse?

Answer 1

Schließlich löste es, ich falsch verstanden, dass, wie Die Komponenten funktionieren.

Zuerst ändere ich SampleData zu sampleData, Pascal Case, aber mit dem ersten Buchstaben klein.

dann im Inneren des module i änderte sich die template-template: '<sample sample-data="$resolve.sampleData"></sample>'

und resolve zu:

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

Und für component ich die Bindung auch geändert:

bindings: { 
    sampleData: '=' 
}, 

und innerhalb der controller von component ich entferne ed SampleData von Signatur und nannte es so $ctrl.helloText = $ctrl.sampleData.data.helloText;.

So, jetzt der letzte Code ist wie: Für Modul:

(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 
      } 
     } 
     }); 
    } 
})(); 

Und Komponente wie folgt aus:

(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; 
    } 
})(); 

und arbeitete schließlich.

Edit: P. S .: Außerhalb der Frage und den Umfang beantworten, wenn Sie zu Komponente ohne Zustand zu verwenden, müssen Sie die Daten innerhalb Controller statt Entschlossenheit zu bekommen, so dass Sie Komponenten aufrufen können, wo immer Sie wollen.

Answer 2

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

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

Statt wie oben zu geben, versuchen ‚Sample‘ Entschlossenheit in Ihrem Controller eingespritzt wird, wie unten:

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

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

Hoffnung, die für Sie arbeitet