Wie Winkelkomponente, Service und Controller funktioniert

Question

Ich bin neu zu eckig und versuchen zu verstehen, wie Service, Komponente und Controller funktioniert.

Lassen Sie uns sagen, ich habe die folgenden:

Datei Service: products.service.js

'use strict'; 

angular.module('myApp.products') 
.factory('ProductService', function() { 

    var products = [ 
      {_id: 1, title: 'Product 1', price: 123.45, quantity:10, description:'Some description 1'}, 
      {_id: 2, title: 'Product 2', price: 123.45, quantity:10, description:'Some description 2'}, 
      {_id: 3, title: 'Product 3', price: 123.45, quantity:10, description:'Some description 3'}, 
      {_id: 4, title: 'Product 4', price: 123.45, quantity:10, description:'Some description 4'}, 
      {_id: 5, title: 'Product 5', price: 123.45, quantity:10, description:'Some description 5'} 
    ]; 

    return { 
      alllProducts: function() { 
       return products; 
      } 
    }; 
}); 

Controller-Datei: products.controller.js

'use strict'; 
(function(){ 

      class ProductsComponent { 
       constructor() { 
        // how should i connect them here like below? 
        // this.products = ProductService.allProducts(); 
       } 
      } 

      angular.module('myApp') 
       .component('products', { 
        templateUrl: 'app/products/products.html', 
        controller: ProductsComponent 
       }); 

})(); 

ich bin mit Generator- eckig-vollstapelig. Wie kann ich alle Produkte im Controller-Konstruktor verbinden und in der Vorlage anzeigen?

Dank

Answer 1

Sie nah waren, brauchen Sie nur die Productservice in den Konstruktor zu injizieren:

class ProductsComponent { 
    constructor(ProductService) { 
     this.products = ProductService.allProducts(); 
    } 
} 

Es gibt Hunderte von Erklärungen auf Google über Steuerungen, Dienstleistungen, Richtlinien. Viele von ihnen verwenden die ES5-Syntax. Eine Komponente ist eine spezifischere Art von Richtlinie - siehe the docs.

Kurz gesagt, der Dienst steuert Ihre Anwendungsdaten, die einzige Aufgabe des Controllers besteht darin, diese Daten für die Ansicht verfügbar zu machen. Wann immer eckig einen Controller instanziiert, stellt er ihm einen Bereich bereit, der durch this bezeichnet wird (zumindest, sobald der Controller instanziiert wurde).

Die Komponente ist Teil Ihrer Ansicht. Sie verwenden die Nicht-Camel-Case-Version, hier <products></product> in der HTML-Ansichtsvorlage, und angle ersetzt sie durch Ihre Vorlage und hängt den Controller/Controller-Bereich an diesen Teil der Ansicht an. Sie können Produkte in Ihrer products.html Vorlage konsumieren (zB mit <div ng-repeat="product in products>{{product.title}}></div> ").