Angular

Täielik juurutusjuhend Angular jaoks NStrimis

Ülevaade

Angular on Google'i arendatud TypeScript-põhine veebirakenduste raamistik. See pakub terviklikku lahendust dünaamiliste ühe lehe rakenduste ehitamiseks komponendipõhise arhitektuuriga.

Enne alustamist
Veendu, et sinu töölaud on avatud - vajad seal kuvatavaid Giti sisselogimisandmeid. See mall sisaldab stiilimiseks Tailwind CSS-i.

Kiirjuhend

1

Loo repositoorium mallist

Mine oma töölaual vahekaardile Tools & Deployment. Klõpsa nuppu "New Repository", vali rippmenüüst Angular mall, sisesta repositooriumi nimi ja alamdomeen ning klõpsa "Create Repository".

2

Klooni oma repositoorium

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

Paigalda sõltuvused

npm install
4

Käivita arendusserver

npm start

Ava brauseris http://localhost:4200.

5

Ehita ja saada üles

npm run build
git add .
git commit -m "Initial setup"
git push origin main
Iga push Giti juurutab sinu rakenduse automaatselt. Kontrolli oma Mooduli töö-URL-i töölaual, et näha oma live-saiti.

Kohalik arendus Dockeriga

Kui sul ei ole Node.js-i kohalikult paigaldatud, saad Angulari käskude käivitamiseks kasutada Dockerit. Projekt sisaldab tootmise ehitamiseks Dockerfile'i.

Mis on Docker?
Docker loob isoleeritud "konteinerid" kogu vajaliku tarkvaraga (Node.js, npm), ilma et peaksid neid oma arvutisse paigaldama. Mõtle sellest kui kergekaalulisest virtuaalmasinast.

Eeldused

Paigalda Docker Desktop oma operatsioonisüsteemi jaoks (Windows, Mac või Linux).

Käskude käivitamine Dockeriga

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

# Käivita arendusserver (kättesaadav aadressil localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm start

# Ehita tootmise jaoks
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm run build
Märkus
Docker on kohalikuks arenduseks valikuline. NStrim-platvorm hoolitseb juurutamise eest automaatselt - Dockerit on vaja ainult siis, kui soovid käske käivitada kohalikult ilma paigaldatud Node.js-ita.

Projekti struktuur

Failide asukohtade mõistmine:

├── src/
│   ├── app/
│   │   ├── app.component.ts      # Juurkomponent
│   │   ├── app.component.html    # Juurmall
│   │   ├── app.component.css     # Komponendi stiilid
│   │   ├── app.config.ts         # Rakenduse seadistus
│   │   └── app.routes.ts         # Marsruutimise seadistus
│   ├── index.html                # Peamine HTML-fail
│   ├── main.ts                   # Rakenduse sisendpunkt
│   └── styles.css                # Globaalsed stiilid (Tailwind)
├── public/                       # Staatilised ressursid
├── angular.json                  # Angular CLI seadistus
├── package.json                  # Sõltuvused ja skriptid
├── tailwind.config.js            # Tailwind CSS seadistus
├── tsconfig.json                 # TypeScripti seadistus
└── Dockerfile                    # Dockeri ehitamise seadistus

Levinud ülesanded

Uue komponendi loomine

ng generate component components/my-component

Uue teenuse loomine

ng generate service services/my-service

Marsruudi lisamine

Muuda src/app/app.routes.ts:

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-i kasutamine

Tailwind on eelseadistatud. Kasuta klasse otse oma mallides:

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

Kasulikud käsud

npm start Käivita arendusserver (port 4200)
npm run build Ehita tootmise jaoks
npm test Käivita ühiktestid
ng generate component Loo uus komponent
ng generate service Loo uus teenus
ng generate --help Loetle kõik saadaolevad generaatorid

Tõrkeotsing

npm install ebaõnnestub õigustevigadega

Põhjus: Õiguste probleemid npm-i vahemälu või node_modulesiga.

Lahendus: Kustuta node_modules kaust ja package-lock.json, seejärel käivita npm install uuesti.

Port 4200 on juba kasutusel

Põhjus: Mõni teine protsess kasutab porti 4200.

Lahendus: Kasuta teist porti: ng serve --port 4201 või peata teine protsess.

Module not found vead

Põhjus: Sõltuvused pole paigaldatud või on rikutud.

Lahendus: Käivita npm install, et paigaldada kõik sõltuvused.

Muudatused ei kajastu brauseris

Põhjus: Brauseri vahemälu või live reload ei tööta.

Lahendus: Tee tugev värskendus (Ctrl+Shift+R või Cmd+Shift+R) või taaskäivita arendusserver.

Ehitamine ebaõnnestub pärast juurutamist

Põhjus: Ehitamise vead või puuduvad sõltuvused.

Lahendus: Käivita enne push'i kohalikult npm run build, et vigu kontrollida.

Juurutamise töövoog

Iga kord, kui saadad koodi Giti, ehitatakse ja juurutatakse sinu rakendus automaatselt:

Koodimuudatus git push npm run build Juuruta nginxi Live!

Sinu juurutatud rakenduse URL järgib seda formaati: 

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

Näide: https://student01-module-a.demo.nstrim.app

Lisainfo saamiseks külasta ametlikku Angulari dokumentatsiooni.