Instalacja node ⇝ nvm

Instalacja Angular CLI

            npm install -g @angular/cli
          

Wygenerowanie aplikacji Angular

            $ ng new
            ? What name would you like to use for the new workspace and initial project? foo
            ? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
            This setting helps improve maintainability and catch bugs ahead of time.
            For more information, see https://angular.io/strict Yes
            ? Would you like to add Angular routing? Yes
            ? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
          

Zbudowanie aplikacji

          ng build --prod
        

Uruchomienie aplikacji

          ng serve -o
        

• funkcjonalny blok aplikacji,
• sposób organizacji kodu,
• sposób zarządzania zależnościami,
• tworzenie kodu bibliotecznego,
• lazy-loading w przypadku dużych aplikacji.

Moduł ECMA Script oraz Moduł Angulara to dwie różne rzeczy!

Komponenty "standalone"

• Moduły są opcjonalne począwszy od Angulara 14.
• Komponenty, dyrektywy oraz "pipes" można zadeklarować jako standalone.
• Komponenty mogą od teraz importować moduły.
• Komponenty (dyrektywy, "pipes") są self-contained.

• Komponent jest podstawową jednostką budowania warstwy wizualnej aplikacji.
• Komponent może być wykorzystywany wielokrotnie.
• Komponent komunikuje się ze światem "zewnętrznym" w ściśle określony sposób.

          ng generate component user-mgmt/user-list
        

• html - szablon - część wizualna, ang. template (opcja)
• scss - prywatny arkusz styli (opcja)
• component.ts - kod/kontroler komponentu
• spec.ts - testy jednostkowe komponentu (opcja)

Definicja wyglądu komponentu w HTML:

lub z użyciem zewnętrznego pliku:

user-list.component.html

DOM (Document Object Model) jest to model obiektowy reprezentujący dokument HTML wyświetlany przez przeglądarkę.

Postawowe API elementów DOM:

Data binding są to mechanizmy pozwalające na integrację modelu z widokiem.

Detekcja zmian

Cykl życia komponentu

Dyrektywy

Dyrektywy to elementy rozszerzające funkcjonalność HTML, które można deklarować za pomocą Angular.

Dyrektywy atrybutowe

Dyrektywy atrybutowe

          divClasses = {};
          ...
          this.divClasses: {
            'valid': this.isValid(),
            'highlighted': this.isHighlighted()
          }
        

W prostszych przypadkach...

Dyrektywy strukturalne

Angular pozwala na stosowanie data bindings we własnych komponentach.

Dla danych wejściowych:

          export class UserDetailsComponent
          {
             ...
             @Input() user: User;
             ...
          }
        

Dla danych wyjściowych:

          export class UserDetailsComponent
          {
             ...
             @Output() onChanged = new EventEmitter<User>();
             ...
             this.onChanged.emit(user);
             ...
          }
        

Required inputs

• Nowość począwszy od Angulara 16
• @Input({required=true})
• Wiązanie musi być określone, inaczej nastąpi błąd kompilacji.

Input tranforms

• Nowość począwszy od Angulara 16
• @Input({transform: booleanAttribute})
• Funkcja transformująca wartość.

Jak działa przeglądarka?

• Obsługa pola adresowego URL
• Hiperlinki i przekierowania
• Historia przeglądania

Router jest modułem Angulara, który implementuje podstawowe funkcje przeglądarki (URL, historia) w aplikacjach typu Single-Page.

Więcej informacji na https://angular.io/guide/router.

Serwis to współdzielony kod aplikacji:

• może posiadać stan
• posiada zasięg (scope) oraz cykl życia
• podlega mechanizmowi DI (dependency injection)

          @Injectable()
          export class UserService {

            users: User[] = [];

            constructor() {
              this.users = [
                {id: 1, name: 'John Doe', email: 'john.doe@email.com'},
                {id: 2, name: 'Max Rockatansky', email: 'mad.max@email.com'},
                {id: 3, name: 'Chuck Peddle', email: 'chuck@mos.com'}
              ];
            }

            getAllUsers() {
              return this.users;
            }

            saveUser(user: User) {
              const found = this.findUser(user.id);
              if (found) {
                Object.assign(found, user);
              } else {
                this.users.push(user);
              }
            }

            findUser(id: number) {
              return this.users.find((user: User) => user.id === id);
            }

            getNextId() {
              return this.users
                .map((elem: User) => elem.id)
                .reduce((prev, curr) => prev > curr ? prev : curr, 0) + 1;
            }
          }