Tartalomjegyzék
Angular kezdés
- Szerző: Sallai András
- Copyright © 2021, Sallai András
- Szerkesztve: 2021, 2022, 2023, 2024, 2025
- Licenc: CC BY-SA 4.0
- Web: https://szit.hu
Új projekt
Új projekt készítése:
ng new projekt01
A program két kérdést tesz fel:
- Milyen nyelven írunk stílust.
- Szeretnénk-e szerveroldali renderelést.
Kezdésként csak nyomjunk mindkettőre „Enter” billentyűt.
Ehhez hasonlót kell lássunk:
ng new hello ? Would you like to add Angular routing? (y/N) ? Which stylesheet format would you like to use? (Use arrow keys) ❯ CSS SCSS [ https://sass-lang.com/documentation/syntax#scss ] Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] Less [ http://lesscss.org
CREATE hello/README.md (1063 bytes) CREATE hello/.editorconfig (274 bytes) CREATE hello/.gitignore (604 bytes) CREATE hello/angular.json (3033 bytes) CREATE hello/package.json (1067 bytes) ...
Ha a projekt elkészült:
Successfully initialized git.
Ha létrejött a projekt, lépjünk be a projekt könyvtárába:
cd projekt01
Futtatás
A fejlesztői szerver indítása:
ng serve --open
Rövidítés:
ng s -o
Az alkalmazás a következő útvonalon lesz elérhető:
Struktúra
A struktúra nem teljes:
app01/ |-node_modules/ |-public/ `-src/ |-app/ | |-app.components.css | |-app.component.html | |-app.component.spec.ts | |-app.components.ts | |-app.config.ts | |-app.routes.ts | `-assets/ |-index.html |-main.ts `-style.css
- app.components.css - Az alkalmazás CSS beállításai
- app.components.html - Az alkalmazás fő nézet oldala
- app.component.spec.ts - Script a teszteléshez
- app.components.ts - Fő script komponens
- app.config.ts - Beállítások
- app.routes.ts - Az útválasztási bejegyzések
- index.html - Az alkalmazás induló HTML állománya
- main.ts - Az alkalmazás belépési pontja
- style.css - Globális stílusbeállítások
Állományok
app-routes.ts
A projekt routing helye:
- src/app/app.routes.ts
import { Routes } from '@angular/router'; export const routes: Routes = [];
app.component állományok
Az app.component állományok az alkalmazás fő komponensének állományai. Ebből üres az app.component.css.
A komponens nézet része .html kiterjesztésű fájl. Ennek tartalma látszik alapértelmezett weblapként. Tartalma törölhető és újraírandó.
Ebben a fájlban nem szükséges fej és lábrészt írni a HTML oldal számára, mert az az index.html fájlban van megadva.
- src/app/app.component.ts
import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, RouterOutlet], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'projekt01'; }
Az src/app/app.component.ts fájl az AppComponent osztálynak ad otthont. Egyetlen adattagja van title. Az állomány elején importáljuk a Component dekorátort, amit az osztály előtt használunk.
A Component dekorátorral mondjuk meg, hogy az AppComponent milyen szelektorral hivatkozható. A templateUrl megmondja, hogy a HTML sablon állomány neve app.component.html, a styleUrls, pedig tömb formájában tartalmazhat több stílusfájlt is.
A src/app/app.component.spec.ts állomány a komponenshez tartozó automatikusan generált teszteket tartalmazza.
- src/app/app.component.spec.ts
import { TestBed } from '@angular/core/testing'; import { AppComponent } from './app.component'; describe('AppComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [AppComponent], }).compileComponents(); }); it('should create the app', () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.componentInstance; expect(app).toBeTruthy(); }); it(`should have the 'projekt01' title`, () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.componentInstance; expect(app.title).toEqual('projekt01'); }); it('should render title', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.nativeElement as HTMLElement; expect(compiled.querySelector('h1')?.textContent).toContain('Hello, projekt01'); }); });
app.config.ts
A 17-s verzióban átnevezték az app.module.ts fájl app.config.ts névre, és a tartalma is változott.
Az src/app/app.config.ts állományban regisztráljuk az angular saját moduljait használat előtt.
- src/app/app.config.ts
import { ApplicationConfig } from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; export const appConfig: ApplicationConfig = { providers: [provideRouter(routes)] };
Alapértelmezetten be van jegyezve a routes modul. Ha újabb modulokat szeretnénk felvenni, azt itt tehetjük meg. Például a HttpClientModule bejgyzése:
//... import { HttpClientModule } from '@angular/common/http'; //... export const appConfig: ApplicationConfig = { providers: [ provideRouter(routes), importProvidersFrom(HttpClientModule) ] };