Cara Menjalankan Proyek Sudut [Penjelasan Langkah-demi-Langkah]

AngularJS harus dimiliki oleh pengembang full-stack. Ini sangat penting untuk pengembangan front-end karena menyederhanakan penggunaan arahan HTML. Mengembangkan aplikasi web menjadi lebih mudah saat Anda menggunakan Angular. Jadi dalam artikel ini, kita akan membahas bagaimana Anda bisa memulai dengan Angular. Kami akan membahas cara menginstal Angular dan cara menjalankan proyek Angular.

CLI Sudut: Pengantar Singkat

Jika Anda ingin mengerjakan proyek Angular, Anda harus memiliki Angular CLI. Ini adalah alat resmi Angular untuk mengerjakan proyek Angular dan menginisialisasinya. Angular CLI mengurangi banyak kerepotan dari proses inisialisasi. Anda tidak perlu melakukan beberapa konfigurasi dan membangun alat untuk memulai proyek jika Anda menggunakan Angular CLI.

Angular CLI memungkinkan Anda untuk memulai proyek hanya dengan satu perintah. Dengan perintah lain, Anda dapat melayani proyek menggunakan server pengembangan lokal. CLI sudut bekerja di Node.js. Jadi, untuk menjalankan Angular CLI di sistem Anda, Anda harus memiliki Node.js di sistem Anda terlebih dahulu.

Node.js adalah untuk server dan untuk mengembangkan aplikasi sisi server, sedangkan Angular adalah solusi ujung depan. Node.js hanya membantu Anda dengan Angular CLI.

Bagaimana Cara Menginstal Sudut?

Langkah pertama

Sebelum Anda menginstal Angular di sistem Anda, Anda harus memiliki Node dan npm di sistem Anda. Anda dapat menggunakan Node Version Manager untuk menginstalnya, atau Anda dapat menggunakan manajer paket resmi OS Anda. Anda juga memiliki opsi untuk menginstal Node dari situs webnya. Kami merekomendasikan untuk menginstalnya dari situs web karena cepat dan mudah. Anda hanya perlu menuju ke halaman unduh node.js .

Tahap kedua

Setelah Anda berada di halaman unduh node.js, pilih versi yang Anda butuhkan sesuai dengan sistem operasi Anda, lalu ikuti langkah-langkah yang ditentukan dalam wizard penginstalan. Jika Anda telah menginstal node.js di sistem Anda sebelumnya, Anda dapat melewati langkah ini (dan langkah sebelumnya).

Langkah Ketiga:

Untuk memeriksa apakah Node diinstal di perangkat Anda atau tidak, buka command prompt dan jalankan perintah berikut:

$ simpul -v

Ini akan menunjukkan versi Node yang saat ini diinstal di sistem Anda.

Langkah Ketiga

Setelah memeriksa apakah Anda telah menginstal Node di sistem Anda, Anda dapat menginstal Angular di perangkat Anda dengan menjalankan perintah command prompt berikut:

$npm instal @angular/cli

Setelah menjalankan perintah di atas, Angular CLI akan diinstal di perangkat Anda. Anda telah menyelesaikan bagian 'cara menginstal Angular'.

Pelajari: Gaji Pengembang Sudut di India: Untuk Freshers & Berpengalaman

Bagaimana Menjalankan Proyek Sudut?

Karena kami telah menginstal Angular di sistem kami, kami sekarang akan fokus untuk memulai proyek baru.

Langkah pertama

Kami akan membuat ruang kerja dan aplikasi starter dengan menjalankan perintah berikut:

ng tur-sudut-pahlawan baru

Kami telah menambahkan angular-tour-of-heroes sebagai nama untuk ruang kerja kami. Perintah 'ng new' akan menanyakan fitur yang ingin Anda tambahkan di aplikasi pemula. Karena ini adalah tutorial, kami akan memilih default dan melanjutkan dengan menekan Return atau Enter.

Tahap kedua

Sekarang, Angular CLI telah menginstal paket dan dependensi npm yang diperlukan. Anda akan memiliki 'Aplikasi selamat datang' yang siap digunakan dan ruang kerja baru. Anda juga akan memiliki folder root dengan nama yang sama dengan aplikasi (angular-tour-of-heroes), dan proyek aplikasi kerangka.

