Uruchomienie projektu Angular

Home
C_Apps
D_Apps
M_Apps
W_Apps
D_Base
IT

I. Tworzenie projektu Angular z modułami dla Visual Studio Code i konsoli

1. Instalacja Angular CLI

Jeśli nie masz jeszcze zainstalowanego Angular CLI, wykonaj następujące polecenie w terminalu:

npm install -g @angular/cli

Sprawdź poprawność instalacji:

ng version

2. Tworzenie nowego projektu Angular

Aby utworzyć nowy projekt, użyj polecenia:

ng new MojaApp --routing --style=scss --no-standalone

Wyjaśnienie parametrów:

  • --routing – generuje plik app-routing.module.ts dla zarządzania trasami.
  • --style=scss – ustawia domyślnie SCSS jako preprocesor CSS.
  • --no-standalone – Tworzy projekt, który używa tradycyjnych modułów Angulara.
     (tworzy projekt w starszym podejściu opartym na modułach, zamiast nowego modelu Standalone Components, który został wprowadzony w Angular 14).

Przejdź do katalogu projektu:

cd MojaAplikacja

Uruchom aplikację:

ng serve --open

3. Tworzenie nowego modułu w Angular

Aby dodać nowy moduł, np. dla zarządzania użytkownikami, wpisz:

ng generate module users --routing

To utworzy katalog users/ wraz z plikami:

  • users.module.ts – moduł użytkowników.
  • users-routing.module.ts – konfiguracja tras użytkowników.

4. Tworzenie komponentu w module

Teraz dodajmy komponent w nowym module:

ng generate component users/user-list

To utworzy pliki:

  • users/user-list/user-list.component.ts
  • users/user-list/user-list.component.html
  • users/user-list/user-list.component.scss

5. Rejestracja modułu w aplikacji

Aby moduł działał, należy go dodać do app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UsersModule } from './users/users.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    UsersModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

6. Definiowanie tras w nowym module

Otwórz users-routing.module.ts i dodaj trasę do UserListComponent:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserListComponent } from './user-list/user-list.component';

const routes: Routes = [
  { path: '', component: UserListComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UsersRoutingModule {}

Dzięki temu moduł będzie obsługiwał ścieżkę /users w aplikacji.

7. Ładowanie modułu dynamicznie (lazy loading)

Zamiast importować moduł ręcznie w app.module.ts, możemy dodać go do tras w app-routing.module.ts:

const routes: Routes = [
  { path: 'users', loadChildren: () => import('./users/users.module').then(m => m.UsersModule) }
];

Dzięki temu moduł zostanie załadowany dopiero wtedy, gdy użytkownik odwiedzi /users, co przyspieszy wczytywanie aplikacji.

8. Wyświetlanie listy użytkowników w komponencie

Edytuj user-list.component.ts, aby dodać listę użytkowników:

import { Component } from '@angular/core';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html'
})
export class UserListComponent {
  users = ['Jan Kowalski', 'Anna Nowak', 'Piotr Wiśniewski'];
}

Edytuj user-list.component.html:

<h2>Lista użytkowników</h2>
<ul>
  <li *ngFor="let user of users">{{ user }}</li>
</ul>

9. Uruchomienie aplikacji

Teraz uruchom aplikację i przejdź do http://localhost:4200/users, aby zobaczyć listę użytkowników.

ng serve

Podsumowanie

Tworzenie projektu Angular z modułami składa się z kilku etapów:

  1. Instalacja Angular CLI.
  2. Tworzenie projektu z routingiem i SCSS.
  3. Dodanie nowego modułu.
  4. Tworzenie komponentu w module.
  5. Rejestracja modułu w aplikacji.
  6. Definiowanie tras w module.
  7. Implementacja dynamicznego ładowania modułu.
  8. Tworzenie logiki wyświetlania danych.
  9. Uruchomienie aplikacji.

Dzięki takiej strukturze aplikacja Angular jest skalowalna i modułowa, co ułatwia jej rozwój i utrzymanie.

Tworzenie projektu Angular z modułami w Visual Studio 2022 Community


1. Instalacja Angular CLI
Jeśli Angular CLI nie jest zainstalowany, otwórz **Terminal PowerShell** w Visual Studio 2022 i wykonaj:
npm install -g @angular/cli

