Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:angular:angular_kezdes [2025/03/02 14:43] – [Új projekt] admin
+++ oktatas:web:angular:angular_kezdes [2025/03/02 14:49] (aktuális) – [Futtatás] admin
@@ Sor 57: / Sor 57: @@
   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:
+<code>
+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
+</code>
+  * 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:
+<code javascript src/app/app.routes.ts>
+import { Routes } from '@angular/router';
+export const routes: Routes = [];
+</code>
+==== 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.
+<code javascript 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';
+}
+</code>
+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.
+<code javascript 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');
+  });
+});
+</code>
+==== 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.
+<code javascript 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)]
+};
+</code>
+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:
+<code javascript>
+//...
+import { HttpClientModule } from '@angular/common/http';
+//...
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes),
+    importProvidersFrom(HttpClientModule)
+  ]
+};
+</code>