triston triston - 5 months ago 22
AngularJS Question

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';

.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';

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

.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?


Dan Dan

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