Nakon Ionic 1, Ionic 2 i Ionic 3 vrijeme je za uvod u Ionic 4. Biti će dosta poznatih detalja od ranijih verzija, ali isto tako biti će i novih detalja kojih ranije nije bilo.
Manje više, sve o čemu ću u nastavku pisati može se pronaći u službenoj dokumentaciji na poveznici https://beta.ionicframework.com/docs
Postavljanje razvojne okoline
Za uspješno kreiranje Ionic 4 projekta potrebno je zadovoljiti nekoliko preduvjeta.
Potrebno je instalirati:
- Node.js LTS
- Ionic CLI pomoću naredbe: $ npm install -g ionic
- TypeScript pomoću naredbe: $ npm install -g typescript
Gore navedeno potrebno je za razvoj iOS i Android hibridnih mobilnih aplikacija. Jedina razlika s kojom se moguće susresti je način instalacije jer na Windows baziranom računalu mogu se razvijati samo Android i Windows Phone aplikacije, dok je za iOS aplikacije potreban Mac.
Prije nastavka potrebno je provjeriti da je sve uspješno instalirano:
- $ node -v
- $ npm –v
- $ ionic –v
Pokretanje Ionic 4 projekta
Ako je sve ranije navedeno uspješno instalirano već sada moguće je kreirati novi Ionic 4 projekt.
Ionic 4 beta zahtjeva oznaku --type=angular i verziju CLI-a 4.0.0 ili veću.
1 |
$ ionic start myApp sidemenu --type=angular |
Osim sidemenu teme mogao sam birati još između blank i tabs.
Ubrzo na ekranu vidim sljedeću poruku:
Da je u pitanju Ionic 3 ovdje bi dodao Cordovu, ali kako Ionic 4 podržava i koristi Capacitor u ovom slučaju neću dodati podršku za Cordovu.
Nakon toga imam mogućnost instalacije Ionic Pro SDK-a što mi u ovom slučaju nije potrebno niti ga inače koristim pa ću i tu opciju preskočiti tj. odbiti.
Na kraju dobijem sljedeću strukturu projekta:
Od važnijih dijelova aplikacije mogu izdvojiti dio koji počinje sa “app”. U pitanju je root komponenta koja je u istom obliku postojala i u dvije prijašnje verzije Ionica.
1 2 3 4 5 |
app-routing.module.ts app.component.html app.component.spec.ts app.component.ts app.module.ts |
Jedina novost ovdje je app-routing.module.ts koji sadržava:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', loadChildren: './home/home.module#HomePageModule' }, { path: 'list', loadChildren: './list/list.module#ListPageModule' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {} |
Naravno, u pitanju je Angular Routing o čemu se više može saznati na poveznici https://angular.io/guide/router
U web pregledniku projekt izgleda ovako:
Zaključak
Ovo je kratak pregled kreiranja Ionic 4 projekta koristeći Angular. U sljedećim blog postovima pokazati ću kako aplikaciji dodati nativne funkcionalnosti koristeći Capacitor jednako kao što sam to prije radio koristeći Ionic Native.