Elhatároztad, hogy megtanulod a modern webfejlesztés egyik legnépszerűbb keretrendszerét? Kiváló döntés! Az Angular stabil, jól strukturált és minden eszközt megad a professzionális alkalmazások építéséhez. Ebben az útmutatóban lépésről lépésre végigvesszük, hogyan hozhatod létre az első projektedet.
1. Előfeltételek: Mi kell a gépedre?
Mielőtt belefognánk, két alapvető dologra lesz szükséged:
- Node.js: Ez a futtatókörnyezet. Javasoljuk az LTS (Long Term Support) verzió használatát.
- npm vagy yarn: A csomagkezelő, amivel a könyvtárakat telepítjük (a Node.js-sel együtt érkezik).
Ellenőrizd a verziókat a terminálban:
node -v npm -v
2. Az Angular CLI telepítése
Az Angular CLI (Command Line Interface) a legjobb barátod lesz. Ez az eszköz generálja a kódot, futtatja a fejlesztői szervert és építi fel a kész alkalmazást. Telepítsük globálisan:
npm install -g @angular/cli
3. A projekt létrehozása
Navigálj abba a mappába, ahol a projektjeidet tartod, majd add ki a következő parancsot:
ng new elso-projektem
A CLI fel fog tenni néhány kérdést:
- Which stylesheet format would you like to use? Válaszd a
CSS-t vagy azSCSS-t (ha szereted a változókat és a beágyazott stílusokat). - Do you want to enable Server-Side Rendering (SSR)? Kezdőként válaszd a
No-t, később bármikor hozzáadhatod.
4. A fejlesztői szerver indítása
Lépj be a mappába és indítsd el a szervert:
cd elso-projektem ng serve --open
Az --open kapcsoló automatikusan megnyitja a böngészőt a http://localhost:4200 címen.
5. Trükkök és Technikák a hatékony kezdéshez
A Standalone komponensek ereje:
A modern Angularban (v17+) már nincsenek kötelezően NgModules fájlok. Minden komponens standalone, ami tisztább és érthetőbb kódot eredményez. Komponens generálása:
ng generate component components/my-header
Szigorú típusosság:
Ne kapcsold ki a TypeScript strict módját! Bár eleinte nehezebbnek tűnhet, rengeteg hibától ment meg a fejlesztés során.
Vizuális segítség:
Használd a VS Code szerkesztőt és telepítsd az Angular Language Service kiegészítőt. Ez intelligens kódkiegészítést ad a HTML sablonokban is.
6. Összegzés
Az Angular egy komplex, de rendkívül logikus rendszer. Ne ijedj meg a sok fájltól a generált projektben – a legtöbbhöz eleinte nem is kell nyúlnod. A legfontosabb kódjaid az src/app mappában lesznek.
Sok sikert az első Angular alkalmazásodhoz! 🚀