معرفی
روتر یک مفهوم مهم و بخشی از Angular 4 برای پیمایش بین نمای اجزای مختلف است. کامپوننتهای مختلف را بارگذاری میکند، یا در مفهوم AngularJS، میتوانید صفحات جزئی مختلفی را بر اساس روتر درخواستی بگویید. همچنین انتقال داده ها از یک جزء به اجزای مختلف مفید است. AngularJS نیز همین نوع مفهوم را با استفاده از $state.go() برای پیمایش و انتقال داده دارد.
مسیریابی مسیریاب
برای پیمایش و انتقال داده ها از یک جزء به جزء دیگر استفاده می شود. برای استفاده از روتر باید مانند زیر وارد شود.
- import { Router } from '@angular/router';
باید در سازنده کامپوننت مانند زیر ارسال شود.
- constructor(private nutanixervice: NutanixService, private router:Router) {
- this.curPage = 1;
- this.pageSize = 10;
- }
بیایید قدم به قدم توسعه دهیم.
یک ساختار پروژه پوشه برای پروژه آموزشی خود ایجاد کنید، مانند زیر.
در اینجا، برخی از فایلهای js فایلهای جاوا اسکریپت بهطور خودکار تولید میشوند. باید روی فایل های .ts تمرکز کنید. در ساختار ریشه فوق، من دو جزء مجزا ایجاد کرده ام - خانه و جزئیات. پیمایش بین این دو جزء را توضیح خواهم داد.
سه فایل مختلف را یکی یکی مانند زیر ایجاد کنید
تمام منطق های مربوط به خانه در این جزء تعریف شده است.
- import { Component, OnInit } from '@angular/core';
- import { NutanixService } from '../dataservices/nutanix.service';
- import { Observable } from 'rxjs/Observable';
- import { Router } from '@angular/router';
- @Component({
- templateUrl: './app/home/home.html'
- })
- export class HomeListComponent implements OnInit{
- nutaNixGitHubData: any;
- curPage : number;
- pageSize : number;
- private selectedObj : any;
- private ValueId : number = 1;
- private selectedName: 'java';
- technologies = [
- { id: 1, name: "java" },
- { id: 2, name: "python" },
- { id: 3, name: "javaScript" },
- { id: 4, name: "php" },
- { id: 5, name: "ruby" }
- ];
- constructor(private nutanixervice: NutanixService, private router:Router) {
- this.curPage = 1;
- this.pageSize = 10;
- }
- ngOnInit() {
- this.getNutanixRepo();
- }
- currentPageClick() {
- this.curPage = this.curPage+1;
- this.getNutanixRepo();
- }
- prevPageClick() {
- this.curPage = this.curPage-1;
- this.getNutanixRepo();
- }
- getNutanixRepo() {
- this.nutanixervice.getNutanixGitHubData(this.selectedName, String(this.curPage)).subscribe(
- (data)=>{
- this.nutaNixGitHubData = data.items;
- console.log(this.nutaNixGitHubData);
- });
- }
- numberOfPages(){
- return 10;
- };
- private selectedValueObj(id: any) {
- this.ValueId = (id.srcElement || id.target).value;
- for (let i = 0; i < this.technologies.length; i++) {
- if (this.technologies[i].id == this.ValueId) {
- this.selectedObj = this.technologies[i];
- this.selectedName = this.selectedObj.name;
- this.getNutanixRepo();
- }
- }
- }
- showDetails(id: any){
- console.log(id);
- this.router.navigate(['/detail', {'id': id}]);
- };
- }
در اینجا، من چند روش نوشته ام و چند سرویس تماس گرفته ام. من می خواهم از این مؤلفه "خانه" به مولفه "جزئیات" حرکت کنم.
بنابراین، من یک روش مانند زیر نوشته ام.
- showDetails(id: any){
- console.log(id);
- this.router.navigate(['/detail', {'id': id}]);
- };
متد showDetails فقط id را به عنوان آرگومان می گیرد و به router.navigate می دهد. اما، من در این روش اشاره نکردم که کجا حرکت خواهد کرد. این به جزء "جزئیات" حرکت می کند، فقط آن را در نظر بگیرید. این را پیشاپیش با جزئیات بیشتر توضیح خواهم داد.
Binding و UI مؤلفه home در فایل home.html نمایش داده می شود.
- <div>
- <span>Please Select Technology:</span> <select [(ngModel)]="ValueId" (change)="selectedValueObj($event)">
- <option *ngFor="let Value of technologies" [value]="Value.id" >
- {{Value.name}}</option></select>
- </div>
- <h3>List of Source Code Repository</h3>
- <div class="row">
- <div class="col-md-6" *ngFor="let nutanixData of nutaNixGitHubData" (click) ="showDetails(nutanixData.owner.login)">
- <div class="panel">
- <div class="panel-body panelbody">
- <div class="col-md-3"> <img src="{{nutanixData.owner.avatar_url}}"
- alt="avatar" height="200" width="180"></div>
- <div class="col-md-6">
- <div> <span>ID: {{nutanixData.id}}</span> </div>
- <div> <span>Name: {{nutanixData.name}}</span> </div>
- <div> <span>Full name: {{nutanixData.full_name}}</span> </div>
- <div> <span>Owner Login: {{nutanixData.owner.login}}</span> </div>
- <div> <span>Owner ID: {{nutanixData.owner.id}}</span> </div>
- <div> <span>Url: <a href="{{nutanixData.owner.url}}">{{nutanixData.owner.url}}</a></span> </div>
- <div> <span>Type: {{nutanixData.owner.type}}</span> </div>
- <div> <span>Size: {{nutanixData.size}}</span> </div>
- <div> <span>No. of Forks: {{nutanixData.forks}}</span> </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- t;div style="text-align: center; margin-bottom: 10px;" *ngIf="nutaNixGitHubData">
- <button [disabled] ="curPage == 1" (click)="prevPageClick()">PREV</button>
- <span>Page {{curPage}} of {{ numberOfPages() }}</span>
- <button [disabled] = "curPage >= 9" (click) ="currentPageClick()">NEXT</button>
- lt;/div>
در فایل home.html بالا روشی را برای پیمایش مانند زیر تعریف کرده ام.
- <div class="col-md-6" *ngFor="let nutanixData of nutaNixGitHubData" (click) ="showDetails(nutanixData.owner.login)">
home.routes.ts
این فایل استراتژی مسیریابی برای مؤلفه «home» است.
- import { Routes } from '@angular/router';
- import { HomeListComponent } from './home-list.component';
- export const homeRoutes: Routes = [
- { path: 'home', component: HomeListComponent }
- ];
در کامپوننت homeRoutes، من نام مسیر "home" را برای کامپوننت HomeList تعریف کرده ام. این نام مسیر نقش بسیار مهمی در ناوبری دارد.
اکنون به سراغ یک جزء دیگر می روم.
جزء دیگر، به عنوان مثال، "جزئیات" از طریق جزء "خانه" هدایت می شود. مانند زیر سه فایل مختلف را یکی یکی ایجاد کنید.
detail.component.ts فقط یک مؤلفه دیگر است. هنگامی که از طریق اجزای خانه پیمایش می شود، رندر می شود.
- import { Component, OnInit } from '@angular/core';
- import { ActivatedRoute } from '@angular/router';
- import { NutanixService } from '../dataservices/nutanix.service';
- import { Observable } from 'rxjs/Observable;
- @Component({
- templateUrl: './app/detail/repodetail.html'
- })
- export class DetailComponent implements OnInit {
- private selectRepoOwner;
- nutaNixOwnerData: any;
- gitHubOwnerFollowers: any;
- constructor(private route: ActivatedRoute, private nutanixervice: NutanixService) {}
- ngOnInit() {
- this.sub = this.route.params.subscribe(params => {
- this.selectRepoOwner = params['id'];
- this.getNutOwneranixRepo();
- this.getGitOwnerFollowers();
- });
- }
- getNutOwneranixRepo() {
- this.nutanixervice.getNutanixGitHubOwnerData(this.selectRepoOwner).subscribe(
- (data)=>{
- this.nutaNixOwnerData = data.items[0];
- console.log(this.nutaNixOwnerData);
- });
- }
- getGitOwnerFollowers() {
- this.nutanixervice.getGitHubOwnerFollowers(this.selectRepoOwner).subscribe(
- (data)=>{
- this.gitHubOwnerFollowers = data;
- console.log(this.gitHubOwnerFollowers);
- });
- }
- }
اگر به فایل detail.component.ts دقت کنید، متوجه خواهید شد که مسیر زیر را وارد کرده ام.
- import { ActivatedRoute } from '@angular/router';
"ActivatedRouter" حاوی اطلاعاتی در مورد مسیر مرتبط با یک جزء بارگذاری شده در یک خروجی است.
همچنین، من این مسیر را مانند زیر به سازنده این کامپوننت منتقل کرده ام.
- constructor(private route: ActivatedRoute) {}
بنابراین OnInit، این جزییات متد زیر را فراخوانی می کند.
- ngOnInit() {
- this.sub = this.route.params.subscribe(params => {
- this.selectRepoOwner = params['id'];
- });
- }
route.params ناوبری را مشترک می کند و داده ها را از "params" دریافت می کند.
این فایل فقط بخش رابط کاربری جزء جزئیات است.
این فایل حاوی منطق استراتژی مسیریابی جزء جزئیات است.
- import { Routes } from '@angular/router';
- import { DetailComponent } from './detail.component';
- export const detailRoutes: Routes = [
- { path: 'detail', component: DetailComponent }
- ];
در اینجا، نام مسیر این مسیریابی "جزئیات" است. برای مسیریابی بسیار مهم است. کاربرد و اهمیت آن را در منطق کد بعدی توضیح خواهم داد.
این فایل حاوی پیوندهای مسیریابی جزء سطح برنامه است. برای جزئیات بیشتر به کد زیر مراجعه کنید.
- import { Component, OnInit} from '@angular/core';
- @Component({
- selector: 'my-app',
- template: `
- <div class="row">
- <h1 Style=margin-left:10px;>Nutanix - TechScan</h1>
- </div>
- <div>
- <nav>
- <a class="mdl-navigation__link" [routerLink]="['/']">Home</a>
- </nav>
- <hr>
- </div>
- <div>
- <router-outlet></router-outlet>
- </div>
- `,
- })
- // App Component class
- export class AppComponent{
- }
در اینجا <router-outlet></router-outlet> تعریف شده است. پیمایش از یک نمای به نمای بعدی را بر اساس درخواست کاربر فعال می کند.
[routerLink] برای تعریف مسیر مسیریابی استفاده می شود.
این فایل حاوی منطق استراتژی مسیریابی سطح برنامه است. این شامل جزئیات پیکربندی مسیریابی سطح برنامه است.
- import { ModuleWithProviders } from '@angular/core';
- import { Routes, RouterModule } from '@angular/router';
- import { homeRoutes } from './home/home.routes';
- import { detailRoutes } from './detail/detail.routes';
- // Route Configuration
- export const routes: Routes = [
- {
- path: '',
- redirectTo: '/home',
- pathMatch: 'full'
- },
- ...homeRoutes,
- ...detailRoutes
- ];
- export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
در کد بالا، من هر دو نام مسیریابی کامپوننت را تعریف کرده ام - ...homeRoutes، ...detailRoutes. به طور پیش فرض، "homeRoutes" در بارگذاری فایل index.html فراخوانی می شود. و "detailRoutes" در درخواست انجام شده توسط مولفه "home" فراخوانی می شود.
این فایل ماژول سطح برنامه است. این شامل تمام اجزاء، خدمات، جزئیات مسیر سطح برنامه است.
- import { NgModule } from '@angular/core';
- import { BrowserModule } from '@angular/platform-browser';
- import { FormsModule } from '@angular/forms';
- import { HttpModule, JsonpModule } from '@angular/http';
- import { AppComponent } from './app.component';
- import { HomeListComponent } from './home/home-list.component';
- import { DetailComponent } from './detail/detail.component';
- import { routing } from './app.routes';
- import {NutanixService} from '../app/dataservices/nutanix.service';
- @NgModule({
- imports: [
- BrowserModule,
- FormsModule,
- HttpModule,
- JsonpModule,
- routing
- ],
- declarations: [
- AppComponent,
- HomeListComponent,
- DetailComponent
- ],
- providers: [
- NutanixService
- ],
- bootstrap: [ AppComponent ]
- })
- export class AppModule {
- }
من یک پروژه ایجاد کرده ام که مسیریابی و پیمایش از یک جزء به جزء دیگر را انجام می دهد. اساساً "فهرست تمام مخزن کد منبع" را از GitHub بر اساس انتخاب فناوری های مختلف ذکر شده در زیر دریافت می کند.