Perutean Sudut 2 - Bagaimana menerapkan untuk struktur saya

Untuk belajar mandiri, dan meningkatkan keterampilan pemrograman saya, saya membuat aplikasi menggunakan .NET Core dan Angular 2.

Berdasarkan apa yang saya baca sejauh ini, saya telah menyusun aplikasi NG2 saya sebagai berikut (saya belum menyertakan semua file) ...

/wwwroot
  - index.html
  - /app
    - app.module.ts
    - app.component.ts
    - app.component.html
    - app.route.ts
    - main.ts
    - /Components
      - /Home
        - home.module.ts
        - home.component.ts
        - home.component.html
        - /Dashboard
          - dashboard.module.ts
          - dashboard.component.ts
          - dashboard.component.html
      - /Nav
        - nav.module.ts
        - nav.component.ts
        - nav.component.html
      - /Scheduler
        - scheduler.module.ts
        - scheduler.component.ts
        - scheduler.component.html
        - /Calendar
          - calendar.module.ts
          - calendar.component.ts
          - calendar.component.html
        - /Appointment
          - appointment.module.ts
          - appointment.component.ts
          - appointment.component.html

Saya pernah membaca bahwa disarankan setiap komponen/fitur memiliki modulnya sendiri. Apakah ini sama untuk rute? Artinya, haruskah setiap komponen/fitur memiliki file rutenya sendiri?

Saya juga mencari tinggi dan rendah untuk menemukan cara menerapkan perutean. Apa yang ingin saya capai adalah agar komponen NAV muncul di bagian atas halaman (dengan opsi yang dipilih disorot), dan kemudian komponen yang dipilih (misalnya Beranda, Penjadwal, dll) muncul di badan. Komponen Penjadwal mungkin juga memiliki sistem sub-menu/tab yang memungkinkan saya memuat kalender terlebih dahulu (sebagai tampilan default), atau komponen lain di bawah komponen Penjadwal.

Bisakah seseorang menjelaskan bagaimana saya bisa mencapai hal ini, atau mengarahkan saya ke sumber daya yang akan menjelaskan dengan jelas apa yang perlu saya lakukan agar ini berhasil? Saya telah melihat dokumen Angular, dan berbagai sumber lainnya, tetapi semuanya tampaknya menerapkan perutean dengan cara yang berbeda, atau menggunakan contoh yang sangat sederhana, tidak ada satupun yang mendekati apa yang ingin saya capai.

Terima kasih sebelumnya.


angular angular2-routing
person Dazfl    schedule 30.01.2017    source sumber

Jawaban (3)


arrow_upward
1
arrow_downward

Jadi setelah banyak percobaan dan kesalahan, saya akhirnya membuang semua yang telah saya lakukan dan mulai dari awal. Kali ini saya membuat aplikasi Angular 2 menggunakan alat Angular 2 CLI. Saya kemudian mengatur perutean dengan memeriksa contoh dari https://school.scotch.io/routing-angular-2-applications/ dan https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html (terima kasih kepada pemberi komentar Max Karpovets)

Dengan menggunakan alat CLI, sangat mudah untuk membuat komponen yang diperlukan dan mengkompilasinya dengan benar. Saya hanya perlu menambahkan file rute dan modul secara manual.

person Dazfl    schedule 04.02.2017

arrow_upward
0
arrow_downward

Menurut saya cara Anda mengatur aplikasi tidak mengikuti praktik terbaik. Anda tidak perlu membuat modul khusus untuk Kalender, Janji Temu... Cukup lampirkan komponen ini ke modul Penjadwal.

https://angular.io/docs/ts/latest/guide/ngmodule.html untuk membantu Anda mendapatkan ide bagus tentang cara mengatur aplikasi Anda dalam struktur dan modularisasi yang lebih baik:

person Faly    schedule 30.01.2017
comment
Saya mengerti apa yang Anda katakan. Saya telah melihat lagi panduan gaya (angular.io/docs /ts/latest/guide/style-guide.html) dan, ya, saya mungkin berlebihan dengan file modul. Tetapi apakah saya memerlukan file modul ini untuk mengatur perutean (pertanyaan utama saya)? - person Dazfl; 31.01.2017
comment
Tidak, Anda tidak memerlukan file modul untuk setiap komponen untuk mengatur perutean: lihat contoh modul krisis pada tautan yang saya berikan di atas. - person Faly; 31.01.2017

arrow_upward
0
arrow_downward

Itu tergantung apakah Anda memerlukan pemuatan lambat atau tidak.

Jika tidak: harus dalam satu file.

Jika kamu memerlukannya:

Rute utama:

const routes: Routes = [
  { path: '', redirectTo: 'eager', pathMatch: 'full' },
  { path: 'eager', component: EagerComponent },
  { path: 'lazy', loadChildren: 'lazy/lazy.module#LazyModule' }
];

Dan perutean komponen yang lambat dimuat:

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LazyComponent } from './lazy.component';

const routes: Routes = [
  { path: '', component: LazyComponent }
];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

Untuk informasi lebih lanjut, periksa tutorial ini:

https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

person Max K    schedule 31.01.2017