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

Tässä tutustutaan uusiin Angular-projekteihin automaattisesti luotaviin keskeisiin kansioihin ja tiedostoihin.

Projektirakenne

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

📂 src/ – Sovelluksen lähdekoodi.

Tämä kansio sisältää ydintiedostot ja kokoonpanot, joita Angular-sovellus tarvitsee.

Sovelluskoodi

Määritystiedostot

Lisätiedostot

Angular-sovelluksen käynnistäminen

Käynnistä Angular-sovellus avaamalla 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.