Góc 1,5 thành phần có giải pháp ui-router: Nhà cung cấp không xác định

Question

Tôi đang gặp vấn đề với việc chuyển đổi bộ điều khiển thành các thành phần chuẩn bị ứng dụng cho Angular 2, nhưng sự cố di chuyển không tốt, tôi có bộ định tuyến ui giữa các trạng thái và sử dụng giải quyết trong một vài bộ điều khiển, phiên bản với bộ điều khiển đang hoạt động nhưng phiên bản của các thành phần hiện đang hoạt động, tôi đã theo rất nhiều hướng dẫn và dường như tôi đang làm tốt cho mã nhưng nó không hoạt động cho tôi.

Tôi có sau mô-đun với khiển:

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

khiển:

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

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

Đoạn mã trên hoạt động tốt, NHƯNG Sau khi thực hiện nó như là một thành phần của nó trở thành như sau:

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

Component:

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

Nhưng bây giờ nó không làm việc và mang lại cho tôi những lỗi sau:

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 

phụ thuộc của tôi bên 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" 
    } 

Bất kỳ ý tưởng gì về vấn đề, những gì tôi đang thiếu?

Answer 1

Cuối cùng giải quyết nó, tôi hiểu lầm rằng làm thế nào các thành phần đang hoạt động.

Trước tiên tôi thay đổi SampleData thành sampleData, Trường hợp Pascal nhưng có chữ cái đầu tiên nhỏ.

Sau đó bên trong module tôi đã thay đổi template-template: '<sample sample-data="$resolve.sampleData"></sample>'

và resolve tới:

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

Và đối với component Tôi đã thay đổi ràng buộc cũng như:

bindings: { 
    sampleData: '=' 
}, 

Và bên trong controller trong số component Tôi đã xóa ed SampleData từ chữ ký và gọi nó như thế này $ctrl.helloText = $ctrl.sampleData.data.helloText;.

Vì vậy, các mã cuối cùng tại là như sau: Đối với Mô-đun:

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

Và phần như thế này:

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

Và cuối cùng làm việc.

Edit: P.S .: Bên ngoài câu hỏi và trả lời phạm vi, Nếu bạn sử dụng thành phần mà không cần nhà nước cũng vậy, bạn cần phải nhận được dữ liệu bên trong bộ điều khiển thay vì quyết tâm, vì vậy bạn có thể gọi các thành phần bất cứ nơi nào bạn muốn.

Answer 2

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

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

Thay vì đưa ra như trên, hãy thử tiêm quyết tâm 'SampleData' trong điều khiển của bạn, như dưới đây:

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

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

Hy vọng rằng sẽ làm việc cho bạn