Membuat Aplikasi Angular Pertama Anda: Dasar

() translation by (you can also view the original English article)

Angular telah menjadi sangat populer selama beberapa tahun terakhir. Anda dapat menggunakan sumber kode JavaScript framework ini untuk membuat aplikasi web dan aplikasi. Jika Anda telah berpikir tentang belajar Angular tetapi tidak tahu harus mulai dari mana, mengikuti seri ini mungkin ide yang baik.

Tujuan dari seri ini adalah untuk mencakup dasar-dasar Angular sambil menciptakan aplikasi yang sangat sederhana yang menunjukkan informasi tentang berbagai negara. Angular ditulis dalam TypeScript, jadi masuk akal bahwa Anda menulis kode Anda sendiri dalam TypeScript juga.

Tidak perlu khawatir jika Anda belum pernah menggunakan TypeScript sebelumnya. Sederhananya, TypeScript baru saja diketik JavaScript dengan fitur tambahan. Saya juga menulis seri berjudul TypeScript for Beginners pada Envato Tuts+, dimana Anda dapat mempelajari dasar-dasar TypeScript terlebih dahulu.

Permulaan

Jika Anda sudah akrab dengan TypeScript, Anda bisa langsung melanjutkan dan mulai membuat aplikasi Angular pertama Anda.

Langkah pertama adalah menginstal Node.js. Anda dapat menuju ke situs website resmi dan mengunduh versi yang sesuai. Node package manager akan diinstal sebagai bagian dari Node.js.

Langkah selanjutnya adalah menginstal TypeScript dengan menjalankan perintah berikut. Saya menyarankan Anda menginstal versi TypeScript lebih dari 2.1.

1	npm install -g typescript

Akhirnya, Anda harus menginstal CLI Angular dengan menjalankan perintah berikut. Menginstal CLI Angular akan membuat proses pembuatan aplikasi Angular Anda menjadi lebih mudah.

1	npm install -g @angular/cli

Sekarang, Anda dapat membuat aplikasi Angular baru langsung dari kotak dengan menjalankan perintah berikut di dalam terminal. Sebelum menjalankan perintah, pastikan Anda telah pindah ke direktori tempat Anda ingin membuat aplikasi.

1	ng new country-app

Install semua dependensi untuk proyek membutuhkan waktu, jadi harap bersabar sementara CLI Angular menyiapkan aplikasi Anda. Setelah instalasi selesai, Anda akan melihat folder bernama country-app di direktori saat ini. Anda dapat menjalankan aplikasi Anda sekarang juga dengan mengubah direktori ke country-app dan kemudian menjalankan perintah ng serve di console.

1	cd country-app
2	ng serve --open

Menambahkan --open secara otomatis akan membuka aplikasi Anda di browser di http://localhost:4200/.

Mempelajari Aplikasi Informasi Negara

Aplikasi Informasi Negara yang kita buat akan memiliki tiga komponen. HomeComponent akan menampilkan tiga negara teratas dalam berbagai kategori seperti populasi, PDB, dan area. Anda akan dapat mengklik nama masing-masing negara untuk membaca lebih banyak tentangnya. Informasi tambahan tentang negara ini terdaftar menggunakan komponen lain, yang akan kita sebut CountryDetailComponent. Akan ada satu lagi komponen di aplikasi kita, yang akan digunakan untuk menampilkan daftar semua negara yang telah kita simpan di aplikasi kita.

Karena ini adalah aplikasi Angular pertama Anda, tujuan utama kita adalah untuk menjaga hal-hal sederhana tanpa menambahkan fungsi yang rumit. Setelah Anda memiliki pemahaman yang baik tentang dasar, membuat aplikasi yang lebih kompleks tidak akan tampak seperti tugas yang menakutkan.

Gambar di bawah ini adalah beranda atau HomeComponent di aplikasi country information kita. Seperti yang Anda lihat, ada tiga negara di bawah setiap kategori, dan mereka telah ditempatkan dalam urutan menurun. Saat membuat HomeComponent, Anda akan belajar bagaimana mengurutkan berbagai negara sebelum menampilkannya di dalam template.

