angular.js - angularjs ui-router menukar pandangan secara dinamik kepada paparan ui yang ditentukan

Question

a.html

<p ui-view='index'></p>

b.html

<p ui-view='content'></p>

c.html

<p>content1</p>

d.html

<p>content2</p>

Acara mengikat dalam a.html mencetuskan paparan kandungan untuk bertukar kepada c.html atau d.html

Cara mengkonfigurasi konfigurasi $stateProvider
Bagaimana untuk menukar js secara manual?

Answer 1

Soalan anda tidak mempunyai maklumat kontekstual yang diperlukan, jadi saya hanya boleh bergantung pada spekulasi atau tekaan untuk menyelesaikannya

Sistem penghalaan mana-mana rangka kerja SPA adalah sama: setiap laluan sepadan dengan status aplikasi, dan perubahan dalam status aplikasi ditunjukkan dalam perubahan dalam URL sebaliknya, perubahan dalam URL akan menyebabkan perubahan dinamik dalam sistem penghalaan Muat semula keadaan aplikasi.

Dalam contoh anda, hanya terdapat kemasukan berterusan ke laluan ui-view='content', tetapi pandangan yang berbeza (c.html dan d.html) perlu memasukkannya secara dinamik, yang bermaksud c.html dan d.html Untuk sepadan dengan keadaan aplikasi yang berbeza, sistem penghalaan boleh dikemas kini secara dinamik dengan sewajarnya.

Andaikan contoh anda kelihatan seperti ini:

• Apabila /posts/show/c, ui-view='content' memaparkan c.html

• Apabila /posts/show/d, ui-view='content' memaparkan d.html

Jadi kita boleh memetakannya ke ui-router:

• state ialah posts.show

• serpihan dinamik, iaitu bahagian pembolehubah URL, sepadan dengan state dalam url, saya menamakannya :name

Pintu masuk ke

• view ialah content@posts.show

Ini sudah cukup untuk menulis kebanyakan kod:

angular.module('YourApp').config(function ($stateProvider) {

    $stateProvider.state('posts.show', {
        url: '/show/:name',
        views: {
            'content@posts.show': {
                templateUrl: /* TODO */,
                controller: ...
            }
        }
    });

});

Satu-satunya soalan yang tinggal ialah: bagaimana untuk mengemas kini :name apabila templateUrl berubah?

Seperti yang dinyatakan sebelum ini, perubahan dalam URL akan menyebabkan sistem penghalaan mengemas kini keadaan aplikasi Perubahan ini disimpan dalam objek $params dalam sistem penghalaan Kita boleh menggunakan objek ini untuk mengekstrak bahagian yang diubah dan menjana yang betul templateUrl 🎜>. Di sini saya menulis fungsi pembantu untuk melakukan ini:

angular.module('YourApp').config(function ($stateProvider) {

    $stateProvider.state('posts.show', {
        url: '/show/:name',
        views: {
            'content@posts.show': {
                templateUrl: getTemplateUrl,
                controller: ...
            }
        }
    });

    function getTemplateUrl() {
        return: 'templates/posts/' + $params.name + '.html';
    }

});

modul ui-router, templateUrl bukan sahaja menerima rentetan, tetapi juga nilai pulangan fungsi. Jadi anda boleh dapatkan:

• Apabila /posts/show/c, templateUrl ialah templates/posts/c.html

• Apabila /posts/show/d, templateUrl ialah templates/posts/d.html

Sejajar dengan itu, pautan navigasi dalam index anda bertanggungjawab untuk menukar perubahan /posts/show/:name Cara menjana pautan yang sepadan dengan serpihan dinamik terdapat dalam dokumentasi ui-router.

Answer 2

Saya rasa orang di atas membuat permainan ini terlalu rumit, bukankah lebih baik untuk menonton tutorial ui-view sahaja?