() translation by (you can also view the original English article)
Dalam posting ini kita akan melihat pada ionic page. Saya akan menunjukkan kepada anda bagaimana untuk mengedit konten dalam aplikasi Anda serta bagaimana membuat page tambahan dan mengatur navigasi.
Mengedit konten page
Dalam memulai dengan ionic, kita belajar cara membuat proyek ionic pertama kami. Menjalankan dari sana, dalam tutorial ini, kita akan mengedit salah satu page yang sudah kita buat untuk aplikasi kami.
Untuk mengedit page kita, kita perlu membuka proyek kita menggunakan tool text editor. Dalam kasus saya, aku akan menggunakan Visual Studio code, tapi silahkan merasa bebas untuk menggunakan text editor kesukaan. Setelah Anda memiliki membuka proyek anda, seharusnya terlihat mirip dengan gambar di bawah (Perhatikan kita membuka folder seluruh proyek dan bukan hanya page tertentu):
Ionic menggunakan file halaman yang berisi semua file yang diperlukan yang Anda akan perlu untuk membuat perubahan pada halaman tertentu dalam aplikasi Anda. Halaman ini dapat ditemukan dalam folder di bawah folder src dalam proyek ionic anda.
Kami akan membuat perubahan sederhana di app ionik kita, dengan mengedit halaman home. Untuk melakukannya, arahkan ke file home.html di src/pages/home dan membuat perubahan berikut ke file:
1 |
<ion-header>
|
2 |
<ion-navbar>
|
3 |
<ion-title>My Home</ion-title> |
4 |
</ion-navbar>
|
5 |
</ion-header>
|
6 |
|
7 |
<ion-content padding> |
8 |
<h2>Welcome to My Ionic App!</h2> |
9 |
<p>
|
10 |
This is super awesome. |
11 |
</p>
|
12 |
<p>
|
13 |
This is my 1st Ionic app ever. |
14 |
</p>
|
15 |
</ion-content>
|
Dengan itu dilakukan, arahkan ke file home.scss, juga di src/pages/home, dan membuat perubahan berikut:
1 |
page-home { |
2 |
|
3 |
ion-content { |
4 |
background: black !important; |
5 |
}
|
6 |
|
7 |
h2 { |
8 |
color: white; |
9 |
}
|
10 |
|
11 |
p { |
12 |
color: white; |
13 |
}
|
14 |
|
15 |
}
|
Di sini, kami mengubah warna latar belakang halaman home dari putih menjadi hitam dengan menargetkan ion-content. Ini adalah di mana konten halaman berada. Selain itu, kami juga ditargetkan elemen header h2 serta elemen p (paragraph) dan mengubah warna teks untuk keduanya menjadi putih.
Jika sudah selesai meruah (jangan lupa untuk menyimpan), menjalankan ionic serve atau ionic lab dari command line. ionic CLI tool ini akan mengkompilasi aplikasi Anda dan membuatnya tersedia untuk pengujian. Aku akan menggunakan ionic lab dalam contoh ini.
Setelah Anda telah berhasil menjalankan salah satu perintah ini, local development server harus memutar aplikasi Anda, dan seharusnya terlihat seperti ini:
Ionic Page struktur
Jadi, kami telah mengedit halaman home dengan mengubah teks serta warna latar belakang halaman. Bagaimana kita pergi tentang melakukan hal ini? Folder halaman rumah kami terdiri dari tiga file: home.html, home.scss dan home.ts.
home.ts adalah file TypeScript yang terdiri dari komponen Angular dengan decorator komponen berikut:
1 |
@Component({ |
2 |
selector: 'page-home', |
3 |
templateUrl: 'home.html' |
4 |
})
|
File home.html yang bertindak sebagai komponen yang template, yang bisa kita gunakan untuk membuat perubahan pada konten halaman home kami. Itu ditentukan dengan parameter templateUrl untuk decorator komponen.
Untuk mengubah gaya halaman rumah, kita bisa menggunakan CSS atau SCSS dalam home.scss file.
Membuat halaman tambahan
Selanjutnya, kita akan membuat sebuah halaman tambahan di aplikasi kita panggil info. Untuk membuat halaman baru ini, kita perlu menjalankan perintah berikut dalam proyek kami: ionic generate page info. Dalam Visual Studio code, kita dapat melakukannya dengan membuka terminal yang terintegrasi dari View > Integrated Terminal. Cukup ketik perintah sana dan tekan Enter.
Ini akan menghasilkan halaman baru dalam proyek Anda, dengan file info.html, info.ts, dan info.scss.
Setelah halaman yang dihasilkan berhasil, Anda dapat melihatnya di bawah folder halaman dalam file proyek Anda. Dalam rangka bagi kita untuk dapat menggunakan halaman yang baru kita buat di dalam aplikasi kita, kita perlu terlebih dahulu mendaftarkan di file app.module.ts kami. Anda dapat menemukan ini di folder src/app.
Pertama, menambahkan pernyataan import file komponen halaman info Anda di dekat bagian atas app.module.ts.
1 |
import { InfoPage } from '../pages/info/info'; |
Anda dapat menambahkan ini di bawah pernyataan import untuk halaman lain.
Kemudian, tambahkan InfoPage ke declarations dan array entryComponents modul app Anda. Deklarasi @NgModule Anda sekarang harus terlihat seperti berikut:
1 |
@NgModule({
|
2 |
declarations: [ |
3 |
MyApp, |
4 |
AboutPage, |
5 |
ContactPage, |
6 |
HomePage, |
7 |
TabsPage, |
8 |
InfoPage |
9 |
], |
10 |
|
11 |
//... |
12 |
|
13 |
entryComponents: [ |
14 |
MyApp, |
15 |
AboutPage, |
16 |
ContactPage, |
17 |
HomePage, |
18 |
TabsPage, |
19 |
InfoPage |
20 |
], |
21 |
|
22 |
//... |
Navigasi dalam ionic
Dalam bentuk yang paling sederhana, Ionic mendorong dan muncul halaman sebagai konsep navigasi. Idenya adalah bahwa kita adalah susun halaman di atas satu sama lain — ketika kita membuka halaman baru, kita dorong ke tumpukan, dan ketika kita kembali ke halaman sebelumnya, kami pop halaman.
Jadi bila Anda melihat halaman dalam aplikasi ionic, Anda selalu melihat halaman paling atas pada tumpukan, dan jika Anda klik untuk melihat halaman yang berbeda, Anda akan mendorong Halaman ini di atas tumpukan navigasi meliputi halaman sebelumnya di tampilan.
Jika Anda adalah untuk kembali ke halaman sebelumnya, Anda akan kemudian memunculkan halaman dari tumpukan dan melihat halaman di bawah ini. Menganggapnya sebagai setumpuk kartu, mana Anda menambahkan dan menghapus kartu dari dek.
Tambahkan tombol navigasi
Menjalankan dengan contoh kami, dengan halaman kami berhasil dibuat dan terdaftar dalam aplikasi kita, mari kita mengatur navigasi ke halaman kami baru dibuat dari halaman home.
Menggunakan halaman home yang kita edit sebelumnya, mari kita lebih lanjut menyesuaikan dengan menambahkan sebuah tombol yang akan memungkinkan kita untuk menavigasi ke halaman info. Tambahkan kode berikut ke home.html, didalalm ion-contnet dan dibawah paragraf teks:
1 |
<button ion-button>Navigate to Info</button> |
Kode di atas menunjukkan komponen ionik, yakni ion-button. Kemudian kita akan menambahkan sebuah clik handler sehingga ketika tombol ini ditekan, kami akan menavigasi ke halaman info.
Halaman rumah Anda akan terlihat seperti ini sekarang:
Namun, jika kita klik pada tombol yang baru dibuat, itu tidak akan membawa kita di mana saja karena kita belum diprogram namun dengan fungsionalitas. Untuk melakukannya, kita harus menambahkan event listener klik yang diikuti oleh fungsi ke tombol kami sebagai berikut:
1 |
<button ion-button (click)="navigateToInfo()">Navigate to Info</button> |
Selanjutnya, mari kita pergi ke depan dan menyatakan fungsi yang kita tulis di atas, navigateToInfo(), dalam file home.ts kami. Pertama, impor helper NavController dari perpustakaan ionic-angular. NavController memungkinkan kita untuk mengelola navigasi di aplikasi ionic kita, dan kita akan menggunakannya untuk mendorong halaman info di atas halaman home ketika tombol diklik.
Kita juga harus mengimpor komponen InfoPage. Meletakkan baris di bagian atas dari home.ts file.
1 |
import { NavController } from 'ionic-angular'; |
2 |
import { InfoPage } from '../info/info'; |
Selanjutnya, kami akan mengubah halaman home komponen untuk menerima sebuah instance dari NavController melalui dependecy injection. Mengubah halaman home konstruktor sebagai berikut:
1 |
constructor(public navCtrl: NavController) { |
2 |
}
|
Akhirnya, kita dapat menyatakan fungsi navigateToInfo dalam komponen HomePage kami.
1 |
navigateToInfo() {
|
2 |
this.navCtrl.push(InfoPage) |
3 |
} |
Semua yang kita lakukan adalah mendorong referensi untuk komponen halaman info untuk NavController.
Memperbarui halaman Info
Dengan di atas menyelesaikan, navigasikan ke halaman info.html, dan menambah header baru ion-content. Mungkin sesuatu seperti<h2>Ini mengagumkan...</h2>.
Sekarang, jika Anda menjalankan aplikasi Anda dan klik tombol Navigate to Info pada home page, Anda akan melihat halaman info yang baru dibuat. Juga perhatikan tombol back, yang secara otomatis dibuat untuk Anda oleh ionic.
Selamat! Anda telah berhasil membuat dan navigasikan ke halaman baru. Jangan ragu untuk mengulangi proses ini dan membuat halaman lain dalam proyek demo ini.
Kesimpulan
Sejauh ini dalam seri ini, kita telah berhasil membuat proyek ionic baru, membuat halaman baru, mengedit isi halaman kami, dan mengatur navigasi. Sekarang kita telah membahas beberapa konsep inti yang akan membantu kita lebih lanjut saat kami melanjutkan perjalanan kami mengembangkan aplikasi ionic.
Sementara kau di sini, check out beberapa posting kami tentang ionic app development!
