Framework Ionic 3 / Angular 5
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 :
- MySimpleList (repo project) : https://mysimplelist.gonzague-clement.fr
- CinéTchicha (an other project) : https://cinetchicha.fr
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");
}
...
}