Gambar berikut menunjukkan "semua halaman negara" atauAllCountriesComponent dari aplikasi kita. Tata letak komponen ini sangat mirip dengan HomeComponent. Satu-satunya perbedaan adalah saat ini kita menampilkan semua negara bersama dengan ibu kota mereka.

Jika Anda mengklik kotak negara manapun yang diberikan di dalam HomeComponent atau AllCountriesComponent, Anda akan dibawa ke halaman detail negara atau CountryDetailComponent. Informasi yang diberikan tentang suatu negara tidak dapat diedit.

Ada tombol kembali setelah detail masing-masing negara. Tombol kembali ini membawa Anda kembali ke komponen atau halaman sebelumnya. Jika Anda datang ke CountryDetailComponent dari HomeComponent, Anda akan dibawa kembali ke HomeComponent. Jika Anda sampai di CountryDetailComponent dari AllCountriesComponent, Anda akan dibawa kembali ke AllCountriesComponent.

Mengacu pada berbagai komponen yang kita buat sebagai halaman tidak benar secara teknis. Namun, saya menggunakan istilah seperti beranda atau HomeComponent secara bergantian karena melihat banyak istilah asing seperti routing, components, dan decorators dapat mengintimidasi bagi pembaca yang belum pernah membuat aplikasi Angular sebelumnya. Menggunakan istilah ini secara bebas untuk seri ini dapat membantu Anda belajar dengan cepat alih-alih bingung dengan jargon.

Dasar-Dasar Angular

Sebelum kita mulai membuat aplikasi, Anda harus merasa nyaman dengan konsep dasar Angular. Bagian ini akan membahas secara singkat topik-topik penting seperti komponen dan template.

Komponen adalah blok bangunan dari aplikasi Angular. Mereka memungkinkan Anda mengontrol UI aplikasi Anda. Komponen dasar terdiri dari dua bagian: decorator dan class definition. Anda dapat menentukan logika aplikasi untuk komponen di dalam class.

Component decorator digunakan untuk menentukan informasi seperti pemilih khusus untuk mengidentifikasi komponen, path ke template HTML, dan aturan style yang akan diterapkan ke komponen.

Berikut ini adalah dasar component decorator yang menetapkan ketiga nilai untuk CountryDetailComponent:

@Component({
    selector: 'app-country-detail',
    templateUrl: './country-detail.component.html',
    styleUrls: ['./country-detail.component.css']
})

Semua komponen yang kita buat akan memiliki pemilih khusus yang menentukan tag yang merender komponen di dalam browser. Tag khusus ini dapat memiliki nama yang Anda inginkan. Sebagai contoh, kita akan membuat countryDetailComponent di tutorial ketiga dari seri, dan kita akan menggunakan tag kustom kita sendiri yang disebut app-country-detail untuk membuat komponen ini di browser.

Setiap komponen yang Anda buat akan terdiri dari template yang mengontrol apa yang ditampilkan di halaman aplikasi. Misalnya, countryDetailComponent memiliki dua tag div yang bertindak sebagai pembungkus di sekitar konten utama komponen. Setiap informasi tentang suatu negara dimasukkan ke dalam tag p -nya sendiri, dan nama negara itu dimasukkan ke dalam tag h2 Semua tag ini dapat disimpan bersama sebagai template untuk countryDetailComponent dan kemudian dirender sebagai unit. Template komponen ini dapat disimpan sebagai file HTML atau ditentukan langsung di dalam decorator menggunakan atribut template.

Komponen yang berbeda dari aplikasi kita akan perlu mengambil data untuk ditampilkan di layar. Kita akan membuat service class yang akan berisi fungsi untuk membantu kita mengambil data ini dan mengurutkan atau memodifikasinya dengan cara apa pun. Kita kemudian akan menggunakan fungsi component class yang berbeda untuk menampilkan data ini kepada pengguna.

Anda dapat mempertimbangkan Service untuk menjadi nilai, fungsi, atau fitur yang dibutuhkan aplikasi Anda. Mendapatkan semua negara yang tersimpan di dalam aplikasi kita adalah layanan, dan begitu juga mengurutkan dan menampilkannya. Semua tiga komponen di class kita akan menggunakan fungsi dari layanan kita untuk mengambil data.

