/ionic3-fmk-todolist

Todolist in Ionic3 with Framework

Primary LanguageObjective-C

Framework Ionic 3 / Angular 5

Presentation

This is a Framework to use in an project with Ionic 3 and Angular 5.

  • Expandable header
  • Facebook login
  • Paypal donation
  • Google Analytics
  • AdMob

Démo :

Install

Create a new Ionic 3 project

ionic start PROJECT_NAME blank
cordova platform add android
cordova platform add ios

Add Pluggins :

  • Translate

    npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save

  • Geolocation

    ionic cordova plugin add cordova-plugin-geolocation --save npm install --save @ionic-native/geolocation

  • Statusbar

    ionic cordova plugin add cordova-plugin-statusbar npm install --save @ionic-native/status-bar

  • Google Analytics

    ionic cordova plugin add cordova-plugin-google-analytics npm install --save @ionic-native/google-analytics
    npm install --save-dev @types/google.analytics

  • Facebook

    ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="" --variable APP_NAME="" npm install --save @ionic-native/facebook npm i --save ngx-facebook

  • AdMob

    ionic cordova plugin add cordova-plugin-admob-free npm install --save @ionic-native/admob-free

  • Paypal

    ionic cordova plugin add com.paypal.cordova.mobilesdk npm install --save @ionic-native/paypal

Install module

npm install --save https://github.com/vagabon/ionic3-fmk-todolist.git

Change the app.modules.ts

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
 ...
@NgModule({
 ...
 imports: [
   ...
  VagabondIonic2FmkModule,
  TranslateModule.forRoot({
    loader: {
      provide: TranslateLoader,
      useFactory: createTranslateLoader,
      deps: [HttpClient]
    }
   }),
  FacebookModule.forRoot()
  ...
],
exports: [
 ...
    VagabondIonic2FmkModule
 ...
]
providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    VagabondIonic2FmkModule.forRoot({
        config: {
            provide: ConfigFmkServiceProvider,
            useClass: (ConfigServiceProvider)
        },
        dataProvider: {
            provide: DataFmkServiceProvider,
            useClass: (DataServiceProvider)
        }
    }).providers
    ...
]

ionic generate provider DataService

@Injectable() export class DataServiceProvider extends DataFmkServiceProvider {
  KEY:string = 'data_<PROJECT_NAME>';
  constructor(public baseService:BaseServiceProvider) {
    super(baseService);
  }
}

ionic generate provider ConfigService (change const from ConfigFmkServiceProvider)

@Injectable()
export class ConfigServiceProvider {

example of .html

<expandable-header title="{{TITLE | translate}}">
</expandable-header>

<ion-content>
  <app-content-scroll notFound="{{NO_ITEM_FOUND | translate}}" [loading]="loading" [list]="lists">
  </app-content-scroll>
</ion-content>

example of Compenent .ts

@IonicPage()
@Component({
    selector: 'page-lists',
    templateUrl: 'lists.html'
})
export class ListsPage {

    search: string = "";

    constructor(private gAService:GoogleAnalyticsServiceProvider, private dataService:DataFmkServiceProvider, private alertService:AlertServiceProvider) {
        this.gAService.sendPageView("ListsPage");
    }

...
}