Förklaring av projektstrukturen
Gå igenom filerna som CLI genererar.
Förklaring av projektstrukturen är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.
Projektstrukturen förklarad
En Angular-workspace har en förutsägbar struktur. När Ni känner till de viktigaste filerna och mapparna blir det lättare att navigera i alla projekt.
Mappen src
Mappen src/ innehåller applikationens källkod: startpunkten, appkoden och globala resurser som index.html och styles.
main.ts
src/main.ts är applikationens startpunkt. Den bootstrappar rotkomponenten med 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 är den enda HTML-sidan. Dess body innehåller väljaren för rotkomponenten, där Angular renderar appen.
<!-- inside body -->
<!-- <app-root></app-root> -->Mappen app
src/app/ innehåller komponenter, tjänster, routes och konfiguration. Ett nytt projekt innehåller app.component, app.config.ts och app.routes.ts.
Filerna i app.component
Rotkomponenten består vanligtvis av en .ts-klass, en .html-mall och en .css- eller .scss-stilmall, samt en .spec.ts-testfil.
app.config.ts
app.config.ts exporterar en ApplicationConfig med den providers-array som används vid bootstrap, till exempel för routern och HTTP-klienten.
app.routes.ts
app.routes.ts exporterar arrayen med routedefinitioner som används av provideRouter.
import { Routes } from '@angular/router';
export const routes: Routes = [];angular.json
I workspacens rot konfigurerar angular.json CLI:t: byggmål, sökvägar för utdata, resurser, stilmallar och serve-alternativ för varje projekt.
package.json och tsconfig
package.json listar beroenden och npm-skript. Filerna tsconfig.json konfigurerar TypeScript-kompilatorn för appen och testerna.
public eller assets
Statiska filer (bilder, typsnitt och favicon) ligger i en public- eller assets-mapp och kopieras till byggutdata enligt konfigurationen i angular.json.
Snabbkontroll: Struktur
Identifiera startpunkten.
Sammanfattning: Struktur
Ni har utforskat workspacen: src/ för källkod, main.ts som startpunkt, index.html som värdsida, app/ för komponenter och konfiguration samt angular.json för CLI-konfiguration. Nästa steg: generera kod med CLI:t.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 38
- Lektioner
- 144
Vanliga frågor
Är lektionen ”Förklaring av projektstrukturen” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Förklaring av projektstrukturen”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Förklaring av projektstrukturen”?
Gå igenom filerna som CLI genererar. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Angular Academy?
Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Förklaring av projektstrukturen”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Angular Academy-lektionen?
Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Generera ett nytt projekt
- Förklaring av projektstrukturen
- Generera kod med ng generate
- Bygga och köra