Angular Hosting Indonesia – Cara Routing di Angular 2.0

Dalam posting ini saya akan memberikan pengenalan terhadap sudut baru 2,0 router.

Banyak telah dikatakan tentang router baru, tapi saya pribadi berpikir itu tampak sangat menjanjikan. Sudut 2.0 benar-benar mendorong konsep komponen, sehingga tidak mengherankan bahwa routing dikonfigurasi berdasarkan komponen. Secara pribadi saya sangat suka konsep berdasarkan routing komponen karena mempromosikan desain modular dimana komponen sendiri agnostik dari rute.

Routes

Setup router ini cukup intuitif dan itu benar-benar mudah untuk mendapatkan nav sederhana diaktifkan pada aplikasi Anda. Yang Anda perlukan adalah bagian konfigurasi menunjuk ke beberapa komponen yang akan dimuat oleh rute tertentu. Lihat contoh di bawah:

Konsep kunci di sini adalah bagianRouteConfig karena ikatan komponen untuk rute tertentu.

Root routes

Kasus yang paling sederhana adalah dengan tingkat akar tanpa tanggungan. Dalam contoh di atas kita melihat contoh dari tingkat akar rute sederhana, menunjuk ke sebuah komponen tunggal.

Langkah selanjutnya adalah untuk menentukan rute root dengan parameter menggunakan: / [parameter Nama] sintaks.

Deep menghubungkan dan Child Routees

Rute tingkat satu seperti dijelaskan di atas sangat umum di Aplikasi Halaman tunggal, tetapi tingkat berikutnya ini adalah untuk kawat sampai mendalam menghubungkan dengan n-tingkat komponen.

Cara untuk melakukan dalam menghubungkan di sudut 2.0 adalah melalui rute akar dengan … sintaks khusus

Dengan menentukan … sintaks Anda mengatakan router bahwa Anda memiliki  child Routes didefinisikan dalam komponen DemoPage.

RouteData

Rute dapat berisi parameter url, tapi router menawarkan mekanisme kedua untuk melewati data ke komponen router melalui RouteData. RouteData mendefinisikan data yang dapat disuntikkan ke dalam komponen rute dan diakses oleh kunci. Sampel di bawah ini menunjukkan bagaimana mendefinisikan RouteData dan menyuntikkan ke komponen.

Lazy loaded routes

Router juga tempat alami untuk memfasilitasi lazy loading komponen. Di sudut 2.0 cara untuk kawat komponen dimuat malas adalah melalui async rute. Contoh di atas menunjukkan bagaimana untuk mendirikan sebuah async rute yang akan menunda pemuatan komponen sampai dengan ditetapkan dikunjungi. Untuk membantu merampingkan pemuatan async komponen Saya telah menambahkan ComponentHelper sederhana.

Router-router stopkontak dan link

Router baru ini berbeda dari UI-router, tetapi beberapa konsep masih akan terbiasa. Alih-alih ui-sref dan ui-view – kami sekarang memiliki bagian counter baru di Link router dan router-gerai. Saya telah menambahkan contoh sederhana di bawah ini:

Selesai 🙂


banner-jarhost

JaringanHosting.com adalah provider ASP.NET dan Windows hosting No #1 di Indonesia. Web Hosting kami mendapatkan Microsoft Spotlight Award dari Microsoft dan ini berdasarkan pada beberapa persyaratan utama, yaitu: WebMatrix, WebDeploy, Visual Studio 2015, ASP.NET 4.6, ASP.NET MVC 6, Silverlight 5 and Visual Studio Lightswitch.

 

 

Leave a Reply