Bisakah AI memigrasikan ng-view ke outlet router Angular?

Secara garis besar, alat AI mengkonversi tabel rute menjadi array Angular Routes dan mengganti ng-view dengan router-outlet. Namun, controller masih harus ditulis ulang sebagai komponen secara manual.

AngularJS ng-lihat dengan Contoh

⚡ Ringkasan Cerdas

View di AngularJS memungkinkan satu halaman untuk mengganti kontennya alih-alih berpindah ke halaman lain, yang membuat aplikasi satu halaman terasa instan. Direktif ng-view menandai wilayah yang digantikan oleh setiap rute dengan template dan controllernya sendiri.

🪟 Placeholder Tunggal: Satu elemen yang membawa ng-view menandai tempat setiap template yang dirutekan disuntikkan, dan hanya satu elemen seperti itu yang diizinkan per halaman.
🔗 Pencocokan Rute: Setiap rute menyebutkan templateUrl dan controller, yang mengikat markup dan logika bersama untuk tampilan tersebut.
📦 Ketergantungan Modul: Views memerlukan angular-route.js ditambah dependensi yang dideklarasikan pada modul ngRoute.
🎯 Tampilan Bawaan: Klausul otherwise akan mengalihkan alamat yang tidak cocok, yang merupakan alamat yang menampilkan tampilan saat pertama kali dimuat.
🌐 Server yang dibutuhkan: Template diambil melalui HTTP, jadi halaman harus disajikan dan bukan dibuka dari sistem file.
⚠️ Status Dukungan: AngularJS mencapai akhir masa pakainya pada 31 Desember 2021 dan tidak menerima pembaruan keamanan lebih lanjut.

Baca Selengkapnya

Situs-situs terkenal seperti Gmail Gunakan konsep Single Page Application (SPA). Ketika pengguna meminta halaman yang berbeda, aplikasi tidak akan beralih ke halaman lain; aplikasi menampilkan tampilan halaman baru di dalam halaman yang sudah ada, sehingga pengguna merasa seolah-olah tidak pernah meninggalkan halaman tersebut. Hal yang sama dicapai di AngularJS dengan menggunakan view bersama dengan route.

⚠️ Pemberitahuan dukungan: AngularJS telah mencapai akhir hayat pada 31 Desember 2021 dan tidak menerima patch atau perbaikan keamanan lebih lanjut. Arahan di bawah ini tetap akurat untuk memelihara aplikasi AngularJS 1.x yang ada; dalam versi modern Kaku yang setara adalah <router-outlet>.

Apa itu Pemandangan?

Tampilan (view) adalah konten yang ditampilkan kepada pengguna. Apa pun yang ingin dilihat pengguna, tampilan aplikasi yang sesuai akan ditampilkan.

Menggabungkan tampilan dan rute membagi aplikasi menjadi tampilan logis dan mengikat setiap tampilan ke suatu elemen. pengawasyang membuat aplikasi lebih mudah dikelola.

Misalkan sebuah aplikasi pemesanan di mana pelanggan dapat melihat pesanan dan melakukan pemesanan baru. Diagram di bawah ini menunjukkan bagaimana aplikasi tersebut menjadi aplikasi satu halaman (single page application).

Alih-alih dua halaman web terpisah, satu untuk “Lihat Pesanan” dan satu untuk “Pesanan Baru”, AngularJS menggunakan dua tampilan pada halaman yang sama, yang diakses melalui dua tautan referensi, #show ke #new:

Menavigasi ke MyApp/#show Menampilkan tampilan "Lihat Pesanan" tanpa meninggalkan halaman. Hanya bagian halaman yang sedang aktif yang akan dimuat ulang.
Menavigasi ke MyApp/#new Hal yang sama berlaku untuk tampilan Pesanan Baru.

Memisahkan aplikasi ke dalam beberapa tampilan seperti ini membuatnya mudah dikelola dan diubah, dan setiap tampilan memiliki pengontrol yang sesuai yang menampung logika bisnis untuk fungsi tersebut.

Petunjuk ng-view di AngularJS

The ngLihat Direktif melengkapi $route layanan dengan menyertakan template yang telah di-render dari rute saat ini ke dalam file layout utama, biasanya index.html.

Setiap kali rute saat ini berubah, tampilan yang disertakan juga berubah sesuai dengan perubahan tersebut. $route konfigurasi, tanpa halaman itu sendiri dimuat ulang. rute dibahas secara terpisah; di sini fokusnya adalah menambahkan beberapa sudut pandang.

Diagram alur di bawah ini menunjukkan keseluruhan proses, yang kemudian dijelaskan langkah demi langkah dalam contoh tersebut.

Bagaimana Mengimplementasikan ng-view di AngularJS

Contoh ini menyajikan dua pilihan kepada pengguna: menampilkan acara, dan menambahkan acara. Mengklik Tambahkan Acara Gambar tersebut menunjukkan tampilan Tambah Acara, dan hal yang sama berlaku untuk Tampilkan Acara.

Langkah 1) Sertakan file angular-route sebagai referensi skrip. File ini diperlukan untuk menggunakan beberapa rute dan tampilan, dan tersedia di situs AngularJS.

Langkah 2) Tambahkan tag href dan tag div.

Tambahkan tag href yang mengarah ke “Tambahkan Acara Baru” dan “Tampilkan Acara”.
Tambahkan elemen div yang berisi ng-view Direktif untuk menandai area tampilan. Tampilan yang sesuai akan disisipkan di sana setiap kali salah satu tautan diklik.

