angular

Pilna izvietošanas rokasgrāmata angular uz NStrim

Pārskats

Angular ir uz TypeScript balstīts tīmekļa lietojumprogrammu ietvars, ko izstrādājis Google. Tas nodrošina visaptverošu risinājumu dinamisku vienas lapas lietojumprogrammu izveidei ar komponentu balstītu arhitektūru.

Pirms sākat
Pārliecinieties, ka jūsu informācijas panelis ir atvērts - jums būs nepieciešami tur parādītie Git akreditācijas dati. Šī veidne ietver Tailwind CSS stilizēšanai.

Ātrais sākums

1

Izveidojiet repozitoriju no veidnes

Savā vadības panelī atveriet cilni Tools & Deployment. Noklikšķiniet uz pogas "New Repository", izvēlieties Angular veidni no nolaižamā saraksta, ievadiet repozitorija nosaukumu un apakšdomēnu, un noklikšķiniet "Create Repository".

2

Klonējiet savu repozitoriju

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

Instalējiet atkarības

npm install
4

Palaidiet izstrādes serveri

npm start

Atveriet http://localhost:4200 savā pārlūkprogrammā.

5

Būvējiet un augšupielādējiet

npm run build
git add .
git commit -m "Initial setup"
git push origin main
Katrs augšupielādes uz Git automātiski izvieto jūsu lietojumprogrammu. Pārbaudiet sava moduļa darba URL informācijas panelī, lai redzētu savu tiešsaistes vietni.

Lokālā izstrāde ar Docker

Ja jums nav lokāli instalēts Node.js, varat izmantot Docker, lai palaistu Angular komandas. Projektā ir iekļauts Dockerfile produkcijas būvējumiem.

Kas ir Docker?
Docker izveido izolētus "konteinerus" ar visu nepieciešamo programmatūru (Node.js, npm), neinstalējot to jūsu datorā. Iedomājieties to kā vieglu virtuālo mašīnu.

Priekšnoteikumi

Instalējiet Docker Desktop savai operētājsistēmai (Windows, Mac vai Linux).

Komandu palaišana ar Docker

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

# Palaist izstrādes serveri (pieejams localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm start

# Būvēt produkcijai
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm run build
Piezīme
Docker ir neobligāts lokālai izstrādei. NStrim platforma automātiski apstrādā izvietošanu - Docker ir nepieciešams tikai tad, ja vēlaties palaist komandas lokāli bez instalēta Node.js.

Projekta struktūra

Izpratne par failu izvietojumu:

├── src/
│   ├── app/
│   │   ├── app.component.ts      # Saknes komponents
│   │   ├── app.component.html    # Saknes veidne
│   │   ├── app.component.css     # Komponenta stili
│   │   ├── app.config.ts         # Lietotnes konfigurācija
│   │   └── app.routes.ts         # Maršrutēšanas konfigurācija
│   ├── index.html                # Galvenais HTML fails
│   ├── main.ts                   # Lietotnes ieejas punkts
│   └── styles.css                # Globālie stili (Tailwind)
├── public/                       # Statiskie resursi
├── angular.json                  # Angular CLI konfigurācija
├── package.json                  # Atkarības un skripti
├── tailwind.config.js            # Tailwind CSS konfigurācija
├── tsconfig.json                 # TypeScript konfigurācija
└── Dockerfile                    # Docker būvējuma konfigurācija

Bieži veicamie uzdevumi

Jaunas komponentes izveide

ng generate component components/my-component

Jauna servisa izveide

ng generate service services/my-service

Maršruta pievienošana

Rediģējiet 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 lietošana

Tailwind ir iepriekš konfigurēts. Izmantojiet klases tieši savās veidnēs:

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

Noderīgas komandas

npm start Palaist izstrādes serveri (ports 4200)
npm run build Būvēt produkcijai
npm test Palaist vienību testus
ng generate component Izveidot jaunu komponentu
ng generate service Izveidot jaunu servisu
ng generate --help Parādīt visus pieejamos ģeneratorus

Problēmu novēršana

npm install neizdodas ar atļauju kļūdām

Cēlonis: Atļauju problēmas ar npm kešatmiņu vai node_modules.

Risinājums: Izdzēsiet node_modules mapi un package-lock.json, pēc tam palaidiet npm install vēlreiz.

Ports 4200 jau tiek izmantots

Cēlonis: Cits process izmanto portu 4200.

Risinājums: Izmantojiet citu portu: ng serve --port 4201 vai apturiet otru procesu.

Modulis nav atrasts kļūdas

Cēlonis: Atkarības nav instalētas vai ir bojātas.

Risinājums: Palaidiet npm install, lai instalētu visas atkarības.

Izmaiņas neatspoguļojas pārlūkprogrammā

Cēlonis: Pārlūkprogrammas kešatmiņa vai tiešā pārlādēšana nedarbojas.

Risinājums: Piespiedu atsvaidzināšana (Ctrl+Shift+R vai Cmd+Shift+R) vai restartējiet izstrādes serveri.

Būvējums neizdodas pēc izvietošanas

Cēlonis: Būvējuma kļūdas vai trūkstošas atkarības.

Risinājums: Vispirms palaidiet npm run build lokāli, lai pārbaudītu kļūdas pirms augšupielādes.

Izvietošanas darbplūsma

Katru reizi, kad augšupielādējat kodu Git, jūsu lietojumprogramma tiek automātiski būvēta un izvietota:

Koda izmaiņas git push npm run build Izvietot uz nginx Tiešraidē!

Jūsu izvietotās lietojumprogrammas URL seko šim formātam: 

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

Piemērs: https://student01-module-a.demo.nstrim.app

Lai iegūtu vairāk informācijas, apmeklējiet oficiālo Angular dokumentāciju.