Sprawdź poprawność instalacji:
ng version

2. Tworzenie nowego projektu Angular w Visual Studio 2022
2.1. Otwórz **Visual Studio 2022 Community**.
2.2. Kliknij **Plik → Nowy → Projekt**.
2.3 Wyszukaj szablon **ASP.NET Core with Angular** i wybierz go.
2.4 W oknie konfiguracji:
   – Nazwa projektu: **MojaApp**
   – Lokalizacja: Wybierz folder.
   – Autoryzacja: **None**
2.5. Kliknij **Utwórz**.

Po utworzeniu projektu:
– Visual Studio automatycznie doda Angulara w katalogu `ClientApp/`.*
– Przejdź do katalogu **ClientApp**, aby pracować nad Angular CLI:
cd ClientApp

3. Uruchomienie aplikacji Angular w Visual Studio 2022
W Visual Studio:
3.1. Otwórz **Menedżer pakietów NuGet** i zainstaluj zależności .NET.
3.2. W **Eksploratorze rozwiązań** przejdź do **ClientApp**.
3.3. Otwórz **Terminal** w Visual Studio i uruchom Angulara:
ng serve

4. W przeglądarce wejdź na: 
   **http://localhost:4200**

Aby uruchomić pełny backend i frontend:
– Kliknij „Uruchom” w Visual Studio (spowoduje uruchomienie backendu i Angulara jednocześnie).

4. Tworzenie modułu w Angular w Visual Studio
1. W **Eksploratorze rozwiązań** wejdź do **ClientApp/src/app**.
2. Otwórz **Terminal** w Visual Studio i wpisz:
ng generate module users –routing

To utworzy katalog users/ z plikami:
– users.module.ts – Moduł użytkowników.
– users-routing.module.ts – Konfiguracja tras użytkowników.

5. Tworzenie komponentu w module
Wpisz w terminalu:
ng generate component users/user-list

To utworzy pliki:
ClientApp/src/app/users/user-list/user-list.component.ts
ClientApp/src/app/users/user-list/user-list.component.html
ClientApp/src/app/users/user-list/user-list.component.scss

6. Rejestracja modułu w aplikacji
Dodaj moduł UsersModule do `app.module.ts`:

typescript
import { NgModule } from '@angular/core’;
import { BrowserModule } from '@angular/platform-browser’;
import { AppRoutingModule } from ’./app-routing.module’;
import { AppComponent } from ’./app.component’;
import { UsersModule } from ’./users/users.module’;
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    UsersModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

7. Definiowanie tras w nowym module
Otwórz **users-routing.module.ts** i dodaj trasę:

typescript
import { NgModule } from '@angular/core’;
import { RouterModule, Routes } from '@angular/router’;
import { UserListComponent } from ’./user-list/user-list.component’;

const routes: Routes = [
  { path: ”, component: UserListComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UsersRoutingModule {}


8. Lazy Loading w Visual Studio 2022
Aby moduł był ładowany dynamicznie, otwórz `app-routing.module.ts` i dodaj:

typescript
const routes: Routes = [
  { path: 'users’, loadChildren: () => import(’./users/users.module’).then(m => m.UsersModule) }
];

Dzięki temu Angular załaduje moduł **dopiero, gdy użytkownik odwiedzi `/users`**, co przyspiesza działanie aplikacji.

9. Wyświetlanie listy użytkowników
Otwórz **user-list.component.ts** i dodaj przykładową listę użytkowników:

typescript
import { Component } from '@angular/core’;

@Component({
  selector: 'app-user-list’,
  templateUrl: ’./user-list.component.html’
})
export class UserListComponent {
  users = [’Jan Kowalski’, 'Anna Nowak’, 'Piotr Wiśniewski’];
}


Otwórz **user-list.component.html**:

html
<h2>Lista użytkowników</h2>
<ul>
  <li *ngFor=”let user of users”>{{ user }}</li>
</ul>


10. Uruchomienie aplikacji Angular w Visual Studio 2022
Uruchom projekt w Visual Studio:
– Kliknij **Uruchom (F5)**, aby uruchomić backend.
– W **Eksploratorze rozwiązań** przejdź do **ClientApp**, otwórz terminal i uruchom Angulara:
ng serve

Przejdź do:
– **http://localhost:4200/users** – Lista użytkowników