Materiały na warsztat #2 2020-11-19
Jeśli wcześniej nie uczestniczyłeś w warsztatach, to potrzebne oprogramowanie masz na stronie https://www.kodujwplocku.pl/przygotowanie-do-warsztatow. Wykonaj wszystkie kroki, oprócz 15-16 (nie instaluj Ionic).
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
ng new budowa-apki-angular
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS
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 .
cd budowa-apki-angular
code .
cd budowa-apki-angular code .
ng serve
ng serve
ng serve
Plik: app.component.html
<router-outlet></router-outlet>
<router-outlet></router-outlet>
<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>
<body>
<p>To nie jest angular</p>
<app-root>Ładowanie aplikacji trwa ....</app-root>
<p>I to też nie jest angular</p>
</body>
<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',
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',
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';
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
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;
}
div {
background-color: green;
}
div {
background-color: green;
}
Plik: app.component.html
<div>
To jest komponent w aplikacji {{ nazwaApki }}
</div>
<router-outlet></router-outlet>
<div>
To jest komponent w aplikacji {{ nazwaApki }}
</div>
<router-outlet></router-outlet>
<div>
To jest komponent w aplikacji {{ nazwaApki }}
</div>
<router-outlet></router-outlet>
Komponent w routingu
cd src/app
cd src/app
cd src/app
ng g c pierwsz-komponent
ng g c drugi-komponent
ng g c pierwsz-komponent
ng g c drugi-komponent
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 },
];
const routes: Routes = [
{ path: 'pierwszy', component: PierwszKomponentComponent },
{ path: 'drugi', component: DrugiKomponentComponent },
];
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>
<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>
<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 },
];
const routes: Routes = [
{ path: 'pierwszy', component: PierwszKomponentComponent },
{ path: 'drugi', component: DrugiKomponentComponent },
{ path: '', redirectTo: '/pierwszy', pathMatch: 'full' },
{ path: '**', component: DrugiKomponentComponent },
];
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
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
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;
}
}
export class PierwszKomponentComponent implements OnInit {
nazwisko: string = 'Kowalski';
isValid: boolean = true;
constructor() { }
ngOnInit(): void {
}
SprawdzMnie(): void {
this.isValid = false;
}
WpisalemTekst(): void {
this.isValid = true;
}
}
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>
<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>
<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
ng g s ZmianyTekstu
ng g s ZmianyTekstu
export class ZmianyTekstuService {
constructor() { }
reverse(str: string): string {
return str.split('').reverse().join('');
}
}
export class ZmianyTekstuService {
constructor() { }
reverse(str: string): string {
return str.split('').reverse().join('');
}
}
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);
}
}
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);
}
}
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);
}
}
Poprzedni wpis
Następny wpis
