angular

Teljes telepítési útmutató a(z) angular keretrendszerhez az NStrim platformon

Áttekintés

Az Angular egy TypeScript-alapú webalkalmazás-keretrendszer, amelyet a Google fejleszt. Átfogó megoldást nyújt dinamikus egyoldalas alkalmazások építéséhez komponens-alapú architektúrával.

Mielőtt elkezdené
Győződjön meg róla, hogy nyitva van az irányítópultja - szüksége lesz az ott megjelenített Git hitelesítő adatokra. Ez a sablon tartalmazza a Tailwind CSS-t a stílusozáshoz.

Gyors kezdés

1

Repository létrehozása sablonból

A vezérlőpultodon menj a Tools & Deployment fülre. Kattints a "New Repository" gombra, válaszd ki az Angular sablont a legördülő menüből, add meg a repository nevét és az aldomaint, majd kattints a "Create Repository" gombra.

2

Repository klónozása

git clone https://<git-server>/<username>/<repo-name>.git
cd <repo-name>
3

Függőségek telepítése

npm install
4

Fejlesztői szerver indítása

npm start

Nyissa meg a http://localhost:4200 címet a böngészőben.

5

Építés és feltöltés

npm run build
git add .
git commit -m "Initial setup"
git push origin main
Minden Git push automatikusan telepíti az alkalmazást. Ellenőrizze a Modul Munka URL-t az irányítópulton az éles oldal megtekintéséhez.

Helyi fejlesztés Dockerrel

Ha nincs helyileg telepítve a Node.js, használhatja a Dockert Angular parancsok futtatásához. A projekt tartalmaz egy Dockerfile-t a production buildekhez.

Mi az a Docker?
A Docker izolált "konténereket" hoz létre az összes szükséges szoftverrel (Node.js, npm) anélkül, hogy telepítené őket a számítógépére. Gondoljon rá úgy, mint egy könnyű virtuális gépre.

Előfeltételek

Telepítse a Docker Desktop-ot az operációs rendszeréhez (Windows, Mac vagy Linux).

Parancsok futtatása Dockerrel

# Run npm install
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm install

# Run development server (accessible at localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm start

# Build for production
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm run build
Megjegyzés
A Docker opcionális a helyi fejlesztéshez. Az NStrim platform automatikusan kezeli a telepítést - csak akkor van szüksége Dockerre, ha helyileg szeretne parancsokat futtatni Node.js telepítése nélkül.

Projekt struktúra

A fájlok elhelyezkedésének megértése:

├── src/
│   ├── app/
│   │   ├── app.component.ts      # Root component
│   │   ├── app.component.html    # Root template
│   │   ├── app.component.css     # Component styles
│   │   ├── app.config.ts         # App configuration
│   │   └── app.routes.ts         # Routing configuration
│   ├── index.html                # Main HTML file
│   ├── main.ts                   # Application entry point
│   └── styles.css                # Global styles (Tailwind)
├── public/                       # Static assets
├── angular.json                  # Angular CLI configuration
├── package.json                  # Dependencies and scripts
├── tailwind.config.js            # Tailwind CSS configuration
├── tsconfig.json                 # TypeScript configuration
└── Dockerfile                    # Docker build configuration

Gyakori feladatok

Új komponens létrehozása

ng generate component components/my-component

Új szolgáltatás létrehozása

ng generate service services/my-service

Útvonal hozzáadása

Szerkessze a src/app/app.routes.ts fájlt:

import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

Tailwind CSS használata

A Tailwind előre konfigurálva van. Használja az osztályokat közvetlenül a sablonokban:

<div class="bg-blue-500 text-white p-4 rounded-lg">
  Hello Tailwind!
</div>

Hasznos parancsok

npm start Fejlesztői szerver indítása (4200-as port)
npm run build Építés production-re
npm test Unit tesztek futtatása
ng generate component Új komponens létrehozása
ng generate service Új szolgáltatás létrehozása
ng generate --help Összes elérhető generátor listázása

Hibaelhárítás

npm install jogosultsági hibákkal meghiúsul

Ok: Jogosultsági problémák az npm cache-sel vagy a node_modules mappával.

Megoldás: Törölje a node_modules mappát és a package-lock.json fájlt, majd futtassa újra az npm install parancsot.

A 4200-as port már használatban van

Ok: Egy másik folyamat használja a 4200-as portot.

Megoldás: Használjon másik portot: ng serve --port 4201 vagy állítsa le a másik folyamatot.

Modul nem található hibák

Ok: A függőségek nincsenek telepítve vagy sérültek.

Megoldás: Futtassa az npm install parancsot az összes függőség telepítéséhez.

A változások nem jelennek meg a böngészőben

Ok: Böngésző gyorsítótár vagy az élő újratöltés nem működik.

Megoldás: Kényszerített frissítés (Ctrl+Shift+R vagy Cmd+Shift+R) vagy indítsa újra a fejlesztői szervert.

Az építés meghiúsul a telepítés után

Ok: Építési hibák vagy hiányzó függőségek.

Megoldás: Futtassa helyileg az npm run build parancsot a hibák ellenőrzéséhez a feltöltés előtt.

Telepítési munkafolyamat

Minden alkalommal, amikor kódot tölt fel a Git-re, az alkalmazás automatikusan épül és települ:

Kódváltozás git push npm run build Deploy to nginx Éles!

A telepített alkalmazás URL-je a következő formátumot követi: 

https://<your-subdomain>-<repo-name>.<session-domain>

Példa: https://student01-module-a.demo.nstrim.app

További információért látogasson el a hivatalos Angular Dokumentációra.