Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:angular:angular_kezdes

< 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

Ú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)
  ]
};
oktatas/web/angular/angular_kezdes.txt · Utolsó módosítás: 2025/03/02 14:49 szerkesztette: admin