Pada langkah ini, kita harus melayani aplikasi. Kami akan melakukannya dengan menuju ke direktori ruang kerja dan meluncurkan aplikasi:

cd tur-sudut-pahlawan

ng servis –buka

Perintah 'ng serve' akan membuat aplikasi, memulai server pengembangan, menjaga file sumber proyek, dan membangun kembali aplikasi saat Anda memodifikasi file yang diperlukan.

Langkah Ketiga

Jika Anda ingin memodifikasi aplikasi, Anda harus membuka folder src/app di IDE atau editor Anda. Kami akan mengedit aplikasi kami dengan mengubah komponen proyek ini. Komponen adalah blok bangunan aplikasi Angular. Mereka menangani hampir semua fungsi dasar dari proyek Angular, seperti menampilkan data, menanggapi input, dll.

Pada langkah ini, buka IDE Anda dan buka direktori proyek dan temukan file komponen proyek Anda:

• app.component.ts
• app.component.html
• app.component.css

File pertama adalah kode kelas dan berbasis di TypeScript, file kedua adalah template dalam HTML, dan yang terakhir memiliki gaya CSS pribadi.

Langkah Keempat

Proyek kami telah disiapkan, dan kami telah menyiapkan semua file. Pada langkah ini, kami akan mempersonalisasikannya dengan menambahkan judul ke dalamnya. Untuk mengubah judul proyek Angular Anda, buka file app.component.ts dan hapus template default yang ada. Angular CLI menghasilkan template generate secara otomatis. Anda dapat menggantinya dengan yang berikut ini:

<h1>{{gelar Anda}}</h1>

Kurung kurawal adalah sintaks pengikatan interpolasi. Anda dapat mengganti 'judul Anda' dengan judul yang Anda inginkan. Setelah Anda memasukkan judul yang diinginkan, segarkan browser, dan aplikasi Anda akan memiliki judul baru.

Langkah Kelima

Personalisasi aplikasi tidak akan lengkap tanpa gaya apa pun. Jadi, pada langkah ini, kita akan memodifikasi gaya aplikasi Angular kita. Angular CLI menghasilkan styles.css kosong untuk aplikasi Anda saat Anda membuat proyek baru. Anda dapat memasukkan gaya yang Anda inginkan di sini.

Buka file src/styles.css di IDE Anda dan mulailah memodifikasi gaya aplikasi. Ubah gaya aplikasi dan simpan perubahannya. Saat menyegarkan browser, Anda akan melihat perubahan di aplikasi Anda.

Checkout: Bagaimana Cara Menerapkan Pagination di Angular JS?

Pelajari Lebih Lanjut Tentang Pengembangan Angular dan Full-Stack

Sekarang Anda tahu cara menginstal Angular di sistem Anda dan cara menjalankan proyek Angular. Setelah Anda memahaminya, Anda akan melihat bahwa bekerja dengan Angular jauh lebih mudah daripada yang Anda kira. Dengan sedikit pengalaman, Anda dapat mulai mengerjakan proyek pengembangan web front-end dengan Angular.

Jika Anda tertarik untuk mempelajari lebih lanjut tentang Angular dan pengembangan web front-end, berikut adalah beberapa sumber tambahan:

• Panduan Resume Pengembang Front-end
• 10 Keterampilan Teratas untuk Menjadi Pengembang Front-end
• Ide Proyek Front-end

Di sisi lain, Anda dapat mengikuti kursus pengembangan lengkap dan belajar dari pakar industri melalui video, proyek, dan kuis.

Jika Anda tertarik untuk mempelajari lebih lanjut tentang pengembangan perangkat lunak full-stack, lihat Diploma PG tingkat & IIIT-B dalam Pengembangan Perangkat Lunak Full-stack yang dirancang untuk profesional yang bekerja dan menawarkan 500+ jam pelatihan yang ketat, 9+ proyek dan tugas , Status Alumni IIIT-B, proyek batu penjuru praktis & bantuan pekerjaan dengan perusahaan-perusahaan top.