AngularJS, Angular (2+), és Angular CLI

 1. AngularJS (1.x verziók)

• Megjelenés: 2010-ben.
• Nyelv: JavaScript alapú.
• Felépítés: Model-View-Controller (MVC) minta szerint szerveződik.
• Fő jellemzők:
• Kétirányú adat-kötés (two-way data binding), ami automatikusan szinkronizálja az adatokat a modell és a nézet között.
• Direktívák: Egyedi HTML attribútumokat használ, mint pl. ng-model, ng-repeat.
• SPA (Single Page Application) támogatás.

Példa:

<div ng-app="" ng-controller="myCtrl">

  <input ng-model="name">

  <p>Hello, {{name}}!</p>

</div>

 

<script>

function myCtrl($scope) {

  $scope.name = "AngularJS";

}

</script>

Fontos tudni:

• Az AngularJS már nem támogatott (2021-ben ért véget a hivatalos támogatás).
• Elsősorban régi rendszerek karbantartásakor használják.

2. Angular (2+ verziók)

• Megjelenés: 2016-ban jelent meg az Angular 2, ami teljes újraírás volt az AngularJS-hez képest.
• Nyelv: TypeScript alapú (JavaScript superset, erős típusossággal).
• Felépítés: Komponens-alapú architektúra, ami sokkal modulárisabb és skálázhatóbb.
• Verziók: Angular 2 után gyorsan jöttek a verziók (Angular 4, 5, 6...), de ezek nem teljes újraírások, csak továbbfejlesztések.

Fő jellemzők:

• Komponens-alapú felépítés: Minden felhasználói felület részt komponensek alkotnak.
• TypeScript és Decorátorok: Pl. @Component, @NgModule deklarációk.
• Szervizek (Services) és Dependency Injection: Könnyű újrafelhasználhatóság és tesztelhetőség.
• Moduláris felépítés: Az alkalmazás modulokra (feature modules) bontható, ami átláthatóbb és skálázhatóbb kódot eredményez.

Példa:

import { Component } from '@angular/core';

 

@Component({

  selector: 'app-root',

  template: `<h1>Hello {{name}}!</h1>`

})

export class AppComponent {

  name = 'Angular 2+';

}

Fontos tudni:

• A modern Angular verziók (pl. Angular 12, 13, stb.) mind az Angular 2 újabb változatai.
• Sokkal strukturáltabb, mint az AngularJS, és TypeScript miatt erősebb típusosságot és hibakezelést biztosít.

3. Angular CLI (Command Line Interface)

• Mi ez? Egy parancssori eszköz, amely megkönnyíti és automatizálja az Angular (2+) alkalmazások létrehozását és kezelését.
• Kapcsolata az Angular-ral: Az Angular CLI nem maga a keretrendszer, hanem egy eszköztár, ami segít a fejlesztésben.

Fő funkciók:

1. Projekt létrehozása:

2.  ng new my-angular-app

Ez automatikusan létrehozza a teljes projektstruktúrát és a szükséges fájlokat.

3. Komponensek és szolgáltatások generálása:

4.  ng generate component my-component

5.  ng generate service my-service

6. Fejlesztői szerver futtatása:

7.  ng serve

Ez elindítja a helyi szervert (http://localhost:4200), ahol fejlesztés közben azonnal látod a változtatásokat.

8. Buildelés és tesztelés:

9.  ng build

10.ng test

Fontos tudni:

• Az Angular CLI csak az Angular 2+ verziókhoz használható.
• Megkönnyíti az Angular projektek kezelését, gyorsítja a fejlesztési folyamatot.

Összefoglalva a különbségek:

Név	Leírás	Nyelv	Használat
AngularJS	Az eredeti Angular (1.x), JavaScript alapú keretrendszer.	JavaScript	Régi projektek, MVC minta, kétirányú adat-kötés.
Angular (2+)	Teljesen újraírt verzió, TypeScript alapú, komponens-alapú.	TypeScript	Modern SPA alkalmazások, moduláris architektúra.
Angular CLI	Parancssori eszköz Angular 2+ projektek létrehozására és kezelésére.	N/A (eszköz)	Projektgenerálás, buildelés, fejlesztés automatizálása.

1. Kezdünk az AngularJS-sel láthatjátok pl. MVC mintát, a kétirányú adat-kötéseket.
2. Az Angular 2+ verziókhoz először TypeScript ismeretre lesz szükség.
3. Az Angular CLI-t és Angular 2+-t a fejlesztők mindennapi eszköze.