Saat membuat komponen untuk aplikasi Anda, Anda harus mengimpor dependensi dari modul yang berbeda. Sebagai contoh, kita akan mengimpor Component dari @angular/core setiap kali kita membuat komponen milik kita sendiri. Anda juga dapat menggunakan sintaks yang sama untuk mengimpor dependensi yang dibuat oleh Anda. Bagian dalam kurung kurawal digunakan untuk menentukan dependensi yang ingin Anda impor, dan bagian setelah from digunakan untuk menentukan di mana Angular dapat menemukan dependensi.

Ini adalah potongan kode dari country-app yang akan kita buat. Seperti yang Anda lihat, kita mengimpor Component dan OnInit dari @angular/core. Demikian pula, kita mengimpor Country and CountryService dari file yang kita buat sendiri.

1	import { Component, OnInit } from '@angular/core';
2
3	import { Country } from '../country';
4	import { CountryService } from '../country.service';

Aplikasi Shell

Setelah Anda menjalankan perintah ng new country-app membuat banyak file dan folder untuk Anda. Melihat begitu banyak file dapat mengintimidasi bagi pemula, tetapi Anda tidak perlu bekerja dengan semua file itu. Saat kita membuat country-app, kita hanya akan memodifikasi file yang sudah ada di dalam folder src/app serta membuat file baru di direktori yang sama. Saat ini, Anda harus memiliki lima file berbeda di folder src/app File-file ini membuat aplikasi shell yang akan digunakan untuk mengumpulkan sisa dari aplikasi kita.

File app.component.ts berisi logika untuk komponen kita yang ditulis dalam TypeScript. Anda dapat membuka file ini dan memperbarui properti title dari AppComponent class ke 'Fun Facts About Countries'. File app.component.ts sekarang harus memiliki kode berikut.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Fun Facts About Countries';
}

File app.component.html berisi template untuk AppComponentclass kita. Buka file app.component.html dan ganti kode HTML boilerplate di dalamnya dengan baris berikut:

1	<h1>{{title}}</h1>

Dengan membungkus title di dalam kurung kurawal, kita memberi tahu Angular untuk meletakkan nilai properti title dari AppComponent class di dalam tag h1.

Kita akan memperbarui file ini di tutorial terakhir dari seri ini untuk membuat komponen baru yang akan kita buat. Untuk saat ini, hanya perlu menunjukkan judul aplikasi kita.

Perubahan yang dilakukan pada file ini akan secara otomatis terlihat dalam browser di http://localhost:4200/. Pastikan saja bahwa console masih terbuka dan Anda sudah mengetikkan perintah ng serve dari awal tutorial.

Fungsi dan fitur yang berbeda dari aplikasi akan dikontrol oleh beberapa komponen yang lebih sederhana yang akan kita buat nanti. Anda dapat menganggap aplikasi shell ini sebagai mobil dan berbagai komponen yang akan kita buat sebagai bagian dari mobil itu seperti mesin dan roda. Setiap komponen akan menjalankan fungsi spesifiknya, dan Anda dapat menggabungkan semuanya untuk menciptakan seluruh mobil.

Hal Terakhir

Tujuan dari tutorial ini adalah untuk membantu Anda menginstal semua alat yang diperlukan yang Anda butuhkan untuk membuat aplikasi Angular dan dengan cepat membahas beberapa konsep dasar Angular.

Untuk meringkas, Anda perlu mengetahui dasar-dasar dari TypeScriptsebelum Anda dapat membuat aplikasi Angular. Pada langkah berikutnya, Anda perlu menginstal Node.js, TypeScript, dan CLI Angular. Setelah itu, Anda dapat menjalankan banyak perintah dari bagian permulaan dari tutorial ini, dan aplikasi Angular pertama Anda akan aktif dan berjalan.

Country app kita akan melakukan lebih dari sekadar menampilkan judul. Di tutorial berikutnya, Anda akan membuat beberapa class dan service yang akan digunakan untuk menyimpan dan mengambil data tentang berbagai negara. Class dan service ini akan berguna dalam tutorial ketiga dan keempat, di mana kita akan membuat berbagai komponen dari aplikasi kita.

Sementara kita mengerjakan seri tutorial ini, jangan lupa untuk memeriksa Envato Market untuk melihat apa yang tersedia untuk digunakan dan belajar Angular dan JavaScript, secara umum.