اشتراکها
کتابخانه storeLocator
A jQuery plugin to serve a store locator with google maps Application interface. Demo
«انجام تنظیمات مسیریابی پیش فرض پروژه جدید توسط Angular CLI» را در قسمت دوم این سری بررسی کردیم. در ادامه با قابلیتهای بیشتری از امکانات تنظیمات مسیریابی موجود در Angular CLI، آشنا خواهیم شد.
یک مثال: در ادامه یک پروژهی جدید مبتنی بر Angular CLI را به همراه تنظیمات ابتدایی مسیریابی آن ایجاد میکنیم:
همانطور که در قسمت دوم نیز ذکر شد، پرچم routing در اینجا، سبب ایجاد فایل app-routing.module.ts نیز خواهد گردید:
و تنظیمات مرتبط با آن به صورت خودکار به قسمت imports فایل app.module.ts اضافه میشوند و آمادهی استفاده هستند.
همچنین اگر به فایل src\app\app.component.html مراجعه کنیم، router-outlet نیز به آن افزوده شدهاست و مدیریت نمایش مسیریابیها در این قسمت انجام خواهد شد.
در ادامهی این مثال، دو کامپوننت جدید را به نامهای dashboard و customer ایجاد میکنیم:
هدف این است که مسیریابیهایی را جهت کار و نمایش این کامپوننتها ایجاد کنیم. به همین جهت به فایل src\app\app-routing.module.ts مراجعه کرده و تغییرات ذیل را اعمال کنید:
در اینجا ابتدا کامپوننتهای جدید، import شده و سپس یک مسیریابی پیش فرض به کامپوننت dashboard و دو مسیریابی جدید دیگر به کامپوننتهای dashboard و customer ایجاد شدهاند.
البته باید دقت داشت که چون پیشتر با اجرای دستورات ng g c، این کامپوننتها به صورت خودکار به تعاریف فایل app.module.ts اضافه شدهاند، امکان استفادهی از آنها در اینجا میسر است:
پس از تعریف مسیریابیها، به فایل src\app\app.component.html مراجعه کرده و لینکهایی را به این مسیریابیهای جدید ایجاد میکنیم:
اکنون اگر دستور کامپایل و گشودن برنامه را در مرورگر پیش فرض سیستم صادر کنیم:
یک چنین تصویری حاصل خواهد شد:
با توجه به تنظیمات مسیریابی پیش فرض انجام شده، ابتدا مسیر http://localhost:4200/dashboard بارگذاری شدهاست.
ایجاد ماژولهای جدید به همراه تنظیمات مسیریابی آنها
در قسمت قبل با نحوهی ایجاد ماژولهای جدید توسط Angular CLI آشنا شدیم:
این فرمان، فایل admin.module.ts را تولید میکند. در اینجا میتوان پرچم مسیریابی را نیز ذکر کرد (برای اینکار یک پنجرهی خط فرمان دیگر را باز کنید و اجازه دهید تا پنجرهی خط فرمان ng serve -o باز باقی بماند و مدام مشغول بررسی تغییرات و کامپایل پشت صحنهی کار باشد):
در این حالت دو فایل admin.module.ts و همچنین admin-routing.module.ts تولید میشوند.
سپس داخل این ماژول یک کامپوننت جدید را به نام admin ایجاد میکنیم:
در اینجا چون این کامپوننت، هم نام پوشهی admin است، داخل همان پوشه ایجاد خواهد شد.
برای مثال اگر نیاز به ایجاد کامپوننت دیگری به نام emails داخل این پوشه بود، باید به نحو ذیل عمل کرد:
در این حالت پوشهی جدید email داخل پوشهی admin ایجاد شده و فایلهای کامپوننت جدید email به آن اضافه میشوند. همچنین اگر دقت کنید، اینبار سطر update آخری، فایل admin.module.ts را به روز رسانی کردهاست و در قسمت declarations آن، دو کامپوننت ایجاد شده را تعریف کردهاست:
تا اینجا ماژول جدید admin را ایجاد کردهایم؛ اما برنامهی اصلی از آن اطلاعی ندارد. به همین جهت به فایل src\app\app.module.ts مراجعه کرده و این ماژول جدید را به آن معرفی میکنیم:
ابتدا کلاس این ماژول import شده و سپس آنرا پیش از AppRoutingModule تعریف میکنیم.
در ادامه برای تعریف مسیریابیهای این ماژول جدید، به فایل src\app\admin\admin-routing.module.ts آن مراجعه کرده و ثابت routes آنرا مقدار دهی میکنیم:
در اینجا مسیریابی admin، دارای فرزند email نیز میباشد و پیش فرض آن نیز به email تنظیم شدهاست.
سپس به فایل app\admin\admin.component.html نیز مراجعه کرده و router-outlet آنرا به آن اضافه میکنیم:
تا اینجا هرچند لینک جدیدی را به ناحیهی ادمین تعریف نکردهایم، اما مسیریابی تعریف شدهی آن کار میکند:
یک نکته: امکان تولید route guards نیز توسط Angular CLI برای محافظت از مسیریابی خاصی وجود دارد. برای این منظور میتوان دستور ذیل را صادر کرد:
که سبب تولید فایل auth.guard.ts میشود.
یک مثال: در ادامه یک پروژهی جدید مبتنی بر Angular CLI را به همراه تنظیمات ابتدایی مسیریابی آن ایجاد میکنیم:
> ng new angular-routing --routing
و تنظیمات مرتبط با آن به صورت خودکار به قسمت imports فایل app.module.ts اضافه میشوند و آمادهی استفاده هستند.
همچنین اگر به فایل src\app\app.component.html مراجعه کنیم، router-outlet نیز به آن افزوده شدهاست و مدیریت نمایش مسیریابیها در این قسمت انجام خواهد شد.
در ادامهی این مثال، دو کامپوننت جدید را به نامهای dashboard و customer ایجاد میکنیم:
>ng g c dashboard >ng g c customer
هدف این است که مسیریابیهایی را جهت کار و نمایش این کامپوننتها ایجاد کنیم. به همین جهت به فایل src\app\app-routing.module.ts مراجعه کرده و تغییرات ذیل را اعمال کنید:
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { DashboardComponent } from './dashboard/dashboard.component'; import { CustomerComponent } from './customer/customer.component'; const routes: Routes = [ { path: '', pathMatch: 'full', redirectTo: 'dashboard' }, { path: 'dashboard', component: DashboardComponent }, { path: 'customer', component: CustomerComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
البته باید دقت داشت که چون پیشتر با اجرای دستورات ng g c، این کامپوننتها به صورت خودکار به تعاریف فایل app.module.ts اضافه شدهاند، امکان استفادهی از آنها در اینجا میسر است:
@NgModule({ declarations: [ AppComponent, DashboardComponent, CustomerComponent ],
پس از تعریف مسیریابیها، به فایل src\app\app.component.html مراجعه کرده و لینکهایی را به این مسیریابیهای جدید ایجاد میکنیم:
<h1> {{title}} </h1> <nav> <ul> <li><a href="" [routerLink]="['/dashboard']">Dashboard</a></li> <li><a href="" [routerLink]="['/customer']">Customer</a></li> </ul> </nav> <router-outlet></router-outlet>
اکنون اگر دستور کامپایل و گشودن برنامه را در مرورگر پیش فرض سیستم صادر کنیم:
> ng serve -o
با توجه به تنظیمات مسیریابی پیش فرض انجام شده، ابتدا مسیر http://localhost:4200/dashboard بارگذاری شدهاست.
ایجاد ماژولهای جدید به همراه تنظیمات مسیریابی آنها
در قسمت قبل با نحوهی ایجاد ماژولهای جدید توسط Angular CLI آشنا شدیم:
> ng g module admin
> ng g m admin --routing
سپس داخل این ماژول یک کامپوننت جدید را به نام admin ایجاد میکنیم:
> ng g c admin
برای مثال اگر نیاز به ایجاد کامپوننت دیگری به نام emails داخل این پوشه بود، باید به نحو ذیل عمل کرد:
> ng g c admin/email installing component create src\app\admin\email\email.component.css create src\app\admin\email\email.component.html create src\app\admin\email\email.component.spec.ts create src\app\admin\email\email.component.ts update src\app\admin\admin.module.ts
@NgModule({ imports: [ CommonModule, AdminRoutingModule ], declarations: [AdminComponent, EmailComponent] }) export class AdminModule { }
تا اینجا ماژول جدید admin را ایجاد کردهایم؛ اما برنامهی اصلی از آن اطلاعی ندارد. به همین جهت به فایل src\app\app.module.ts مراجعه کرده و این ماژول جدید را به آن معرفی میکنیم:
import { AdminModule } from './admin/admin.module'; @NgModule({ imports: [ BrowserModule, FormsModule, HttpModule, AdminModule, AppRoutingModule ],
در ادامه برای تعریف مسیریابیهای این ماژول جدید، به فایل src\app\admin\admin-routing.module.ts آن مراجعه کرده و ثابت routes آنرا مقدار دهی میکنیم:
import { AdminComponent } from './admin.component'; import { EmailComponent } from './email/email.component'; const routes: Routes = [ { path: 'admin', component: AdminComponent, children:[ { path:'', component:EmailComponent }, { path:'email', component:EmailComponent } ] } ];
سپس به فایل app\admin\admin.component.html نیز مراجعه کرده و router-outlet آنرا به آن اضافه میکنیم:
<p> admin works! </p> <router-outlet></router-outlet>
یک نکته: امکان تولید route guards نیز توسط Angular CLI برای محافظت از مسیریابی خاصی وجود دارد. برای این منظور میتوان دستور ذیل را صادر کرد:
>ng g guard auth
یک نکتهی تکمیلی
روشی که در سری ابتدایی Angular مطرح شدهاست، مبتنی بر سیستم مدیریت ماژولهای system.js هست. اما در نهایت روش توصیه شدهی توسط تیم Angular استفاده از Angular CLI است که مبتنی بر webpack است. این روش بسیار سادهتر (کار با ابزاری استاندارد)، ساختیافتهتر (به همراه تنظیماتی مبتنی بر best practices)، بهینهتر (به همراه بهینه سازیهای بسیاری جهت کاهش حجم نهایی و کاهش تعداد فایلهای تولیدی) و پیشرفتهتر از روش system.js هست و توضیحات تکمیلی آن در مطلب « Angular CLI - قسمت پنجم - ساخت و توزیع برنامه» ارائه شدهاند. این روشی است که برای ارائهی نهایی از آن استفاده میشود و در مطالبی مانند «یکپارچه سازی Angular CLI و ASP.NET Core در VS 2017» و «سفارشی سازی صفحهی اول برنامههای Angular CLI توسط ASP.NET Core» از آنها استفاده شدهاست.
روشی که در سری ابتدایی Angular مطرح شدهاست، مبتنی بر سیستم مدیریت ماژولهای system.js هست. اما در نهایت روش توصیه شدهی توسط تیم Angular استفاده از Angular CLI است که مبتنی بر webpack است. این روش بسیار سادهتر (کار با ابزاری استاندارد)، ساختیافتهتر (به همراه تنظیماتی مبتنی بر best practices)، بهینهتر (به همراه بهینه سازیهای بسیاری جهت کاهش حجم نهایی و کاهش تعداد فایلهای تولیدی) و پیشرفتهتر از روش system.js هست و توضیحات تکمیلی آن در مطلب « Angular CLI - قسمت پنجم - ساخت و توزیع برنامه» ارائه شدهاند. این روشی است که برای ارائهی نهایی از آن استفاده میشود و در مطالبی مانند «یکپارچه سازی Angular CLI و ASP.NET Core در VS 2017» و «سفارشی سازی صفحهی اول برنامههای Angular CLI توسط ASP.NET Core» از آنها استفاده شدهاست.
اشتراکها
Angular 8 منتشر شد
اشتراکها
نگارش نهایی Angular 7 منتشر شد
جهت اطلاع
بستهی «Microsoft.AspNetCore.SpaServices» با توجه به وجود ابزارهایی مانند Angular CLI, create-react-app، منسوخ شده اعلام شده و بهتر است یا از آن استفاده نکنید و یا از Microsoft.AspNetCore.SpaServices.Extensions استفاده نمائید.
مطلب «یکپارچه سازی Angular CLI و ASP.NET Core در VS 2017» و نظرات آنرا مطالعه کنید.