< Angular

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ő:

http://localhost:4200/

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:

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.

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.

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.

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) ] };