0Pricing
Angular Academy · Lekcja

Tworzenie biblioteki za pomocą ng generate

Inicjalizować szkielet projektu biblioteki

Tworzenie biblioteki za pomocą ng generate to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Dlaczego warto utworzyć bibliotekę

Gdy kilka aplikacji potrzebuje tych samych komponentów, usług lub narzędzi, można zapakować je jako bibliotekę Angular. Biblioteka jest wielokrotnego użytku, wersjonowana i gotowa do publikacji, zamiast wymagać kopiowania kodu między projektami.

Obszary robocze przechowują biblioteki

Biblioteki znajdują się w obszarze roboczym Angulara: folderze zarządzanym przez jeden plik angular.json, który może zawierać wiele aplikacji i bibliotek. Bibliotekę można dodać do istniejącego obszaru roboczego lub utworzyć dla niej osobny obszar.

ng new my-workspace --create-application=false
# a workspace with no app, ready to hold libraries

Generowanie biblioteki

Schemat ng generate library (alias ng g lib) tworzy szkielet nowego projektu biblioteki w folderze projects/.

ng generate library ui-kit
# creates projects/ui-kit with a sample component, module, and public-api.ts

Co zostaje utworzone

Biblioteka zawiera własny folder src/lib, plik zbiorczy public-api.ts, plik ng-package.json (na potrzeby kompilacji) oraz wpis w angular.json. Jest samodzielnym projektem, który można zbudować.

projects/ui-kit/
  src/
    lib/        # your components & services
    public-api.ts
  ng-package.json
  package.json

Dodawanie komponentów do biblioteki

Aby wygenerować kod w bibliotece, wskaż ją za pomocą --project. CLI umieści pliki w odpowiednim folderze.

ng generate component button --project=ui-kit
ng generate service theme --project=ui-kit

Komponenty standalone w bibliotekach

Współczesne biblioteki preferują komponenty standalone, które odbiorcy importują bezpośrednio, bez NgModule. Oznacz komponent jako standalone: true, aby aplikacje mogły używać go za pomocą prostego importu.

@Component({
  selector: 'lib-button',
  standalone: true,
  template: '<button class="lib-btn"><ng-content></ng-content></button>',
})
export class ButtonComponent {}

Plik package.json biblioteki

Każda biblioteka ma własny plik package.json, który definiuje jej nazwę, wersję i zależności peer, takie jak @angular/core. Zależności peer oznaczają, że aplikacja korzystająca z biblioteki dostarcza Angulara, co zapobiega dołączaniu jego zduplikowanych kopii.

{
  "name": "ui-kit",
  "version": "0.0.1",
  "peerDependencies": { "@angular/core": "^18.0.0" }
}

Praca z lokalną aplikacją

W tym samym obszarze roboczym warto umieścić aplikację demonstracyjną, aby testować bibliotekę podczas jej tworzenia. Importowanie według nazwy biblioteki wskazuje lokalny kod źródłowy dzięki mapowaniom ścieżek TypeScript w pliku tsconfig.

Biblioteka a aplikacja

Aplikacja jest przeznaczona do wdrożenia, a biblioteka — do użycia przez inne projekty. Bibliotek nie można bezpośrednio uruchamiać za pomocą serwera; są one budowane do pakietu dystrybucyjnego, a następnie publikowane lub importowane przez aplikacje w obszarze roboczym.

Biblioteki powinny mieć jasno określony zakres

Dobra biblioteka ma jasno określone przeznaczenie, na przykład zestaw UI lub warstwę dostępu do danych. Należy unikać łączenia niepowiązanego kodu; spójne biblioteki łatwiej wersjonować, dokumentować i ponownie wykorzystywać.

Kolejne kroki

Po utworzeniu szkieletu biblioteki pozostaje zdefiniowanie jej publicznego API, zbudowanie jej w formacie Angular Package Format oraz opublikowanie jej. Każdy z tych tematów zostanie omówiony w kolejnych lekcjach.

Szybkie sprawdzenie

Jak utworzyć bibliotekę?

Podsumowanie

Biblioteki pakują kod wielokrotnego użytku dla wielu aplikacji. Utwórz bibliotekę za pomocą ng generate library wewnątrz obszaru roboczego; polecenie utworzy szkielet z elementami src/lib, public-api.ts, ng-package.json oraz package.json zawierającym zależności peer. Dodawaj kod za pomocą --project, preferuj komponenty standalone i zachowuj jasno określony zakres każdej biblioteki.

Często zadawane pytania

Czy lekcja „Tworzenie biblioteki za pomocą ng generate” jest bezpłatna?

Tak — pełny tekst „Tworzenie biblioteki za pomocą ng generate” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Tworzenie biblioteki za pomocą ng generate”?

Inicjalizować szkielet projektu biblioteki Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Tworzenie biblioteki za pomocą ng generate”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Tworzenie biblioteki za pomocą ng generate
  2. Publiczne API i punkty wejścia
  3. Budowanie za pomocą ng-packagr
  4. Publikowanie w npm
← Powrót do Angular Academy