大佬教程收集整理的这篇文章主要介绍了angularjs – 带有ui-router的Angular 1.5组件解析:未知提供程序,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有以下模块与控制器:
(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; } })();
最后工作.
以上是大佬教程为你收集整理的angularjs – 带有ui-router的Angular 1.5组件解析:未知提供程序全部内容,希望文章能够帮你解决angularjs – 带有ui-router的Angular 1.5组件解析:未知提供程序所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。