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:
|
1 |
import {HTTP_PROVIDERS} from 'angular2/http'; import {Component, provide} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser'; import{DemoPage} from './demo-page'; import{About} from './components/about/about'; import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router'; import {ROUTER_DIRECTIVES, RouteConfig, Router, Location, Route} from 'angular2/router'; @Component({ selector:'demo-app', templateUrl:'./demo-app.html', directives:[DemoPage, ROUTER_DIRECTIVES, About] }) @RouteConfig([ new Route({path:'/', component: DemoPage, name:'Home'}), new Route({path:'/demo/...', component: DemoPage, name:'Demo'}), new Route({path:'/about/:id', component: About, name:'About'}), new AsyncRoute({ path:'/lazy', loader: () => ComponentHelper.LoadComponentAsync('LazyLoaded','./components/lazy-loaded/lazy-loaded'), name:'Lazy' }) ]) class MyDemoApp { router: Router; location: Location; constructor(router: Router, location: Location) { this.router = router; this.location = location; } getLinkStyle(path) { returnthis.location.path() === path; } } class ComponentHelper{static LoadComponentAsync(name,path){ return System.import(path).then(c => c[name]); } } bootstrap(MyDemoApp,[ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy})]); |
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.
|
1 |
new Route({path: '/', component: DemoPage, name: 'Home'}) |
Langkah selanjutnya adalah untuk menentukan rute root dengan parameter menggunakan: / [parameter Nama] sintaks.
|
1 |
new Route({path: '/about/:id', component: About, name: 'About'}) |
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
|
1 |
new Route({path: '/demo/...', component: DemoPage, name: 'Demo'}) |
Dengan menentukan … sintaks Anda mengatakan router bahwa Anda memiliki child Routes didefinisikan dalam komponen DemoPage.
|
1 2 3 4 5 6 7 8 9 10 11 |
@RouteConfig([ new Route({ path: '/spreadsheet', component: Spreadsheet, name: 'Spreadsheet' }), new Route({ path: '/jquery', component: JqueryIntegration, name: 'JqueryIntegration' }), new Route({ path: '/react', component:Angular2Host, name: 'React'}), new Route({ path: '/algorithms', component:Algorithms, name: 'Algorithms'}), new Route({ path: '/address', component:AddressBook, name: 'AddressBook'}), new Route({ path: '/http', component:HttpSample, name: 'Http'}), new Route({ path: 'treeview', component:TreeViewDemo, name: 'TreeView'}), new Route({ path: 'grid', component:GridDemo, name: 'Grid'}), new Route({ path: 'input', component:InputControls, name: 'Input'}) ]) |
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.
|
1 2 3 4 5 6 7 8 9 |
@RouteConfig([ new Route({path: '/', component: About, name: 'About', data: {project: 'angular-2-samples'}}) ]) export class About { id: string; constructor(data: RouteData){ console.log(data.get('project')); } } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div> <ul class="nav navbar-nav"> <li [class.active]="getLinkStyle('')"><a [routerLink]="['/home']" class="link">Demos</a></li> <li [class.active]="getLinkStyle('#/about/Welcome')"><a [routerLink]="['/about',{'id':'Welcome'}]" class="link">About</a></li> </ul> </div> </div> </nav> </div> <router-outlet></router-outlet> |
Selesai 🙂
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.