Langkah 3) Di dalam tag script AngularJS, tambahkan konfigurasi routing.

Saat pengguna mengklik Acara Baru tautan, AngularJS memuat add_event.html, menyuntikkan markup-nya ke dalam tampilan, dan menggunakan AddEventController untuk logika bisnis.
Saat pengguna mengklik Acara Tampilan tautan, sedang dimuat show_event.html dan menggunakan ShowDisplayController.
The otherwise Klausul ini menetapkan tampilan default yang ditampilkan kepada pengguna, yang di sini adalah DisplayEvent.

Langkah 4) Tambahkan controller untuk memproses logika bisnis untuk kedua fungsi tersebut. Masing-masing controller hanya mengatur pesan pada objek scope-nya, yang akan ditampilkan saat view yang sesuai ditampilkan.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>
</head>
<body ng-app="sampleApp">

<h1>Guru99 Global Event</h1>

<div class="container">
    <ul>
        <li><a href="#!/NewEvent">Add New Event</a></li>
        <li><a href="#!/DisplayEvent">Display Event</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var app = angular.module('sampleApp', ["ngRoute"]);

    app.config(function($routeProvider) {
        $routeProvider
            .when("/NewEvent", {
                templateUrl: "add_event.html",
                controller: "AddEventController"
            })
            .when("/DisplayEvent", {
                templateUrl: "show_event.html",
                controller: "ShowDisplayController"
            })
            .otherwise({
                redirectTo: '/DisplayEvent'
            });
    });

    app.controller("AddEventController", function($scope) {
        $scope.message = "This is to Add a new Event";
    });

    app.controller("ShowDisplayController", function($scope) {
        $scope.message = "This is to display an Event";
    });
</script>

</body>
</html>

⚠️ Tiga koreksi pada daftar asli. Pertama, tautannya berbunyi #!NewEvent tanpa garis miring sementara rute dideklarasikan sebagai /NewEvent, jadi tidak ada yang cocok. Mulai dari AngularJS 1.6, awalan hash default adalah !, yang menjadikan alamatnya benar #!/NewEvent — garis miring setelah tanda seru. Kedua, ShowDisplayController Atur pesan menjadi “Ini menampilkan sebuah Acara”, tanpa kata untuk bahwa teks di sekitarnya mengutip. Ketiga, lib/bootstrap.js Dimuat dari jalur relatif yang tidak mengarah ke mana pun dan tidak pernah digunakan, jadi telah dihapus.

Langkah 5) Buat halaman-halaman tersebut add_event.html ke show_event.htmlMasing-masing berisi header dan ekspresi yang menampilkan pesan yang disuntikkan oleh pengontrolnya.

tambahkan_event.html

<h2>Add New Event</h2>

{{message}}

tampilkan_acara.html

<h2>Show Event</h2>

{{message}}

Jika kode berhasil dieksekusi, output berikut akan ditampilkan di browser.

Keluaran:

Kesalahan Umum ng-view dan Cara Memperbaikinya

Hampir setiap kegagalan ng-view berasal dari pengaturan modul, format alamat, atau cara halaman disajikan, bukan dari direktif itu sendiri.

Area pandang tetap kosong: itu ngRoute modul tidak tercantum sebagai dependensi, atau angular-route.js tidak dimuat. Keduanya diperlukan, dan skrip harus diletakkan setelahnya. angular.min.js.
Tautan mengubah alamat tetapi tidak ada yang ditampilkan: href tidak sesuai dengan rute. Mulai dari AngularJS 1.6, alamat perlu diubah. #!/Route; kode lama yang ditulis untuk versi 1.5 digunakan #/Route.
Templat gagal dimuat dengan kesalahan CORS: Halaman tersebut dibuka langsung dari disk. Sajikan melalui HTTP, karena... templateUrl File tersebut diambil melalui permintaan AJAX dan diblokir oleh protokol file.
Hanya tampilan terakhir yang ditampilkan: Lebih dari satu elemen membawa ng-view. AngularJS hanya mengizinkan satu area tampilan per halaman.
Tidak ada yang muncul saat pemuatan pertama: tidak otherwise Klausul tersebut dikonfigurasi, sehingga alamat kosong tidak cocok dengan rute apa pun.

Pertanyaan Umum Demo Slot

Tidak. ngRoute hanya mendukung satu area tampilan per halaman. Untuk beberapa area bernama sekaligus, gunakan pustaka ui-router, yang menyediakan ui-view dan mendukung tampilan bersarang dan tampilan sejawat.

Aktifkan mode HTML5 dengan $locationProvider.html5Mode(true) dan menambahkan tag dasar. Server kemudian harus menulis ulang jalur yang tidak dikenal ke index.html, jika tidak, penyegaran akan menghasilkan kesalahan 404.

Sebagian besar. AI Alat ini mengkonversi tabel rute menjadi array Rute Angular dan mengganti ng-view dengan router-outlet. Controller masih harus ditulis ulang sebagai komponen secara manual.

Asisten AI dengan cepat memeriksa tiga penyebab umum: ketergantungan ngRoute yang hilang, awalan hash yang tidak sesuai dengan rute, dan jalur template yang tidak dapat diambil oleh browser.

Ya. Tambahkan resolve memblokir rute. AngularJS menunggu hingga promise tersebut selesai sebelum membuat instance controller, yang menghindari tampilan kosong yang berkedip-kedip saat data tiba.