Membuat aplikasi Angular

Artikel
01/13/2024

Dalam pengenalan 5-10 menit ke lingkungan pengembangan terintegrasi (IDE) Visual Studio ini, Anda membuat dan menjalankan aplikasi web frontend Angular sederhana.

Prasyarat

Pastikan untuk menginstal hal berikut:

Visual Studio 2022 atau yang lebih baru. Buka halaman unduhan Visual Studio untuk menginstalnya secara gratis.
npm (https://www.npmjs.com/), yang disertakan dengan Node.js
Angular CLI (https://angular.io/cli) Ini bisa menjadi versi pilihan Anda

Membuat aplikasi Anda

Di jendela Mulai (pilih Jendela Mulai File>untuk dibuka), pilih Buat proyek baru.
Cari Angular di bilah pencarian di bagian atas lalu pilih Proyek Angular TypeScript Mandiri.
Beri nama proyek dan solusi Anda.

Saat Anda masuk ke jendela Informasi tambahan, pastikan untuk TIDAK memeriksa opsi Tambahkan integrasi untuk Proyek API Web ASP.NET Kosong. Opsi ini menambahkan file ke template Angular Anda sehingga dapat dikaitkan dengan proyek ASP.NET Core, jika proyek ASP.NET Core ditambahkan.
Pilih Buat, lalu tunggu Visual Studio untuk membuat proyek.

Menampilkan properti proyek

Pengaturan proyek default memungkinkan Anda untuk membangun dan men-debug proyek. Tetapi, jika Anda perlu mengubah pengaturan, klik kanan proyek di Penjelajah Solusi, pilih Properti, lalu buka bagian Build atau Debugging.

Catatan

launch.json menyimpan pengaturan startup yang terkait dengan tombol Mulai di toolbar Debug. Saat ini, launch.json harus terletak di folder .vscode.

Membangun Proyek Anda

Pilih Build>Solusi Build untuk membangun proyek.

Perhatikan, build awal mungkin memakan waktu cukup lama, karena Angular CLI akan menjalankan perintah menginstal npm.

Mulai Proyek Anda

Tekan F5 atau pilih tombol Mulai di bagian atas jendela, dan Anda akan melihat prompt perintah:

CLI Angular menjalankan perintah mulai ng

Catatan

Periksa output konsol untuk pesan, seperti pesan yang menginstruksikan Anda untuk memperbarui versi Node.js Anda.

Selanjutnya, Anda akan melihat aplikasi Angular dasar muncul!

Langkah berikutnya

Untuk integrasi ASP.NET Core:

Buat aplikasi ASP.NET Core dengan Angular

Bagikan melalui