Cara Menulis Kod Modular dengan Pandangan Ui-Router & Nenam Sudut

mata teras

Angular UI Router adalah alat yang berkuasa untuk menguruskan negeri -negeri yang berbeza dalam aplikasi web yang kompleks, memberikan lebih banyak kawalan ke atas setiap pandangan daripada pelaksanaan routing angularjs asli. Ia menggunakan notasi DOT untuk menentukan keadaan kanak -kanak dalam keadaan induk dan menggunakan nama mutlak untuk mengawal di mana bahagian -bahagian tertentu aplikasi web dipaparkan, membolehkan reka bentuk aplikasi modular.
Penghala UI membolehkan pemaju untuk menentukan objek
• dalam $stateProvider yang mentakrifkan nama pandangan dan laluannya ke templat. Pandangan yang tidak dinamakan menunjuk kepada keadaan induk (dipanggil penamaan relatif). Pandangan yang dinamakan Gunakan sintaks views untuk memetakan komponen ke keadaan tertentu (dipanggil penamaan mutlak). @
Penamaan mutlak menjadikan kod ini sangat modular, yang membolehkan pemaju menggunakan semula templat sepanjang aplikasi mereka atau dalam projek masa depan. Ia juga memudahkan cara menggunakan komponen aplikasi web yang berbeza, seperti tajuk dan footer, sehingga menjimatkan masa dan usaha.

Menulis ringkas, kod modular adalah salah satu konsep yang paling penting dalam pembangunan web, terutamanya apabila pasukan bekerjasama untuk membangunkan aplikasi yang sangat kompleks. Rangka kerja sudut direka untuk membuat aplikasi lanjutan yang dengan cepat dapat menjadi sangat kompleks, yang seterusnya membuat kod modular menulis lebih penting lagi. Angular UI Router adalah alat yang boleh membantu anda mencapai ini, dan ia direka untuk membantu menguruskan keadaan yang berbeza dari aplikasi web anda. Ia memberi anda kawalan sepenuhnya ke atas setiap pandangannya berbanding dengan pelaksanaan penghalaan AngularJS asli.

Jika anda telah menggunakan UI-Router sebelum ini, anda mungkin tahu bagaimana untuk menentukan keadaan kanak-kanak dalam keadaan induk menggunakan notasi titik. Walau bagaimanapun, anda mungkin tidak tahu bagaimana perpustakaan UI-Router mengendalikan pandangan yang dinamakan bersarang di dalam keadaan induk. Inilah yang ingin saya jelaskan hari ini.

Saya akan menunjukkan kepada anda bagaimana UI-Router menggunakan nama mutlak untuk mengawal sepenuhnya di mana bahagian-bahagian tertentu aplikasi web muncul. Ini membolehkan anda dengan mudah menambah dan mengeluarkan bahagian antara muka yang berbeza untuk membuat aplikasi modular yang terdiri daripada komponen yang berbeza. Khususnya, saya akan menunjukkan kepada anda bagaimana untuk memetakan bar navigasi, beberapa kandungan badan, dan footer ke keadaan tertentu. Seperti biasa, kod untuk tutorial ini boleh didapati di GitHub, dan anda juga boleh mencari demo pada akhir artikel.

pemula

Luangkan masa untuk melayari fail yang membentuk demo ini (boleh didapati dalam pautan GitHub di atas). Anda dapat melihat bahawa kami mempunyai fail index.html di mana kami mempunyai perpustakaan AngularJS dan UI-ROUTER. Dalam fail ini, kami mempunyai dua arahan UI-View yang akan kami masukkan kandungan kami. Seterusnya, kami mempunyai fail app.js yang akan mengandungi kod untuk aplikasi sudut kami, serta direktori templat. Direktori ini akan digunakan untuk menampung semua pandangan kami yang berbeza. Walaupun folder ini tidak diperlukan, ia benar -benar adalah kepentingan terbaik anda untuk menggunakan beberapa struktur apabila membina aplikasi anda menggunakan Angular. Seperti yang anda lihat, saya memasukkan folder aset di dalam folder Templat. Di sinilah saya suka menyimpan komponen yang boleh diguna semula: header, bar navigasi, footer, dll. Saya fikir anda mungkin mendapati konvensyen ini berguna kerana ia menjadikan kod anda sangat modular.

ui-router

tambah kebergantungan ke ui-router

mari kita mulakan mengkonfigurasi permohonan kami. Dalam fail app.js kami, kami perlu menambah kebergantungan pada ui-router ke modul sudut utama kami.

angular.module('app', ['ui.router'])

Konfigurasi laluan kami

Selepas selesai, kami boleh terus mengkonfigurasi objek konfigurasi aplikasi. Di sini kita akan berurusan dengan $stateProvider dan $urlRouterProvider, jadi kita perlu menyuntik mereka ke dalam objek konfigurasi kita untuk menggunakannya.

