webentwicklung-frage-antwort-db.com.de

Angular 1.5 komponenten mit ui-router auflösung: unbekannter anbieter

Ich habe ein Problem mit der Konvertierung von Controllern in Komponenten, die meine Anwendung für Angular 2 vorbereiten, aber das Problem der Migration läuft nicht gut. Die Version mit Controller funktioniert, aber die Version der Komponenten funktioniert jetzt überhaupt. Ich habe viele Anleitungen befolgt und scheint gut für Code zu sein, aber es funktioniert nicht für mich.

Ich habe folgendes Modul mit Controller :

(function () {
  'use strict';

  angular
    .module('app.sample', [])
    .config(config);

  /** @ngInject */
  $stateProvider
    .state('app.sample', {
      url    : '/sample',
      views  : {
        '[email protected]': {
          templateUrl: 'app/main/sample/sample.html',
            controller : 'SampleController as vm'
          }
        },
        resolve: {
          SampleData: function (myService) {
            return myService.getSample(); // I return a promise here
          }
       }
     });
  }
})();

Controller : 

(function ()
{
    'use strict';
    angular
        .module('app.sample')
        .controller('SampleController', SampleController);

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

Der obige Code funktioniert gut, ABER nach der Erstellung als Komponente wird er wie folgt: 

(function () {
  'use strict';

  angular
    .module('app.sample', [])
    .config(config);

  /** @ngInject */
  function config($stateProvider) {
    // State
    $stateProvider
      .state('app.sample', {
        url: '/sample',
        views: {
          '[email protected]': {
            template: '<sample></sample>'
          }
        },
        resolve: {
          SampleData: function (myService) {
            return myService.getSample(); // I return a promise here
          }
        }
      });
  }
})();

Komponente : 

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

Aber jetzt funktioniert es nicht und gibt mir folgenden Fehler: 

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

Meine Abhängigkeiten in 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"
  }

Irgendeine Idee, was das Problem ist, was mir fehlt?

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

Endlich gelöst, habe ich missverstanden, wie die Komponenten funktionieren.

Zuerst ändere ich SampleData in sampleData, Pascal Case, aber mit dem ersten Buchstaben klein.

In module habe ich dann template in template: '<sample sample-data="$resolve.sampleData"></sample>' geändert.

und resolve an:

resolve: {
  sampleData: function (msApi) {
    return msApi.resolve('[email protected]');
  }
}

Und für component habe ich auch die Bindung geändert: 

bindings: {
  sampleData: '='
},

Und innerhalb von controller von component habe ich SampleData aus der Signatur entfernt und es so genannt $ctrl.helloText = $ctrl.sampleData.data.helloText;.

Der endgültige Code lautet also: Für Module : 

 (function () {
  'use strict';

  angular
    .module('app.sample', [])
    .config(config);

  /** @ngInject */
  function config($stateProvider) {
    // State
    $stateProvider
      .state('app.sample', {
        url: '/sample',
        views: {
          '[email protected]': {
            template: '<sample sample-data="$resolve.sampleData"></sample>'
          }
        },
        resolve: {
          sampleData: function (myService) {
            return myService.getSample(); // I return a promise here
          }
        }
      });
  }
})();

Und Komponente so: 

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

Und endlich gearbeitet.

Edit: P.S .: Außerhalb des Frage- und Antwortbereichs: Wenn Sie auch eine Komponente ohne Status verwenden, müssen Sie die Daten in den Controller anstatt in die Auflösungsfunktion laden, sodass Sie Komponenten an beliebiger Stelle aufrufen können.

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

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

Anstatt wie oben angegeben zu geben, versuchen Sie, die 'SampleData'-Auflösung in Ihren Controller einzuspeisen, wie unten:

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

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

Hoffe das funktioniert für dich

0
Neeraj Kumar