angular

Täydellinen käyttöönottoopas angular -kehykselle NStrimissä

Yleiskatsaus

Angular on Googlen kehittämä TypeScript-pohjainen verkkosovelluskehys. Se tarjoaa kattavan ratkaisun dynaamisten yksisivuisten sovellusten rakentamiseen komponenttipohjaisella arkkitehtuurilla.

Ennen aloittamista
Varmista, että kojelautasi on auki - tarvitset siellä näkyvät Git-tunnukset. Tämä malli sisältää Tailwind CSS:n tyylittelyyn.

Pikaopas

1

Luo repositorio mallista

Siirry kojelaudallasi Tools & Deployment -välilehteen. Napsauta "New Repository" -painiketta, valitse Angular-malli pudotusvalikosta, anna arkiston nimi ja alidomain ja napsauta "Create Repository".

2

Kloonaa repositorio

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

Asenna riippuvuudet

npm install
4

Käynnistä kehityspalvelin

npm start

Avaa http://localhost:4200 selaimessasi.

5

Rakenna ja lähetä

npm run build
git add .
git commit -m "Initial setup"
git push origin main
Jokainen Git-lähetys käyttöönottaa sovelluksesi automaattisesti. Tarkista moduulin työ-URL kojelaudalta nähdäksesi live-sivustosi.

Paikallinen kehitys Dockerilla

Jos sinulla ei ole Node.js:ää asennettuna paikallisesti, voit käyttää Dockeria Angular-komentojen suorittamiseen. Projekti sisältää Dockerfilen tuotantorakennuksia varten.

Mikä on Docker?
Docker luo eristettyjä "kontteja", joissa on kaikki tarvitsemasi ohjelmistot (Node.js, npm) asentamatta niitä tietokoneellesi. Ajattele sitä kevyenä virtuaalikoneena.

Vaatimukset

Asenna Docker Desktop käyttöjärjestelmällesi (Windows, Mac tai Linux).

Komentojen suorittaminen Dockerilla

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

# Suorita kehityspalvelin (käytettävissä osoitteessa localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm start

# Rakenna tuotantoa varten
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm run build
Huomio
Docker on valinnainen paikalliseen kehitykseen. NStrim-alusta hoitaa käyttöönoton automaattisesti - tarvitset Dockeria vain, jos haluat suorittaa komentoja paikallisesti ilman Node.js:n asennusta.

Projektin rakenne

Tiedostojen sijainnit:

├── src/
│   ├── app/
│   │   ├── app.component.ts      # Juurikomponentti
│   │   ├── app.component.html    # Juurimalli
│   │   ├── app.component.css     # Komponentin tyylit
│   │   ├── app.config.ts         # Sovelluksen konfiguraatio
│   │   └── app.routes.ts         # Reitityksen konfiguraatio
│   ├── index.html                # Pää-HTML-tiedosto
│   ├── main.ts                   # Sovelluksen aloituspiste
│   └── styles.css                # Globaalit tyylit (Tailwind)
├── public/                       # Staattiset resurssit
├── angular.json                  # Angular CLI -konfiguraatio
├── package.json                  # Riippuvuudet ja skriptit
├── tailwind.config.js            # Tailwind CSS -konfiguraatio
├── tsconfig.json                 # TypeScript-konfiguraatio
└── Dockerfile                    # Docker-rakennuskonfiguraatio

Yleiset tehtävät

Uuden komponentin luominen

ng generate component components/my-component

Uuden palvelun luominen

ng generate service services/my-service

Reitin lisääminen

Muokkaa tiedostoa 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:n käyttö

Tailwind on esikonfiguroitu. Käytä luokkia suoraan malleissasi:

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

Hyödyllisiä komentoja

npm start Käynnistä kehityspalvelin (portti 4200)
npm run build Rakenna tuotantoa varten
npm test Suorita yksikkötestit
ng generate component Luo uusi komponentti
ng generate service Luo uusi palvelu
ng generate --help Listaa kaikki käytettävissä olevat generaattorit

Vianmääritys

npm install epäonnistuu käyttöoikeusvirheillä

Syy: Käyttöoikeusongelmat npm-välimuistin tai node_modules-kansion kanssa.

Ratkaisu: Poista node_modules-kansio ja package-lock.json, suorita sitten npm install uudelleen.

Portti 4200 on jo käytössä

Syy: Toinen prosessi käyttää porttia 4200.

Ratkaisu: Käytä eri porttia: ng serve --port 4201 tai pysäytä toinen prosessi.

Moduulia ei löydy -virheet

Syy: Riippuvuuksia ei ole asennettu tai ne ovat vioittuneet.

Ratkaisu: Suorita npm install asentaaksesi kaikki riippuvuudet.

Muutokset eivät näy selaimessa

Syy: Selaimen välimuisti tai live-lataus ei toimi.

Ratkaisu: Pakota päivitys (Ctrl+Shift+R tai Cmd+Shift+R) tai käynnistä kehityspalvelin uudelleen.

Rakennus epäonnistuu käyttöönoton jälkeen

Syy: Rakennusvirheitä tai puuttuvia riippuvuuksia.

Ratkaisu: Suorita npm run build ensin paikallisesti tarkistaaksesi virheet ennen lähettämistä.

Käyttöönoton työnkulku

Joka kerta kun lähetät koodia Gitiin, sovelluksesi rakennetaan ja otetaan käyttöön automaattisesti:

Koodimuutos git push npm run build Käyttöönotto nginxiin Tuotannossa!

Käyttöönotetun sovelluksesi URL noudattaa tätä muotoa: 

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

Esimerkki: https://student01-module-a.demo.nstrim.app

Lisätietoja löydät virallisesta Angular-dokumentaatiosta.