Before reading about services in angular, I had few questions in mind as below:

1. What are angular services?

2. Why we need services. Is this the only way to achieve what we want?

3. How it works & how can we implement it?

Let's answer one by one.

Ans 1 . Angular services are simple classes which provide data to "components". Services can be injected to components. Services can use other services too. Here is the example 

@Injectable({
     providedIn: 'root',
  })
export class Data {
  private customers: Customer[] = [];

  constructor(
       private apiService: CustomerService,
    ) { }

  getData() {
      this.apiService.getAll(Customer).then( (customers: Customer[]) => {
      this.customers.push(...customers); // fill cache
    });
    return this.customers;
  }
}

so in above example you have seen there is a service named "Data" which provides array of customers. Here is one question arises "How this service is available to component or to other services ?". The answer is @Injectable decorator.  we will know about @Injectable decorator while answering question no 3.

Ans 2. Actually service is not any keyword or decorator in angular. you can use any other name than service for example BusinessLayer or logicalLayer and so on... So another question rises how does angular know this is a service class. again answer is @Injectable decorator. sorry again to keep you waiting about @Injectable. So we need services to get data from external sources(e.i APIs, DB, Cloud) or may be internal(flat files, xml, json, csv....)

But it is not mandatory to write code to get data; in services, this a standard way or you can say best practices. You can write code at components class by creating different functions. 

Ans 3: How it works?  so answer is @Injectable decorator. Services can be consumed by components or other classes because it is available due @Injectable decorator. Actually @Injectable is matadata which tells angular's injector mechanism that this service (or class or function or variable) are available to inject. But how does component knows about it? Okay, this is interesting in component we have to write following line of code

@Component({
  selector:    'app-data-list',
  templateUrl: './data-list.component.html',
  providers:  [ Data ] /*Data is our service name you can name it as you want*/
})


export class customerComponent implements OnInit {
  customers: Customer[];
  selectedCustomer: Customer;

  constructor(private service: Data) { }

  ngOnInit() {
    this.customers= this.service.getCustomers();
  }

  selectCustomer(customer: Customer) { this.selectedCustomer = customer; }
}

Check the providers: section;  A provider is an object that tells an injector how to obtain or create a dependency. When Angular creates a new instance of a component class, it determines which services or other dependencies that component needs by looking at the constructor parameter types.

constructor(private service: Data) { }

So the key points of this topic are:

@Injectable, Providers, @Component, constructor