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:

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

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.

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: 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:

Zmiany w pliku app.module.ts będą już wymagane. Dokonaliśmy zmiany struktury folderów w projekcie oraz zmieniliśmy nazwę samego komponentu: 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:

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>

strong {
    color:red
}

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

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

W tej cześci wykorzystamy kolejne polecenie:

ng generate component nazwa_komponentu

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

cd app

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>

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: 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>.

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.