Reorganizacja projektu

Poprzedni artykuł miał na celu pokazanie sposobu w jaki ładuje się aplikacja Angular. Praca z pojedynczym komponentem możem być problematyczna – z uwagi na ilość połączonych plików. Wyobraźcie sobie zatem, że tworzymy dużą aplikację, która składa się z 20 niezależnych komponetów. W strukturze aplikacji panowałby chaos. Nie jestem fanem takiego podejścia bo wraz z dodawaniem kolejnych komponentów czas poświęcony na zarządzanie projektem wzrasta. To samo tyczy się do powrotu do aplikacji po dłuższym czasie – może pojawić się problem z odnalezieniem danego pliku.

Pierwszym rozwiązaniem może być użycie skrótu klawiszowego crtl + p i wyszukanie odpowiedniego pliku po jego nazwie: Visual Studio Code: Crtl + P

Drugi sposób to reorganizacja aplikacji w odpowiednią strukturę folderów - ten temat omówimy szczegółowo w tym wpisie.

Struktura folderów

W pierwszym kroku dodamy dwa nowe foldery, pierwszy z nich dla naszego komponentu (zmienimy również nazwy plików) a drugi dla komponentu, który dodamy w drugiej części wpisu. Reorganizacja struktury folderów w Angular 8

Dokonajmy teraz zmiany nazwy naszego komponentu tak, aby pasowała do utworzonego folderu. Zwróćcie uwagę na komunikat, który pojawi się w trakcie zmian nazw plików: Aktualizacja dyrektywy import Zgadzając się na zmiany zobaczymy odświeżony wpis w pliku welcome.component.spec.ts:

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
// Ścieżka dostępu została odświeżona
import { AppComponent } from './welcome.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'MyFirstApp'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('MyFirstApp');
  });

  it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('.content span').textContent).toContain('MyFirstApp app is running!');
  });
});


Aby ukończyć poprawnie cały proces sięgnijmy do poprzedniego wpisu, która podsumowuje kolejność ładowania plików w aplikacji Angular:
Przypomnienie całego wpisu: ng serve -> main.ts -> app.module.ts -> app.component.ts -> index.html-> app.component.html

Plik main.ts pozostaje bez zmian – odnosi się on do pliku app.module.ts znajdującego się poza naszym foldem i odnoszącym się do wszystkich komponentów w naszej aplikacji: Plik app.module.ts

Zmiany w pliku app.module.ts będą już wymagane. Dokonaliśmy zmiany struktury folderów w projekcie oraz zmieniliśmy nazwę samego komponentu: Angular 8: plik app.module.ts Możecie zobaczyć, że po powyżych zmianach widzimy komunikt błędu. Jak pamiętacie plik (użyjemy już nowego nazewnictwa) app.module.ts jest połączony z plikiem welcome.component.ts - dlatego możemy zobaczyć błąd. Drugi z plików nie posiada zaktualizowanej nazwy klasy. Poza wspomnianą modyfikacją musimy również zmienić ścieżki naszych szablonów HTML oraz kaskadowego arkusza stylów CSS. Po wprowadzeniu i zapisaniu zmian nie będziemy już obserwować błędów w pliku app.module.ts. Poniżej zrzut ekranu z pliku welcome.component.ts: Automatyczna aktualizacja pliku komponentu

Wprowadzimy jeszcze dwie drobne modyfikacje do wymienonych wyżej plików, żeby mieć pewność, że cały proces przebiegł pomyślnie.
Do pliku welcome.component.html dodajmy poniższy kod:

<h1>Witajcie z <strong>welcome.component</strong> po zmianach w strukturze folderu</h1>
Z kolei do welcome.component.css dodamy poniższy wpis:
strong {
    color:red
}

Możemy teraz wystartować aplikację i zobaczyć czy wszystko przebiegło pomyślnie: ng-serve

Cały proces chodź nieco skomplikowany doprowadził nas do pożądanego rezultatu.

ng generate

W tej cześci wykorzystamy kolejne polecenie:

ng generate component nazwa_komponentu
Pozwala na dodanie nowego komponentu do naszej aplikacji Angular. Domyślna lokalizacja to folder wraz z wymaganymi plikami w folderze app. My jednak musimy przenieść folder zgodnie z naszą strukturą i zmienić ścieżki dostępu, aby uniknąć błędów kompilacji. Spójrzcie na poniższy zrzut ekranu (polecenie + nowy komponent): Angular 8: tworzenie nowego komponentu

Zauważcie, że w terminalu przechodzę do folderu app wykorzystując polecenie:

cd app
W przeciwnym wypadku zostaje wygenerowany poniższy błąd: ng-generete - błąd tworzenia komponentu Błąd ten jednak pojawia się tylko w momencie zmiany domyślnej struktury aplikacji Angular. Jeżeli wygenerujecie domyślny projekt i zechcecie dodać nowy komponent – powyższy kominukat błędu nie powinen się pojawić.

Możemy teraz przenieść pliki utworzonego komponentu do naszego folderu, zaktualizować wpisy dotyczące ścieżek i dodać prosty kod HTML wyświetlający podstawowe informacje dotyczące kilku wybranych samochodów:

Tak utworzony szablony zostanie teraz wyświetlony jako część naszego poprzedniego widoku welcome.component.html:

<h1>Witajcie z <strong>welcome.component</strong> po zmianach w strukturze folderu</h1>
<br />

<app-cars></app-cars>
Aplikacja po uruchomieniu wygląda w następujący sposób: Angular 8: działająca aplikacja

Kluczowa jest tutaj odpowiednia konfiugracja komponentów używanych w aplikacji (w tym przypadku wykonana za nas). Musimy mieć jednak pełną świadomość jak takie projekt należy konfigurować. Przeanalizujcie poniższy plik: Dyrektywa NgModule Używany przez nas komponent CarsComponent został zarejestowany przy użyciu dyrektywy NgModule dzięki czemu na szablonie HTML rodzica możemy wykorzystać ten komponent w powyższy sposób: <app-cars></app-cars>.

Podsumowanie

W tym wpisie odeszliśmy od domyślnej aplikacji. Zmieniliśmy układ folderów, edytowaliśmy oraz dodawaliśmy komponenty, żeby dopasować aplikację do swoich potrzeb. Oczywiście jest to tylko przykład pokazujący możliwości ingerencji w domyślną aplikację. Po zakończeniu całego cyklu przygotuje wpis dotyczący najlepszych praktyk związanych z programowaniem w Angularze - narazie jest na to zdecydowanie za wcześniej, dopiero poznajemy framework.