triston triston - 1 year ago 63
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
Answer Source

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