Ionic 2 omogućava dodavanje široke palete Ionic Native pluginova koji mobilnoj aplikaciji daju mogućnost korištenja nativnih funkcionalnosti mobilnog uređaja. Inače, od nedavno se promijenio način korištenja Ionic Native pluginova.
Ipak, doći će vrijeme kada vam niti to neće biti dovoljno kako bi postigli sve ono što ste zamislili sa svojom Ionic 2 aplikacijom. Tu uskaču vanjske skripte kao što su npr. Chart.js i Moment.js, a kako njih dodati u Ionic 2 projekt možete saznati u nastavku.
Korištenje NPM-a
Pokretanjem NPM naredbe kao što je npr. $ npm install moment --save dodajete vanjsku skriptu u Ionic 2 projekt. U ovom primjeru dodat ćemo podršku za Moment.js.
Nakon što smo instalirali željenu skriptu potrebno je reći Ionic 2 aplikaciji da je ona aktivna i da ju želimo koristiti. To činimo na način da uvezemo željenu skriptu import moment from 'moment'; na vrhu komponente u kojoj tu skriptu želimo koristiti.
|
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 { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import moment from 'moment'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { obican_datum: any; moment_datum: any; constructor(public _navCtrl: NavController) { this.obican_datum = new(Date); console.log(this.obican_datum); this.moment_datum = moment(this.obican_datum).format('LL'); console.log(this.moment_datum); } } |
Na prednjoj strani to izgleda ovako:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ion-header> <ion-navbar> <ion-title> Ionic 2 Aplikacija </ion-title> </ion-navbar> </ion-header> <ion-content padding> <p>Običan datum: {{obican_datum}}</p> <p>Moment datum: {{moment_datum}}</p> </ion-content> |
Korištenje script taga
U ovom primjeru dodat ćemo Google Maps API.
U index.html dodajemo poveznicu na skriptu koju želimo koristiti.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<body> <!-- Ionic's root component and where the app will load --> <ion-app></ion-app> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> <!-- The polyfills js is generated during the build process --> <script src="build/polyfills.js"></script> <!-- The bundle js is generated during the build process --> <script src="build/main.js"></script> </body> |
Osim toga, kako bi imali pristup globalnom objektu potrebno je instalirati pripadajući @types paket.
Tek sada u cijeloj aplikaciji imamo dostupan globalni objekt.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public _navCtrl: NavController) { console.log(google); } } |
Zaključak
I to je to. Gore navedena dva načina dodavanja vanjskih skripti u Ionic 2 projekt ovise o mogućnostima svake pojedine skripte. Prije nego se odlučite za korištenje neke skripte provjerite koje sve načine dodavanja u Ionic 2 projekt nudi.
