UI-yönlendirici ile Angular 1.5 bileşenleri: Bilinmeyen sağlayıcı

Question

Angular 2 için uygulamanızı hazırlayan bileşenlere dönüştürme denetleyicileriyle ilgili bir sorunla karşı karşıyayım, ancak sorun iyi gitmiyorsa sorun, ui yönlendiriciye sahip olacağım devletler arasında ve birkaç denetleyicide çözümü kullanarak, denetleyicili sürüm çalışıyor ancak bileşenlerin sürümü artık çalışıyor, çok sayıda kılavuz izledim ve kod için iyi yapıyorum ama benim için çalışmıyor.

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

Kontrol:

I kontrol ile modülü aşağıdakilere sahip

Yukarıdaki kod iyi çalışan, ama bir bileşen olarak yaptıktan sonra

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

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

onun şu şekilde olsun:

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

Bileşen: şimdi

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

Ama onun çalışma ve bana aşağıdaki hatayı veriyor değil:

"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 iç

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 

Benim bağımlılıkları

Sorun ne, fikrim ne? Bunun yerine yukarıda gibi vermenin

Answer 1

Nihayet münhal o sizin için çalışır

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

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

Umut, nasıl olduğunu yanlış bileşenler çalışıyor.

Önce Pascal Case, ancak ilk harfi küçük olan , SampleData'u değiştiriyorum.

Sonra module içeride ben değiştim template için

ve resolvetemplate: '<sample sample-data="$resolve.sampleData"></sample>' için: component için

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

Ve değişti de bağlayıcı:

bindings: { 
    sampleData: '=' 
}, 

Ve controller içeride component kaldırıyorum imzalı SampleData ve buna benzer $ctrl.helloText = $ctrl.sampleData.data.helloText;.

Yani nihai kod artık gibidir: için Modül:

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

Ve bileşen böyle:

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

Ve nihayet çalıştı.

Düzenleme: soruya Dış P.S. .: ve devlet olmadan da, istediğiniz her yere bileşenleri çağırabilir böylece yerine kararlılığının denetleyici içinde veri almak için gereken bileşeni kullanıyorsanız, kapsamını cevap.

Answer 2

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

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

aşağıda gibi, denetleyici içinde 'OrnekVeriler' kararlılığını enjekte deneyin: