Angular adalah platform dan kerangka kerja pengembangan TypeScript yang digunakan untuk membuat aplikasi satu halaman.

Angular memiliki sejarah yang kompleks. Pengembang menggunakan JavaScript untuk membangun versi pertama dari kerangka kerja ini (AngularJS). Angulardevelopers kemudian menggunakan TypeScript untuk membangun semua versi Angular yang berurutan (karena jumlah bug di versi pertama).

Pada tahun 2021, versi terbaru Angular adalah 12.0. Dalam artikel ini, Anda akan mempelajari semua yang perlu Anda ketahui tentang Angularframework.

Apa itu Sudut?

Banyak orang menggambarkan Angular sebagai kerangka kerja, dan meskipun definisi ini tidak salah, Angular bukan hanya kerangka kerja. Angular juga merupakan platform pengembangan. Ini berarti ia memiliki sistem perangkat keras dan perangkat lunak, yang menjalankan aplikasi Angular.

Meskipun dibangun di atas TypeScript, Anda dapat menulis sebagian besar kode platform dalam JavaScript. Seperti kebanyakan kerangka kerja, Angular berbasis komponen. Ini berarti bahwa setiap bagian dari antarmuka pengguna Angular diperlakukan sebagai entitas independen, yang mengarah pada pembuatan kode yang dapat digunakan kembali dan aplikasi yang dapat diskalakan.

Untuk menggunakan Angular, Anda harus terbiasa dengan HTML, CSS, dan JavaScript (mengetahui TypeScript adalah aset, tetapi bukan persyaratan). Angularis sering dibandingkan dengan VueJS dan ReactJS, dan salah satu keluhan utama adalah bahwa Angular memiliki kurva belajar yang lebih curam.

Terkait: Apa Itu ReactJS, dan Apa Kegunaannya?

Ini tidak mengherankan, karena Angular (menjadi platform pengembangan), memiliki lebih banyak struktur inti untuk Anda kenal. Struktur ini meliputi:

• Modul
• Komponen
• Template

Dan memahami fitur-fitur inti ini akan memastikan bahwa Anda berada di jalur yang tepat untuk menjadi pengembang Angular.

Menjelajahi File Sudut

Aplikasi Angular menghasilkan banyak file dalam folder proyek baru Anda (seperti yang Anda lihat pada gambar di bawah). Periksa situs web resmi Angular untuk instruksi tentang cara menginstal Angular di komputer Anda.

Salah satu file yang lebih penting dalam folder proyek utama adalah package.json mengajukan. File ini memberi tahu Anda nama proyek Anda, cara memulai proyek Anda (ng melayani), bagaimana membangun proyek Anda (membangun), dan cara menguji proyek Anda (tes ng) antara lain.

Folder proyek utama Anda juga berisi dua folder—node_modules dan src. NS src folder adalah tempat Anda akan melakukan semua pengembangan Anda; itu berisi beberapa file dan folder.

Folder src

NS style.css file adalah tempat Anda meletakkan semua preferensi gaya global Anda, dan index.html file adalah satu halaman yang dirender di browser Anda.

Menjelajahi File index.html

Satu-satunya hal yang ingin Anda ubah di index.html file di atas adalah judul aplikasi. NS tag di badan file HTML di atas tautan ke app.component.ts file, yang terletak di dalam folder aplikasi (seperti yang Anda lihat pada gambar di bawah).

Menjelajahi File app.component.ts

