HAKKIMDA
  • İsim: Tamer Durgun
  • Yaş: 30
  • Boy: 184cm
  • Kilo: 115kg
  • From: Turkey
  • Burç: Yay
  • Meslek: Full-Stack Developer
  • Askerlik: Şırnak 23. Jan. Sınır Tüm. Kmt 89/3
  • Deneyim: 4 yıl 1 ay 12 gün
  • Eğitim: Lisans
HİZMETLER
  • A. Front-end Development
  • - HTML5 & CSS3
  • - javaScript
  • - Design Patterns
  • - jQuery
  • - Bootstrap
  • - Angularjs
  • - Reactjs
  • - Gruntjs / Gulpjs
  • - Sass / Less
  • - Adobe PS
  • B. Back-end Development
  • - Php
  • - OOP
  • - SQL
  • - CodeIgniter FW
  • - Zend FW
PORTFOLYO
BLOG
Angular 4 Routing Ve Navigasyon

Selam arkadaşlar, Angular 4 projemizde routing ve navigasyon nasıl yapılır kısaca anlatacağım:

Routing

1.) Hangi componentin hangi url' de görüntüleneceğini app.module dosyamızda ayarlıyoruz.

import { RouterModule, Routes} from '@angular/router';
const routes: Routes = [
{
path: '',
redirectTo: 'login',
pathMatch: 'full'
},
{
path: 'login',
component: LoginComponent
},
{ path: 'profile/:userid',
component: UserComponent
}
];

@NgModule({
imports: [
RouterModule.forRoot(routes)
]
})

2. Url Parametrelerini de component'imizde şu şekilde alıyoruz;

import { ActivatedRoute} from '@angular/router';
userid:any;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
this.getData();

this.route.paramMap.subscribe(params => {
this.userid = params.get('userid');

console.log(this.userid);
});

}

Navigasyon

1.) routerLink özelliği ile yönlendirme yapıyoruz. href kullanırsak tarayıcı js css image vs. kaynakları tekrar yükleyerek render yapacaktır ancak routerLink ile yönlendirme yaptığımızda sadece ilgili sayfa render olacaktır, kullanımı;

Statik:

<a routerLink="/profile/1">Login</a>

Dinamik:

<a [routerLink]="['/profile', user.id]">Profil</a>

Hepsi bu kadar, sevgiler.

Devamı
FACEBOOK
İLETİŞİM

*Benimle iletişime geçmek için aşağıdaki alanları lütfen eksiksiz doldurunuz.