Je rencontre un problème avec la conversion des contrôleurs en composants préparant mon application pour Angular 2, mais le problème de la migration ne se déroule pas bien. J'ai le routeur ui à router entre les états et à utiliser la résolution dans quelques contrôleurs, la version avec contrôleur fonctionne, mais la version des composants fonctionne maintenant, j'ai suivi beaucoup de guides et il semble que je me débrouille bien pour le code, mais que cela ne fonctionne pas pour moi.
J'ai le suivant module avec 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
}
}
});
}
})();
Manette:
(function ()
{
'use strict';
angular
.module('app.sample')
.controller('SampleController', SampleController);
/** @ngInject */
function SampleController(SampleData)
{
var vm = this;
vm.helloText = SampleData.data.helloText;
}
})();
Le code ci-dessus fonctionne bien, MAIS Après l'avoir créé en tant que composant, il devient comme ceci
(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
}
}
});
}
})();
Composant:
(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;
}
})();
Mais maintenant, cela ne fonctionne pas et me donne l'erreur suivante:
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
Mes dépendances dans 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"
}
Une idée de ce que le problème, ce qui me manque?
Finalement résolu, j'ai mal compris comment les composants fonctionnent.
Je change d'abord SampleData
en sampleData
, Pascal Case mais avec la première lettre petite.
Puis, à l'intérieur de la module
, j'ai changé la template
en template: '<sample sample-data="$resolve.sampleData"></sample>'
et resolve
à:
resolve: {
sampleData: function (msApi) {
return msApi.resolve('sample@get');
}
}
Et pour component
, j'ai également modifié la liaison:
bindings: {
sampleData: '='
},
Et à l'intérieur de la controller
de component
, j'ai enlevé SampleData
de la signature et je l'ai appelé comme ceci $ctrl.helloText = $ctrl.sampleData.data.helloText;
.
Donc, le code final ressemble maintenant à: Pour Module :
(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
}
}
});
}
})();
Et composant comme ceci:
(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;
}
})();
Et finalement travaillé.
Édition: P.S .: En dehors de la portée de la question et de la réponse, si vous utilisez également un composant sans état, vous devez obtenir les données dans le contrôleur au lieu de les résoudre, afin de pouvoir appeler les composants où vous le souhaitez.
'use strict';
angular
.module('app.sample')
.controller('SampleController', SampleController);
/** @ngInject */
function SampleController(SampleData)
{
var vm = this;
vm.helloText = SampleData.data.helloText;
}
Au lieu de donner comme ci-dessus, essayez d'injecter la résolution 'SampleData' dans votre contrôleur, comme ci-dessous:
'use strict';
angular
.module('app.sample')
.controller('SampleController', ['SampleData', SampleController]);
/** @ngInject */
function SampleController(SampleData)
{
var vm = this;
vm.helloText = SampleData.data.helloText;
}
J'espère que cela fonctionne pour vous