Angular Academy · Pelajaran

Menjalankan Aplikasi Standalone

Mulai aplikasi dengan bootstrapApplication.

Pelajaran 4 dari 413 langkah

Menjalankan Aplikasi Standalone adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.

Melakukan Bootstrap Aplikasi Mandiri

Aplikasi yang sepenuhnya mandiri dimulai dengan bootstrapApplication, bukan dengan melakukan bootstrap pada NgModule akar. Anda memberikan komponen akar kepadanya.

Titik Masuk: main.ts

File titik masuk aplikasi adalah main.ts. File ini memanggil bootstrapApplication dengan komponen akar, biasanya AppComponent.

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

bootstrapApplication(AppComponent);

Asal bootstrapApplication

bootstrapApplication diimpor dari @angular/platform-browser. Ini menggantikan pola platformBrowserDynamic().bootstrapModule yang lebih lama.

Komponen Akar

Komponen akar adalah komponen mandiri biasa. Biasanya komponen ini menampung outlet perute atau tata letak tingkat teratas Anda.

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

@Component({
  selector: 'app-root',
  template: '<h1>My App</h1>'
})
export class AppComponent {}

Menyediakan Layanan Aplikasi

Penyedia di seluruh aplikasi ditempatkan dalam argumen kedua: objek dengan array providers. Di sinilah perute, klien HTTP, dan layanan global dikonfigurasi.

bootstrapApplication(AppComponent, {
  providers: []
});

Menyediakan Perute

Gunakan provideRouter(routes) untuk menyiapkan perutean pada aplikasi mandiri.

import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)]
});

Menyediakan HttpClient

Aktifkan HTTP dengan provideHttpClient() dalam array providers.

import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()]
});

Menggabungkan Penyedia

Cantumkan sebanyak mungkin fungsi provide* yang diperlukan secara bersamaan.

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
});

Pola app.config.ts

CLI biasanya mengekstrak penyedia ke dalam app.config.ts sebagai ApplicationConfig, sehingga main.ts tetap bersih.

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)]
};

Menggunakan app.config dalam main.ts

Kemudian main.ts cukup meneruskan appConfig.

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

bootstrapApplication(AppComponent, appConfig);

Penanganan Kesalahan

bootstrapApplication mengembalikan Promise. Anda dapat menangkap kesalahan saat memulai aplikasi untuk mencatatnya.

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

Cek Singkat: Bootstrap

Bagaimana aplikasi mandiri dimulai?

Jawab di pelajaran interaktif

Ringkasan: Bootstrap

Anda melakukan bootstrap pada aplikasi mandiri dengan bootstrapApplication(AppComponent), sambil meneruskan penyedia di seluruh aplikasi seperti provideRouter dan provideHttpClient. CLI menempatkan penyedia ini ke dalam app.config.ts. NgModule akar tidak diperlukan. Anda telah menyelesaikan pendalaman Komponen Mandiri.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 38
Pelajaran: 144

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menjalankan Aplikasi Standalone” gratis?

Ya — teks lengkap “Menjalankan Aplikasi Standalone” 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 “Menjalankan Aplikasi Standalone”?

Mulai aplikasi dengan bootstrapApplication. 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 4 dari 4.

Berapa lama pelajaran “Menjalankan Aplikasi Standalone” 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

← Kembali ke Angular Academy