web-dev-qa-db-ja.com

Angular 1.5コンポーネントとui-router resolve：不明なプロバイダー

Angular 2用にアプリケーションを準備するためにコントローラーをコンポーネントに変換する際の問題に直面していますが、移行がうまくいかない問題、状態間でルーティングし、解決を使用するui-routerがありますいくつかのコントローラーでは、コントローラー付きのバージョンは機能していますが、コンポーネントのバージョンはまったく機能しています。多くのガイドに従って、コードはうまく機能しているようですが、機能していません。

私は次のモジュールコントローラを持っています：

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

上記のコードはうまく機能しますが、componentとして作成すると、次のようになります。

(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"
  }

どのような問題、何が欠けているのですか？

angularjsangular-ui-routerangularjs-componentsangularjs-1.5
13
Al-Mothafar

ようやく解決しましたが、コンポーネントの仕組みを誤解しました。

最初にSampleDataをsampleDataに変更します。Pascalケースですが、最初の文字は小さいです。

次に、moduleの内部でtemplateをtemplate: '<sample sample-data="$resolve.sampleData"></sample>'に変更しました

およびresolveから：

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

componentについても、バインディングを変更しました。

bindings: {
  sampleData: '='
},

そして、controllerのcomponentの内側で、署名からSampleDataを削除し、これを$ctrl.helloText = $ctrl.sampleData.data.helloText;のように呼び出しました。

したがって、最終的なコードは次のようになります。ForModule：

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

そしてcomponentは次のようになります：

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

そして最後に働いた。

編集： P.S .:質問と回答の範囲外で、状態なしのコンポーネントも使用する場合は、解決する代わりにコントローラー内のデータを取得する必要があるため、どこからでもコンポーネントを呼び出すことができます。

24
Al-Mothafar
'use strict';
angular
    .module('app.sample')
    .controller('SampleController', SampleController);

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

上記のように指定する代わりに、以下のようにコントローラーに 'SampleData' resolveを注入してみてください。

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

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

うまくいきますように

0
Neeraj Kumar