web-dev-qa-db-fra.com

Angular 1.5 composants avec la résolution du routeur ui: fournisseur inconnu

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?

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

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.

24
Al-Mothafar
'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

0
Neeraj Kumar