[[oktatas:web:angular|< Angular]]

====== Angular kezdés ======

  * **Szerző:** Sallai András
  * Copyright (c) 2021, Sallai András
  * Szerkesztve: 2021, 2022, 2023, 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu

===== Webhely =====

  * https://angular.dev/
  * https://angular.dev/update-guide
  * https://angular.dev/reference/releases

Angular 17 változások:
  * https://blog.angular.dev/introducing-angular-v17-4d7033312e4b
===== Telepítés =====

Szükség van egy telepített Node.js-re npm paranccsal együtt. Ha ez megvan, akkor telepíthetjük az Angular parancssori eszközt.

Rendszergazdaként:
  npm install -g @angular/cli@17.0.0

Telepítés után kapunk egy "ng" nevű parancsot. Ellenőrizzük a verziót.


Telepített angular/cli verziója:
  ng version
  ng v



==== Windowson ====

Útvonalba kell tenni:
  c:\Users\user\AppData\Romaing\npm


Az útvonalbeállítás Windowson részletesebben:
  * [[oktatas:operacios_rendszerek:windows:utvonalak|Útvonalak]]


Ellenőrzés:
  ng version

Windowson PowerShellben be kell még állítani:
  Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned


===== Adott verzió telepítése =====

  npm i -g @angular/cli@16.2.11

  npm i -g @angular/cli@16


===== Csomagkezelő beállítása =====

  ng config -g cli.packageManager pnpm

A következő helyen tárolódik:

  * Windows: %USERPROFILE%\angular-config.json
  * Linux: ~/.angular-config.json


A következőt kell találnunk:

<code javascript>
{
  "cli": {
    "packageManager": "pnpm"
  }
}
</code>

Ettől kezdve az ng parancs a pnpm csomagkezelőt használja.


===== Új projekt =====

Új projekt készítése:
  ng new projekt01

A program két kérdést tesz fel:
  * Szeretnénk-e routingot. 
  * Milyen nyelven írunk stílust.

Kezdésként csak nyomjunk mindkettőre "Enter" billentyűt.

Ehhez hasonlót kell lássunk:
<code>
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
</code>



<code>
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)
...
</code>


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


===== Kódszerkesztő =====

Ha beléptünk a projekt01 könyvtárba indítsunk kódszerkesztőt.

Visual Studio Code esetén:
  code .


===== Futtatás =====

  ng serve --open


Az <nowiki>--open</nowiki> helyett használható a <nowiki>-o</nowiki> is használható.

Az alkalmazás a következő útvonalon lesz elérhető:
  * http://localhost:4200/


<note important>

Az első indításnál ha PowerShell terminált használunk, szükség lehet a távoli aláírások engedélyezésére:
<code>
set-ExecutionPolicy RemoteSigned -Scope CurrentUser 
</code>

Ellenőrzés:
<code>
Get-ExecutionPolicy -list
</code>
</note>
===== Struktúra =====

A struktúra nem teljes:
<code>
app01/
  |-node_modules/
  `-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>



===== Visual Studio Code =====

==== Componizer bővítmény ====

  * Componizer

A Componizer számára meg van jelölve függőségként a @componizer/schematics Node.js csomag. Telepítése:

  npm install -D @componizer/schematics

A komponensek mozgatása ezek nélkül is lehetséges.

Webhely:
  * https://marketplace.visualstudio.com/items?itemName=bilelmsekni.componizer


==== Tesztelés ====

  * Karma test explorer for Angular, Jasmine, and Mocha

===== Online =====


JavaScript, Angular, stb:
  * https://plnkr.co/
  * https://stackblitz.com/