我正在面临一个问题,将控制器转换为准备我的Angular 2应用程序的组件,但迁移不顺利的问题,我有ui路由器在状态之间路由,并在几个控制器中使用解决方案,带控制器的版本正在工作,但组件的版本现在在工作,我遵循了很多指南,似乎我正在做好代码,但它不适合我.
我有以下模块与控制器：
(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"
}
任何想法有什么问题,我错过了什么？
最后解决了,我误解了组件的工作原理.
首先我将SampleData更改为sampleData,Pascal Case,但第一个字母小.
然后在模块内,我将模板更改为模板：’< sample sample-data =“$resolve.sampleData”>< / sample>‘
并决心：
resolve: {
sampleData: function (msApi) {
return msApi.resolve('sample@get');
}
}
而对于组件我也改变了绑定：
bindings: {
sampleData: '='
},
并且在组件的控制器内部,我从签名中删除了SampleData,并将其称为$ctrl.helloText = $ctrl.sampleData.data.helloText ;.
所以最终的代码现在就像：
对于模块：
(function () {
'use strict';
angular
.module('app.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',bindings: {
sampleData: '='
},controller: Sample
});
/** @ngInject */
function Sample() {
var $ctrl = this;
$ctrl.helloText = $ctrl.sampleData.data.helloText;
}
})();
最后工作.
