Pengenalan kepada penghala baru futuristik di AngularJS

mata utama

AngularJS meningkatkan keupayaan penghalaannya dengan penghala baru yang sedang dibangunkan di Angular 2 dan akan dibalikkan ke sudut 1.4. Router ini menyelesaikan batasan modul Ngroute, seperti ketidakupayaan untuk menyokong senario kompleks seperti pandangan bersarang, pandangan selari, atau urutan pandangan.
Penghala baru memudahkan penciptaan penghalaan, membolehkan navigasi antara templat dan membolehkan pengurusan pelbagai pandangan selari pada halaman. Ia juga menyediakan kawalan fleksibel ke atas kitaran hayat komponen, yang membolehkan pemintasan dan kawalan navigasi.
Walaupun masih dalam pembangunan, penghala baru patut dicuba kerana ia berjanji untuk memudahkan peralihan ke sudut 2 dan direka untuk mengendalikan senario aplikasi yang kompleks dengan cekap.

AngularJS adalah salah satu kerangka MV* JavaScript yang paling popular dan digunakan secara meluas untuk membina aplikasi satu halaman (SPA). Salah satu ciri yang paling mencabar dalam spa adalah laluan. Routing pelanggan melibatkan perubahan sebahagian pandangan dan membuat penyertaan dalam sejarah navigasi pelayar. Sebagai rangka kerja pelanggan yang berfungsi sepenuhnya, AngularJS sentiasa menyokong penghalaan melalui modul NGROUTE. Walaupun ini cukup baik untuk penghalaan asas, ia tidak menyokong senario yang lebih kompleks seperti pandangan bersarang, pandangan selari, atau urutan pandangan.

Router Angular 2 baru sedang dalam pembangunan dan akan dibalikkan ke sudut 1.4. Dalam artikel ini, kita akan belajar bagaimana untuk menentukan laluan menggunakan penghala baru dan bagaimana ia menyelesaikan beberapa masalah yang tidak dapat diselesaikan oleh Ngroute.

Seperti yang dinyatakan sebelum ini, perkembangan penghala baru masih dijalankan pada masa penulisan, dan beberapa API mungkin berubah kemudian. Pasukan sudut belum menamakan penghala baru, jadi kini dipanggil penghala masa depan.

Batasan ngroute

ngroute tidak dicipta dengan aplikasi perusahaan yang kompleks dalam fikiran. Saya secara peribadi melihat beberapa aplikasi di mana bahagian -bahagian tertentu halaman perlu dimuatkan dalam beberapa langkah. Aplikasi sedemikian boleh dibina menggunakan NGROUTE, tetapi hampir mustahil untuk mempunyai keadaan URL untuk setiap perubahan yang digunakan untuk pandangan.

Arahan

ng-view hanya boleh digunakan sekali dalam satu contoh arahan NG-app. Ini menghalang kita daripada membuat laluan selari kerana kita tidak dapat memuat dua pandangan selari pada masa yang sama.

Lihat templat yang diberikan di dalam NG-View tidak dapat mengandungi arahan NG-View yang lain. Ini menghalang kita daripada mencipta pandangan bersarang.

Penghala baru menyelesaikan masalah ini dan menyediakan cara yang fleksibel untuk menentukan dan menggunakan penghalaan. Penghala baru juga menggunakan "pengawal sebagai" sintaks. Saya sangat mengesyorkan menggunakan "pengawal sebagai" sintaks kerana ini adalah salah satu konvensyen yang harus anda ikuti hari ini dalam menyediakan Angular 2.

Buat laluan mudah

Penghala baru dicipta dengan Angular 2 dalam fikiran. Angular 2 akan memudahkan suntikan pergantungan dengan menghapuskan fasa konfigurasi modul, yang bermaksud kita tidak perlu menulis blok konfigurasi untuk menentukan laluan - kita boleh menentukannya di mana -mana sahaja.

Setiap laluan yang akan ditambah ke penghala baru mengandungi dua bahagian:

• Path: URL Templat Routing
• Komponen: gabungan templat dan pengawal. Dengan konvensyen, kedua -dua pengawal dan templat mesti dinamakan selepas komponen

Routing dikonfigurasi menggunakan perkhidmatan $router. Oleh kerana $router adalah perkhidmatan, kami boleh menentukan laluan di mana sahaja dalam aplikasi (kecuali dalam pembekal atau blok konfigurasi). Walau bagaimanapun, kita perlu memastikan bahawa kod blok yang menentukan laluan dilaksanakan dengan segera selepas beban aplikasi. Sebagai contoh, jika laluan ditakrifkan dalam pengawal (kami akan melakukannya tidak lama lagi), pengawal mesti dilaksanakan apabila halaman dimuat. Jika ia ditakrifkan dalam perkhidmatan, kaedah perkhidmatan mesti dilaksanakan dalam blok larian.

