این ادامه عملیات Angular 8 - CRUD - قسمت اول است . در این مقاله با Angular Routing و Angular Services و نحوه ساخت یک Web API با چارچوب موجودیت با استفاده از پایگاه داده NORTHWND SQL Server آشنا خواهیم شد.
مسیریابی زاویه ای
روتر زاویه ای برای پیمایش بین نماها یا صفحاتی که توسط اقدامات کاربر ایجاد می شوند استفاده می شود. تغییرات پیمایش یا مشاهده زمانی اتفاق میافتد که کاربر روی پیوند کلیک کند، روی دکمه کلیک کند یا URL را از نوار آدرس مرورگر وارد کند.
در این نمونه، من وب سایت خود را که در AngularJS ساخته شده است به Angular 8 تبدیل می کنم. بنابراین، ناوبری ها مطابق با نیاز وب سایت من است.
ابتدا باید با استفاده از دستور CLI چند کامپوننت ایجاد کنید،
ng ایجاد وبلاگ جزء
ng تولید مقاله جزء
حالا به فایل app-routing.module.ts بروید و مراجع کامپوننت را اضافه کنید و مسیریابی را تغییر مسیر دهید.
- import { NgModule } from '@angular/core';
- import { Routes, RouterModule } from '@angular/router';
- import { EmployeeComponent } from './employee/employee.component'
- import { AboutComponent } from './about/about.component'
- import { ContactComponent } from './contact/contact.component'
- import { BlogComponent } from './blog/blog.component'
- import { ArticleComponent } from './article/article.component'
- import { CodingComponent } from './coding/coding.component'
- import { SnippetComponent } from './snippet/snippet.component'
- import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
- const routes: Routes = [
- {path: 'employee', component: EmployeeComponent},
- {path: 'about', component: AboutComponent},
- {path: 'contact', component: ContactComponent},
- {path: 'blog', component: BlogComponent},
- {path: 'article', component: ArticleComponent},
- {path: 'coding', component: CodingComponent},
- {path: 'snippet', component: SnippetComponent},
- { path: '', redirectTo: '/home', pathMatch: 'full' },
- { path: '**', component: PageNotFoundComponent }
- ];
- @NgModule({
- imports: [RouterModule.forRoot(routes)],
- exports: [RouterModule]
- })
- export class AppRoutingModule { }
یک جزء نوار ناوبری جدید اضافه کنید و کد زیر را اضافه کنید
- <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
- <a class="navbar-brand logo" href="#">DotNetBuild</a>
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" [ngClass]="{ 'show': navbarOpen }" id="navbarSupportedContent">
- <ul class="navbar-nav mr-auto">
- <li class="nav-item active">
- <a class="nav-link" routerLink="" routerLinkActive="active">Home <span class="sr-only">(current)</span></a>
- </li>
- <li class="nav-item">
- <a class="nav-link" routerLink="/employee" routerLinkActive="active">Employee</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" routerLink="/blog" routerLinkActive="active">Blogs</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" routerLink="/article" routerLinkActive="active">Articles</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" routerLink="/coding" routerLinkActive="active">Coding Tips</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" routerLink="/snippet" routerLinkActive="active">Code Snippet</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" routerLink="/about" routerLinkActive="active">About Us</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" routerLink="/contact" routerLinkActive="active">Contact Us</a>
- </li>
- </ul>
- <ul class="navbar-nav ">
- <li class="nav-item">
- <a class="nav-link" href="#"><fa-icon ='faSearch'></fa-icon></a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#"><fa-icon ='faBell'></fa-icon></a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#"><fa-icon ='faUser'></fa-icon></a>
- </li>
- <li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
- aria-expanded="false">User1</a>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="#">User2</a>
- <a class="dropdown-item" href="#">User3</a>
- <a class="dropdown-item" href="#">Kids</a>
- </div>
- </li>
- </ul>
- </div>
- </nav>