Angular alapok

Az angular alapjaival kerülünk képbe ebben a leírásban.
Angularban componensek az alap építő elemek. Pl egy komponens lehet a login ablak, a felhasználói lista stb.

Az  app mappába a következő mappaszerkezetet követhetjük:
- components
- models // adatbázis modell
- services // minden lekérdezező, módosító és egyéb üzleti logika

Ha nagy projektről beszélünk érdemes lehet modulokra bontani.

Angular komponens generálás: 
# ng g component Test

Ilyenkor létrehoz egy Test nevű componens ami a következő fájlokból áll:
- test.component.ts //
- test.component.spec.ts  // teszthez használható
- test.component.html // magát a html kódot ide írjuk, a html kódba az angular speciális tag-jeit használhatjuk
- test.component.css // css formázás

Ami érdekesség egy php-s projekthez képest, ha a view-n található model-ben(objektumban/változóban) valami megváltozik, az a componensben is "látszódni" fog. Nem kell az objektumokat/változókat átadni, ami egyszerűsíti a fejlesztést.

Egy komponens példa: 
import {UsersService} from '../../../services/users.service'; // beimportálhatunk más serviceket, componenseket stb.

@Component({
    selector: 'app-test', // componens selectorja amivel elérhetjük
    templateUrl: './test.component.html', // html fájl útvonala
    styleUrls: ['./test.component.css'] // css fájl útvonala
})
export class TestComponent implements OnInit {

    valtozo1: boolean; // változók, objektumok deklarálása
    valtozo2: string;

    constructor() {
       
       valtozo2 = 'teszt szöveg';
    }

    ngOnInit() {
         // a constuctor után fut le
    }

    testFunction(){
        // valami funkció
    }

    ngOnDestroy(){
        // amikor megszűnik a componens akkor fut le
    }

View példa:
A függvények kerek zárójelben vannak(click), a tulajdonságok szögletes zárójelben[required], a modell-ek pedig szögletes zárójelben levő kerekzárójelben[(ngModel)]. A vezérő szerkezetek pedig csillaggal kezdődnek(*ngIf). Kiíratni egy változó tartalmát pedig dupla kapcsoszárójelben tudjuk megtenni.  {{ valtozo2 }} 
<div *ngIf="valtozo1" (click)=testFunction()>{{ valtozo2 }}</div>

<input type="text" [(ngModel)]="valtozo2" [required]="true" />
Model példa: 
export Class User {
    id: number;
    username: string;
    email: string;
}

Service-ek generálása: 
# ng g service test
A service-ekben @Injectable() jelzéssel jelöljük, hogy injektálható más komponensekben.

Az app.component.ts a default komponensünk. Alapból 'app-root' néven tudunk rá hivatkozni. Az gyökérmappában az index.html-ben az angularos alkalmazás default komponensét így "include"-oljuk be: 
<app-root></app-root>

Az app.component.html fájlban pedig a router komponensünket definiáljuk így: 
 <router-outlet></router-outlet>

Routolásról a következő fejezetben lesz szó.

Ami még kimaradt az app.module.ts amiben a modulokat és komponenseket deklaráljuk az alkalmazásba.
Bekell importálnunk a használt modulokat komponenseket.
Az @NgModule részben deklarálni is kell a komponensneket amiket írtunk, az imports részben pedig az npm-el telepített modulokat/komponenseket "include"-oljuk.
A providers szekcióban pedig a szervice-jeinket "include"-oljuk.
Példa: 
import {BrowserModule} from '@angular/platform-browser';
import {NgModule, APP_INITIALIZER} from '@angular/core';
import {AppRoutingModule, appRoutes} from './app-routing.module';
import {AppComponent} from './app.component';
import {HttpClientModule, HTTP_INTERCEPTORS} from "@angular/common/http";
...

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent,
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
       ...
        RouterModule.forRoot(appRoutes)
    ],
    providers: [MessageService, AuthGuard,
        {
            provide: HTTP_INTERCEPTORS,
            useClass: AuthInterceptor,
            multi: true
        },

        UsersService
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Olvasnivaló:
https://angular.io/guide/quickstart
https://angular.io/cli
https://www.youtube.com/watch?v=sld7yLRgsSQ&list=PLPG6oUBPAf3MRS213yRgvwjdlTIQ_msV_
2018.10.10.