Seterusnya, kami ingin lulus URL dari halaman halaman rumah ke $urlRouterProvider.otherwise() supaya ia memetakan permohonan kami ke negeri ini secara lalai. Kemudian kita perlu menggunakan $stateProvider, yang akan menjadi apa yang akan kita hadapi dalam tutorial ini. $stateProvider adalah alat yang disediakan oleh UI-Router untuk pemaju untuk digunakan semasa aplikasi penghalaan. Status sepadan dengan "kedudukan" keseluruhan aspek UI dan navigasi dalam permohonan. Status menggambarkan UI di lokasi dan fungsinya. Ia berfungsi dengan cara yang sama seperti NGROUTE menggunakan RouteProvider.

Berikut adalah apa fail app.js harus kelihatan seperti pada masa ini. Selepas mengkonfigurasi urlRouterProvider, kami menggunakan $stateProvider untuk menentukan keadaan yang berbeza dari aplikasi. Dalam contoh ini, kita menentukan keadaan yang dipanggil rumah dan hanya mengkonfigurasi URL.

angular.module('app', ['ui.router'])
  .config(['$stateProvider', '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/');
      $stateProvider
      .state('home', {
        url: '/'
      });
    }
  ]);

Pandangan Objek

Sekarang bahawa anda telah menubuhkan rangka kerja asas, anda perlu menentukan objek $stateProvider dalam views. Ia harus mengikuti URL di negeri asal. Dalam objek ini, kita akan menentukan nama -nama pandangan dan laluan templat mereka. Di sini anda juga boleh menentukan perkara -perkara seperti pengawal;

Seterusnya, kita mesti terlebih dahulu membuat pandangan yang tidak dinamakan yang akan menunjuk kepada keadaan induk -dalam rumah ini. Pandangan yang tidak dinamakan ini akan menghubungkan kedua -duanya. Ini dipanggil penamaan relatif dan memberitahu Angular untuk memasukkan pandangan yang tidak dinamakan ini ke dalam templateUrl dalam fail index.html kami. Kod anda kini harus menyalin app.js di bawah. <div ui-view="">

angular.module('app', ['ui.router'])

Seperti yang anda lihat, pandangan yang tidak dinamakan menyelesaikan main.html, yang sepatutnya sama dengan kod di bawah.

Fail main.html mengandungi tiga pandangan bernama - NAV, BODY, dan FOOTER. Agar komponen ini muncul di negeri asal, kita mesti menentukan mereka dengan penamaan mutlak. Khususnya, kita mesti menggunakan sintaks

angular.module('app', ['ui.router'])
  .config(['$stateProvider', '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/');
      $stateProvider
      .state('home', {
        url: '/'
      });
    }
  ]);

untuk memberitahu aplikasi AngularJS bahawa komponen -komponen ini harus dipetakan ke keadaan tertentu. Ini mengikuti sintaks viewName@statename dan memberitahu permohonan kami untuk menggunakan pandangan yang dinamakan dari

mutlak @ atau keadaan tertentu. Anda boleh membaca lebih lanjut mengenai nama relatif vs nama mutlak di sini. anda akan melihat bahawa

digunakan dalam objek konfigurasi kami untuk memastikan bahawa sudut mengetahui bahawa pandangan kami yang dinamakan menunjuk kepada negara asal kami. Jika nama -nama mutlak ini tidak wujud, permohonan itu tidak akan tahu di mana untuk mencari pandangan yang dinamakan ini. Iaitu, periksa di bawah dan lihat bagaimana permohonan itu harus dialihkan.

@home

angular.module('app', ['ui.router'])
  .config(['$stateProvider', '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/');
      $stateProvider
        .state('home', {
          url: '/',
          views: {
            '': { 
              templateUrl: './templates/main.html' 
            },
          }
        });
     }
   ]);

(demonstrasi codepen harus dimasukkan di sini)

Mengapa ini hebat

> Seperti yang saya katakan sebelum ini, penamaan mutlak menjadikan kod anda sangat modular. Dalam tutorial ini, saya meletakkan semua pandangan kami dalam folder Templat. Walau bagaimanapun, anda boleh melangkah lebih jauh dan membuat folder untuk pandangan yang berbeza mengenai aplikasi anda. Ini membolehkan anda menggunakan semula templat sepanjang aplikasi serta dalam projek masa depan! Perpustakaan UI-Router menjadikannya sangat mudah untuk menggunakan komponen aplikasi web yang berbeza, seperti header dan footer pandangan tertentu. Ini akan menjadikan kod penggunaan semula dalam projek yang berbeza dan pasti akan menjimatkan masa anda.

Kesimpulan

