ui-router가있는 각도 1.5 구성 요소 해결 : 알 수없는 공급자

Question

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

컨트롤러 :

I은 ​​제어기으로 모듈 다음이

상기 코드는 잘 작동하지만 성분로 인한 후

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

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

그 이렇게 되세요 :

01 23,516,

(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에

및 resolvetemplate: '<sample sample-data="$resolve.sampleData"></sample>'하기 : component위한

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

및 I는 변경된 아니라 바인딩 :

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

, 아래와 같이, 컨트롤러에 '샘플 데이터'결의를 주입 시도 :