CODEWITHSUNDEEP
angularjscontrollercomponents
triston
triston

Reputation: 493

how angular component, service and controller works

I am new to angular, and trying to understand how service, component and controller works.

Let's say i have the followings:

Service file: 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 file: 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
               });

 })();

i am using generator-angular-fullstack. How can i connect all the products in the controller constructor and show them in the template?

Thanks

Upvotes: 0

Views: 2047

Answers (1)

Dan
Dan

Reputation: 3020

You were close, you just need to inject the ProductService into the constructor: 

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

There are hundreds of explanations on google about controllers, services, directives. Many of them will use the ES5 syntax. A component is a more specific type of directive - see the docs.

Briefly though the service controls your application data, the controller's sole duty is to expose that data to the view. Whenever angular instantiates a controller, it provides it with a scope which is referred to by this (at least, once the controller has finished being instantiated).

The component is part of your view. You use the non-camel-case version, here <products></product> in the html view template, and angular replaces it with your template, and attaches the controller/controller scope to that portion of the view. You can consume products in your products.html template (e.g. using <div ng-repeat="product in products>{{product.title}}></div>").

Upvotes: 2

Related Questions