Ionic 2 - Dodavanje vanjskih skripti

Ionic 2 – Dodavanje vanjskih skripti

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.

Ionic2 & MomentJS

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.

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:

Ionic2 & MomentJS

<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.

<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.

NPM types google-maps

Tek sada u cijeloj aplikaciji imamo dostupan globalni objekt.

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);

  }

}

GoogleMaps Global Object

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.

Objavio

Tomislav Stanković

Bloger širokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *