angularjs – 带有ui-router的Angular 1.5组件解析:未知提供程序

前端之家收集整理的这篇文章主要介绍了angularjs – 带有ui-router的Angular 1.5组件解析:未知提供程序前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在面临一个问题,将控制器转换为准备我的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;
  }
})();

最后工作.

编辑:在问题和答案范围之外,如果您使用的组件也没有状态,您需要获取控制器内部的数据而不是解决,所以您可以随时调用组件.

原文链接:https://www.f2er.com/angularjs/140663.html

猜你在找的Angularjs相关文章