Угловые компоненты 1.5 с разрешением ui-router: Неизвестный поставщик

Question

У меня возникла проблема с преобразованием контроллеров в компоненты, готовые к моему приложению для Angular 2, но проблема в миграции не очень хорошо, у меня есть маршрутизатор ui-router между штатами и использованием разрешений в нескольких контроллерах, версия с контроллером работает, но версия компонентов теперь работает вообще, я следовал за множеством руководств и, кажется, делаю хорошо для кода, но не работает для меня.

У меня есть следующие модуль с контроллером:

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

Приведенный выше код работает хорошо, но после того, что делает его в качестве компонента его следующим образом:

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

Но теперь он не работает и дает мне следующую ошибку:

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 

Мои зависимости внутри 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" 
    } 

Любая идея, в чем проблема, что мне не хватает?

Answer 1

Наконец решил, я понял, что, как компоненты работают.

Сначала я меняю SampleData на sampleData, Паскаль Чехол, но с первой буквой небольшой.

Тогда внутри module я изменил template к template: '<sample sample-data="$resolve.sampleData"></sample>'

и resolve к:

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

И component я изменил связывание, а также:

bindings: { 
    sampleData: '=' 
}, 

И внутри controller от component Я удаляю ed 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; 
    } 
})(); 

И, наконец, работал.

Edit: 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» в контроллере, как показано ниже:

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

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

Надежда, которая работает для вас