Navigasi antara templat

mari kita tentukan dua laluan mudah dan gunakan penghala baru untuk menavigasi di antara mereka. Jika anda ingin terus menggunakan kod ini, anda perlu mendapatkan salinan penghala baru anda. Tolong beritahu saya bagaimana untuk melakukannya .

Anda boleh memasang penghala baru pada setiap projek melalui npm.

mkdir new-router && cd new-router
npm install angular-new-router

Ini akan membuat folder bernama node_modules dalam direktori projek anda. Penghala baru boleh didapati dalam node_modules/angular-baru-router/dist/router.es5.min.js. Sertakan dalam projek anda selepas AngularJS itu sendiri.

Pertama, mari kita tentukan modul dan konfigurasikan laluan:

angular.module('simpleRouterDemo', ['ngNewRouter'])
  .controller('RouteController', ['$router', function($router){
    $router.config([
      { path:'/', redirectTo:'/first' },
      { path:'/first', component:'first' },
      { path:'/second/:name', component:'second' }
    ]);

    this.name='visitor';
  }])

Pengawal dalam coretan kod di atas mentakrifkan tiga laluan. Perhatikan bahawa laluan akar mengalihkan ke templat pertama kami dan laluan ketiga menerima parameter dari URL. Seperti yang anda lihat, sintaks untuk parameter yang ditentukan adalah sama seperti Ngroute.

Seperti yang dinyatakan sebelum ini, setiap komponen memerlukan templat paparan yang sepadan dan pengawal. Dengan konvensyen, nama pengawal hendaklah menjadi nama komponen yang dihiasi dengan "pengawal" (FirstController dan SecondController dalam contoh kami). Nama templat paparan mestilah sama dengan nama komponen. Ia juga mesti berada dalam folder dengan nama yang sama dengan komponen, dalam folder bernama komponen. Ini akan memberi kita:

<code>projectRoot/
  components/
    first/
      first.html
    second/
      second.html</code>

Konvensyen ini boleh dilindungi oleh

. Kami akan melihat contoh kemudian, tetapi mari kita tetap dengan konvensyen ini buat masa ini. $componentLoaderProvider

Berikut adalah pandangan komponen pertama dan kedua yang digunakan di atas. Kami mentakrifkan mereka sejajar dengan menggunakan arahan NG-Template (jadi kami dapat mencipta demo yang boleh dilancarkan), tetapi idealnya mereka harus berada dalam fail HTML yang berasingan:

<🎜>

<🎜>

kerana pandangannya sangat mudah, pengawal juga sangat mudah:

angular.module('simpleRouterDemo')
  .controller('FirstController', function(){
    console.log('FirstController loaded');
    this.message = 'This is the first controller! You are in the first view.';
  })
  .controller('SecondController', function($routeParams){
    console.log('SecondController loaded');
    this.message = 'Hey ' + $routeParams.name + 
      ', you are now in the second view!';
  });

kerana kedua -dua pengawal dibuat untuk digunakan dengan "pengawal sebagai" sintaks, mereka tidak menerima

. $scope Perkhidmatan digunakan untuk mengambil nilai parameter yang diluluskan dalam laluan. $routeParams

Sekarang, kita perlu memuatkan pengawal ini untuk mendaftarkan laluan:

mkdir new-router && cd new-router
npm install angular-new-router

Akhirnya, kita perlu menghubungkan laluan ini dan memuatkannya ke dalam halaman. Router baru membawa Arahan NG-Link dan Arahan NG-Viewport, yang menghubungkan pandangan dan memuatkan templat masing-masing. Arahan NG-Viewport adalah serupa dengan NG-View;

coretan kod berikut menunjukkan bagaimana arahan ini digunakan:

angular.module('simpleRouterDemo', ['ngNewRouter'])
  .controller('RouteController', ['$router', function($router){
    $router.config([
      { path:'/', redirectTo:'/first' },
      { path:'/first', component:'first' },
      { path:'/second/:name', component:'second' }
    ]);

    this.name='visitor';
  }])

(Bahagian seterusnya, mengenai pandangan selari, pengurusan kitaran hayat komponen dan kesimpulan, disebabkan oleh batasan ruang, mereka ditinggalkan di sini. Bahagian lain teks asal boleh ditulis semula seperti yang diperlukan.)

Atas ialah kandungan terperinci Pengenalan kepada penghala baru futuristik di AngularJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!