Kun luot projektin käyttäen Angular CLI:tä, se luo hyvin jäsennellyn kansio- ja tiedostorakenteen. Tämä rakenne on keskeisessä roolissa koodin järjestämisessä, mikä tekee kehityksestä tehokkaampaa ja laajennettavampaa.

Tässä tutustutaan keskeisiin kansioihin ja tiedostoihin, jotka luodaan automaattisesti uuden Angular-projektin perustamisen yhteydessä.

Projektirakenne

Kun suoritat komennon ng new angular-app, Angular CLI luo seuraavan rakenteen:

📂 src/ – Sovelluksen lähdekoodi.

Tämä kansio sisältää ydintiedostot ja määritykset, joita tarvitaan Angular-sovelluksessasi.

Sovelluskoodi

Määritystiedostot

Lisätiedostot

Angular-sovelluksen käynnistäminen

Käynnistääksesi Angular-sovelluksen, avaa ensin pääte. VS Code -editorissa voit käyttää seuraavia pikanäppäimiä:

• macOS: Cmd + J tai Cmd + `;

• Windows: Ctrl + J tai Cmd + `.

Vaihtoehtoisesti valitse ylävalikosta View → Terminal.

Suorita nyt seuraava komento:

Tämä komento kääntää projektin ja käynnistää paikallisen kehityspalvelimen. Kun prosessi on valmis, päätteessä näkyy viesti, jossa on URL-osoite:

Avaa URL-osoite (http://localhost:4200/) selaimessa, jolloin näet Angularin tervetulosivun.