impor {Komponen } dari '@angular/core';
@Komponen({
pemilih: 'aplikasi-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
kelas ekspor AppComponent {
judul = 'aplikasi saya';
}

NS app.component.ts file menggunakan aplikasi-root pemilih, yang terletak di index.html berkas di atas. Ini menggunakan app.component.html file sebagai template dan app.component.css file untuk gaya.

NS app.component.css file kosong saat dibuat karena semua preferensi gaya, bersama dengan tata letak HTML, berada di dalam app.component.html mengajukan.

Menjalankan aplikasi Angular dengan ng melayani --buka perintah akan menampilkan yang berikut di browser Anda:

Untuk mengubah apa yang ditampilkan di browser Anda, Anda harus mengedit app.component.html mengajukan.

Mengganti konten file ini dengan kode berikut:

Halo Dunia

Akan menghasilkan output berikut di browser Anda:

Memahami Modul Sudut

Setiap sudut aplikasi dibangun di atas sistem modul dasar, yang dikenal sebagai NgModul. Setiap aplikasi berisi setidaknya satu NgModul. sudut menghasilkan dua modul dari baru memerintah (app-routing.module.ts dan app.module.ts).

NS app.module.ts file berisi modul root, yang harus ada agar aplikasi dapat dijalankan.

Menjelajahi File app.module.ts

impor { NgModule } dari '@angular/core';
impor { BrowserModule } dari '@angular/platform-browser';
impor { AppRoutingModule } dari './app-routing.module';
impor { AppComponent } dari './app.component';
@NgModule({
deklarasi: [
Komponen Aplikasi
],
impor: [
Modul Peramban,
AppRoutingModul
],
penyedia: [],
bootstrap: [AppComponent]
})
kelas ekspor AppModule {}

File di atas menggunakan JavaScript impor pernyataan untuk mengimpor NgModul, NS BrowserModul, NS Komponen Aplikasi, dan AppRoutingModul (yang merupakan NgModule kedua dalam proyek).

NS @NgModule dekorator datang setelah impor. Ini menunjukkan bahwa app.module.ts file memang NgModul. NS @NgModule dekorator kemudian mengonfigurasi beberapa larik: the deklarasi, NS impor, NS penyedia, dan bootstrap.

NS deklarasi array menyimpan komponen, arahan, dan pipa milik spesifik NgModul. Namun, dalam kasus modul root hanya Komponen Aplikasi disimpan di pernyataan array (seperti yang Anda lihat pada kode di atas).

NS impor array mengimpor yang lain NgModul yang Anda gunakan dalam aplikasi. NS impor array dalam kode di atas mengimpor BrowserModul (yang memungkinkannya menggunakan layanan khusus browser, seperti rendering DOM), dan AppRoutingModul (yang memungkinkan aplikasi untuk menggunakan sudut router).

Terkait: Pahlawan Tersembunyi Situs Web: Memahami DOM

NS penyedia array harus berisi layanan yang komponennya di lain NgModul bisa menggunakan.

NS bootstrap array sangat penting karena berisi komponen entri yang dibuat dan dimasukkan oleh Angular ke dalam index.html file di folder proyek utama. Setiap aplikasi Angular diluncurkan dari bootstrap array di root NgModul oleh bootstrap NS NgModul (yang melibatkan proses yang memasukkan setiap komponen ke dalam bootstrap array di DOM browser).

Memahami Komponen Sudut

Setiap komponen Angular dihasilkan dengan empat file tertentu. Jika Anda melihat gambar folder aplikasi di atas, Anda akan melihat file-file berikut:

• app.component.css (file CSS)
• app.component.html (file templat)
• app.component.spec.ts (file spesifikasi pengujian)
• app.component.ts (file komponen)

Semua file di atas terkait dengan komponen yang sama. Jika Anda menggunakan ng menghasilkan perintah untuk menghasilkan komponen baru, empat file serupa dengan yang di atas akan dihasilkan. NS app.component.ts file berisi komponen akar, yang menghubungkan berbagai aspek komponen (seperti template dan gaya).

Menjelajahi File app.component.ts

impor { Komponen } dari '@angular/core';
@Komponen({
pemilih: 'aplikasi-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
kelas ekspor AppComponent {
judul = 'aplikasi saya';
}

NS app.component.ts file menggunakan pernyataan impor JavaScript untuk mengimpor "Komponen" dari inti Angular. Kemudian @Komponen dekorator mengidentifikasi kelas sebagai komponen. NS @Komponen dekorator berisi objek yang terdiri dari a pemilih, A templateUrl, dan gayaUrl Himpunan.

NS pemilih memberitahu sudut untuk menyisipkan instance komponen aplikasi dalam template HTML apa pun yang memiliki tag yang sesuai dengan pemilih (sehingga menandai). Dan jika Anda melihat kembali kode di index.html file di atas Anda akan menemukan menandai.

File komponen aplikasi utama juga tertaut ke file template, menggunakan templateUrl Properti. Ini adalah app.component.html file, yang menguraikan bagaimana komponen tertentu harus dirender dalam aplikasi Angular.

Properti terakhir dalam objek adalah gayaUrl. Properti ini mereferensikan larik lembar gaya, yang berarti Anda dapat menerapkan beberapa lembar gaya ke satu komponen (sehingga Anda dapat menambahkan lembar gaya global di folder src ke array styleUrls sebagai dengan baik).

Memahami Template Sudut

NS app.component.html file adalah contoh template Angular. File ini adalah file HTML serta file komponen (komponen aplikasi). Oleh karena itu, setiap komponen harus memiliki template HTML, hanya karena menguraikan bagaimana komponen dirender di DOM.

Apa berikutnya?

Memahami DOM adalah langkah terbaik Anda berikutnya. Mengambil platform dan kerangka kerja Angular tidak diragukan lagi menantang. Namun, itu mungkin, dan mengingat Angular merender komponennya di DOM, mempelajari DOM—saat Anda mencoba menguasaiAngular—adalah langkah hebat lainnya.

Pahlawan Tersembunyi Situs Web: Memahami DOM

Belajar desain web dan perlu tahu lebih banyak tentang Model Objek Dokumen? Inilah yang perlu Anda ketahui tentang DOM.

Baca Selanjutnya

Tentang Penulis