Materiały na warsztat #2 2020-11-19

16 listopada 2020 Szafrański Michał

Budowa aplikacji Angular

ng new budowa-apki-angular

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS

cd budowa-apki-angular
code .

ng serve

Plik: app.component.html

<router-outlet></router-outlet>

Plik: index.html

<body>
  <p>To nie jest angular</p>
  <app-root>Ładowanie aplikacji trwa ....</app-root>
  <p>I to też nie jest angular</p>
</body>

Plik: app.component.ts

@Component({
  selector: 'app-root',
  template: `
    <div>
      To jest komponent w aplikacji {{ nazwaApki }}
    </div>
  `,
  styles: ['div { background-color: green; }']
})
export class AppComponent {
  nazwaApki = 'budowa-apki-angular';
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  nazwaApki = 'budowa-apki-angular';
}

Plik: app.component.scss

div {
  background-color: green;
}

Plik: app.component.html

<div>
  To jest komponent w aplikacji {{ nazwaApki }}
</div>

<router-outlet></router-outlet>

Komponent w routingu

cd src/app

ng g c pierwsz-komponent
ng g c drugi-komponent

Plik: app.module.ts

Plik: app-routing.module.ts

const routes: Routes = [
  { path: 'pierwszy', component: PierwszKomponentComponent },
  { path: 'drugi', component: DrugiKomponentComponent },
];

Plik: app.component.html

<nav>
  <ul>
    <li><a routerLink="/pierwszy" routerLinkActive="active">Pierwszy komponent</a></li>
    <li><a routerLink="/drugi" routerLinkActive="active">Drugi komponent</a></li>
  </ul>
</nav>

<router-outlet></router-outlet>

Plik: app-routing.module.ts

const routes: Routes = [
  { path: 'pierwszy', component: PierwszKomponentComponent },
  { path: 'drugi', component: DrugiKomponentComponent },
  { path: '', redirectTo: '/pierwszy', pathMatch: 'full' },
  { path: '**', component: DrugiKomponentComponent },
];

Zmienne i zdarzenia

Plik: app.module.ts

  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],

Plik: pierwsz-komponent.component.ts

export class PierwszKomponentComponent implements OnInit {

  nazwisko: string = 'Kowalski';
  isValid: boolean = true;

  constructor() { }

  ngOnInit(): void {
  }

  SprawdzMnie(): void {
    this.isValid = false;
  }

  WpisalemTekst(): void {
    this.isValid = true;
  }
}

Plik: pierwsz-komponent.component.html

<h4>{{nazwisko}}</h4>

<input type='text' placeholder="Nazwisko" (input)="WpisalemTekst()" [(ngModel)]="nazwisko">

<span [hidden]="isValid">W tym polu jest błąd!</span>

<button (click)="SprawdzMnie()">Sprawdz mnie</button>

Usługi

ng g s ZmianyTekstu

export class ZmianyTekstuService {

  constructor() { }

  reverse(str: string): string {
    return str.split('').reverse().join('');
  }
}

Plik: pierwsz-komponent.component.ts

export class PierwszKomponentComponent implements OnInit {

  nazwisko: string = 'Kowalski';
  isValid: boolean = true;
  nazwisko2: string;

  constructor(private ZmianyTekstu: ZmianyTekstuService) { }

  ngOnInit(): void {
  }

  SprawdzMnie(): void {
    this.isValid = false;
  }

  WpisalemTekst(): void {
    this.isValid = true;
    this.nazwisko2 = this.ZmianyTekstu.reverse(this.nazwisko);
  }
}