how angular component, service and controller works

Question

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

Dan · Accepted Answer · 2016-05-07 05:03:55Z

2

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>").

answered May 7, 2016 at 5:03

Dan

3,07021 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

triston Over a year ago

thanks, this makes a lot more sense to me. If i need to access stateParams, should i inject it like: constructor(ProductService, $stateParams)?

Dan Over a year ago

Yes exactly, as long as it's registered in the module system, you can inject it in controller/component/directive/services etc declarations.

Collectives™ on Stack Overflow

how angular component, service and controller works

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related