Providers, Services and @Injectable

You can generate a new service with :

ionic generate provider myservice

This will generate a new service provider (MyserviceProvider) in the providers directory.
Providers, Services, and Injectables all reference the same thing, they are classes in our applications that are decorated with the @Injectable decorator :

  import { HttpClient } from '@angular/common/http';
  import { Injectable } from '@angular/core';

  @Injectable()
  export class MyserviceProvider {

    constructor(public http: HttpClient) {
      console.log('Hello MyserviceProvider Provider');
    }
  }

set up as a provider in the app.module.ts file :

   import { NgModule, ErrorHandler } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
   import { MyApp } from './app.component';

   import { AboutPage } from '../pages/about/about';
   import { ContactPage } from '../pages/contact/contact';
   import { HomePage } from '../pages/home/home';
   import { TabsPage } from '../pages/tabs/tabs';

   import { StatusBar } from '@ionic-native/status-bar';
   import { SplashScreen } from '@ionic-native/splash-screen';
   import { MyserviceProvider } from '../providers/myservice/myservice';

   @NgModule({
     declarations: [
       MyApp,
       AboutPage,
       ContactPage,
       HomePage,
       TabsPage
     ],
     imports: [
       BrowserModule,
       IonicModule.forRoot(MyApp)
     ],
     bootstrap: [IonicApp],
     entryComponents: [
       MyApp,
       AboutPage,
       ContactPage,
       HomePage,
       TabsPage
     ],
     providers: [
       StatusBar,
       SplashScreen,
       {provide: ErrorHandler, useClass: IonicErrorHandler},
       MyserviceProvider
     ]
   })
   export class AppModule {}

and injected into classes that want to use them :

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import { MyserviceProvider } from '../../providers/myservice/myservice';

@IonicPage()
@Component({
  selector: 'page-something',
  templateUrl: 'something.html',
})
export class SomePage {
    constructor(public myService: MyserviceProvider) { }

    ionViewDidLoad() {
        this.myService.myFunction();
    }
}

One particular example of this is a data service. We can create a data service that handles saving and retrieving data for us. We could make a call to a service we have created to fetch some data for us without having to worry about what is happening behind the scenes.
In general just ask yourself 'is this task I am performing strictly related to this page and this page only?'' if the answer is yes, then you can probably just add the code directly to the page. If the answer is no, then you should probably create a service.