Anda boleh menggunakan nama mutlak untuk bersarang yang lebih kompleks, lebih tinggi-ini hanya contoh! Walau bagaimanapun, saya harap anda mempunyai pemahaman yang lebih mendalam tentang beberapa perkara yang dapat dicapai oleh router UI. Dalam artikel ini oleh Antonio Morales, beliau menerangkan perbezaan antara penamaan mutlak dan penamaan relatif, substasi, dan aspek lain dari perpustakaan UI-Router Angular. Seperti biasa, beritahu saya jika anda mempunyai sebarang soalan mengenai tutorial ini. Saya suka menjawabnya.

Soalan Lazim Mengenai Menulis Kod Modular Menggunakan Router UI Angular dan Nenam Pandangan

Apakah penghala UI sudut dan bagaimana ia berbeza dengan penghala sudut standard?

Angular UI Router adalah rangka kerja routing yang fleksibel untuk AngularJs yang menyediakan ciri -ciri yang tidak terdapat dalam penghala sudut standard. Ia membolehkan pandangan bersarang dan pelbagai pandangan bernama, manakala penghala sudut standard hanya menyokong satu pandangan setiap url. Ini menjadikan Router UI Angular sebagai alat yang kuat untuk membina aplikasi kompleks dan berskala besar.

bagaimana untuk menyediakan penghala UI sudut dalam projek saya?

Untuk menyediakan penghala UI sudut, anda perlu memasukkan skrip penghala UI sudut dalam fail HTML. Kemudian, anda perlu menambah "UI.Router" sebagai kebergantungan modul dalam aplikasi AngularJS anda. Selepas itu, anda boleh mengkonfigurasi status anda menggunakan $stateProvider dan tetapkan status lalai menggunakan $urlRouterProvider.

Apa yang dinamakan pandangan dalam penghala UI sudut dan bagaimana anda menggunakannya?

Paparan Nama adalah ciri penghala UI sudut yang membolehkan anda memberikan nama kepada pandangan. Ini membolehkan anda mempunyai banyak pandangan setiap URL, yang sangat berguna dalam aplikasi kompleks. Untuk menggunakan pandangan yang dinamakan, anda perlu memasukkan arahan "U-View" dalam fail HTML dan memberikan nama. Anda kemudian boleh merujuk nama ini dalam konfigurasi negeri.

Bagaimana untuk menavigasi antara negeri -negeri dalam penghala UI sudut?

anda boleh menggunakan kaedah $state.go() untuk menavigasi antara negeri -negeri dalam penghala UI sudut. Kaedah ini mengambil nama negeri sebagai parameter, dan secara pilihan mengambil objek parameter negara sebagai parameter. Anda juga boleh menggunakan arahan UI-SREF dalam fail HTML untuk membuat pautan ke negeri.

bagaimana untuk lulus parameter ke negeri dalam penghala UI sudut?

anda boleh lulus parameter ke negeri dalam penghala UI sudut dengan memasukkannya dalam konfigurasi negeri. Anda kemudian boleh mengakses parameter ini dalam pengawal menggunakan perkhidmatan $stateParams.

bagaimana menangani perubahan keadaan dalam penghala UI sudut?

anda boleh menggunakan peristiwa $stateChangeStart dan $stateChangeSuccess untuk mengendalikan perubahan keadaan dalam penghala UI sudut. Acara -acara ini disiarkan di $rootScope dan boleh didengarkan di dalam pengawal anda.

bagaimana menghuraikan data sebelum mengaktifkan keadaan dalam penghala UI sudut?

anda boleh menghuraikan data sebelum mengaktifkan keadaan dalam penghala UI sudut menggunakan harta resolve dalam konfigurasi status. Harta ini adalah objek yang mentakrifkan sebarang kebergantungan yang perlu dihuraikan sebelum keadaan diaktifkan.

Bagaimana menangani kesilapan dalam penghala UI sudut?

anda boleh menggunakan acara $stateChangeError untuk mengendalikan kesilapan dalam penghala UI sudut. Acara ini disiarkan pada $rootScope dan boleh didengarkan di dalam pengawal anda.

Bagaimana menggunakan pandangan bersarang dalam penghala UI sudut?

Anda boleh menggunakan pandangan bersarang dalam penghala UI sudut dengan memasukkan arahan "U-View" dalam fail HTML dan memberikan nama itu. Anda kemudian boleh merujuk nama ini dalam konfigurasi negeri.

Bagaimana menggunakan pelbagai pandangan bernama dalam penghala UI sudut?

Anda boleh menggunakan pelbagai pandangan bernama dalam penghala UI sudut dengan memasukkan arahan "U-View" dalam fail HTML dan memberikan nama yang berbeza. Anda kemudian boleh merujuk nama -nama ini dalam konfigurasi negeri.

Atas ialah kandungan terperinci Cara Menulis Kod Modular dengan Pandangan Ui-Router & Nenam Sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!