0Pricing
Angular Academy · Pelajaran

Penjelasan Struktur Proyek

Jelajahi file yang dibuat oleh CLI.

Penjelasan Struktur Proyek adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Penjelasan Struktur Proyek

Ruang kerja Angular memiliki tata letak yang mudah diprediksi. Dengan mengetahui file dan folder utama, Anda dapat menavigasi proyek apa pun.

Folder src

Folder src/ menyimpan kode sumber aplikasi Anda: titik masuk, kode aplikasi, dan aset global seperti index.html serta lembar gaya.

main.ts

src/main.ts adalah titik masuk aplikasi. File ini melakukan bootstrap komponen akar dengan bootstrapApplication.

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig);

index.html

src/index.html adalah satu-satunya halaman HTML. Bagian body-nya berisi pemilih komponen akar, tempat Angular merender aplikasi.

<!-- inside body -->
<!-- <app-root></app-root> -->

Folder app

src/app/ menyimpan komponen, layanan, rute, dan konfigurasi Anda. Proyek baru mencakup app.component, app.config.ts, dan app.routes.ts.

File app.component

Komponen akar biasanya memiliki class .ts, template .html, dan lembar gaya .css (atau .scss), serta file pengujian .spec.ts.

app.config.ts

app.config.ts mengekspor ApplicationConfig dengan array penyedia yang digunakan saat bootstrap, seperti router dan klien HTTP.

app.routes.ts

app.routes.ts mengekspor array definisi rute yang digunakan oleh provideRouter.

import { Routes } from '@angular/router';

export const routes: Routes = [];

angular.json

Di akar ruang kerja, angular.json mengonfigurasi CLI: target build, jalur keluaran, aset, gaya, dan opsi serve untuk setiap proyek.

package.json dan tsconfig

package.json mencantumkan dependensi dan skrip npm. File tsconfig.json mengonfigurasi kompiler TypeScript untuk aplikasi dan pengujian.

public atau assets

File statis (gambar, font, favicon) berada di folder public atau assets dan disalin ke keluaran build sesuai konfigurasi dalam angular.json.

Pemeriksaan Cepat: Struktur

Identifikasi titik masuknya.

Ringkasan: Struktur

Anda telah menjelajahi ruang kerja: src/ untuk sumber, main.ts sebagai titik masuk, index.html sebagai halaman host, app/ untuk komponen dan konfigurasi, serta angular.json untuk konfigurasi CLI. Berikutnya: membuat kode dengan CLI.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Penjelasan Struktur Proyek” gratis?

Ya — teks lengkap “Penjelasan Struktur Proyek” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Penjelasan Struktur Proyek”?

Jelajahi file yang dibuat oleh CLI. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Penjelasan Struktur Proyek” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Membuat Proyek Baru
  2. Penjelasan Struktur Proyek
  3. Membuat Kode dengan ng generate
  4. Membangun dan Menyajikan
← Kembali ke Angular Academy