title: how angular component, service and controller works
body: <p>I am new to angular, and trying to understand how service, component and controller works.</p>
  
  <p>Let's say i have the followings:</p>
  
  <p>Service file: products.service.js</p>
  
  <pre><code> '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;
            }
       };
  });
  </code></pre>
  
  <p>controller file: products.controller.js</p>
  
  <pre><code> '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
                 });
  
   })();
  </code></pre>
  
  <p>i am using generator-angular-fullstack. How can i connect all the products in the controller constructor and show them in the template?</p>
  
  <p>Thanks</p>