AngularJS - Multiple ng-view dalam satu template

132

Saya membangun aplikasi web yang dinamis dengan menggunakan AngularJS. Apakah mungkin untuk memiliki banyak ng-viewtemplate sekaligus?

angularjs ng-view Jayram
sumber
2
tampaknya ada permintaan tarik, masih dengan beberapa bug: github.com/angular/angular.js/pull/1198
Alp
4
Jan Varwig menulis tentang peran arahan dalam Angular. Ini bukan jawaban untuk pertanyaan Anda, tetapi untuk beberapa kasus idenya mungkin merupakan alternatif yang baik: jan.varwig.org/archive/angularjs-views-vs-directives/…
Juha Palomäki
sedang melalui tutorial sudut dan memiliki pertanyaan yang sama persis ini, mereka tidak membuat ini sangat jelas, sepertinya konsep yang cukup mendalam ..
qwwqwwq

Jawaban:

100

Anda dapat memiliki satu saja ng-view.

Anda dapat mengubah konten dalam beberapa cara: ng-include, ng-switchatau pengendali pemetaan yang berbeda dan template melalui routeProvider.

pasine
sumber
1
pengendali dan templat pemetaan akan menggantikan seluruh elemen tampilan, kan?
zx1986
9
Bagaimana dengan mengubah konten widget secara dinamis? Tidakkah Anda ingin membuat tampilan untuk widget dan pengontrol untuk widget dan model untuk widget?
Ray Suelzer
Apakah disarankan menggunakan tampilan? Bukankah lebih baik untuk mendefinisikan div dengan ng-showdan ng-hidedan untuk mengontrol visibilitas mereka menggunakan variabel? Karena kadang-kadang saya mungkin ingin menyembunyikan / menampilkan beberapa komponen
SomethingSomething
39

UI-Router adalah proyek yang dapat membantu: https://github.com/angular-ui/ui-router Salah satu fiturnya adalah Multiple Named Views

UI-Router memiliki banyak fitur dan saya sarankan Anda menggunakannya jika Anda bekerja pada aplikasi canggih.

Periksa dokumentasi Multi Named Views di sini .

Morteza Ziyae
sumber
6
Sayangnya sebagai readme ui-router mengatakan: Catatan: UI-Router sedang dalam pengembangan aktif. Karena itu, selagi pustaka ini diuji dengan baik, API dapat berubah. Pertimbangkan menggunakannya dalam aplikasi produksi hanya jika Anda merasa nyaman mengikuti changelog dan memperbarui penggunaan Anda.
trainoasis
1
@trainoasis Menggunakannya untuk beberapa proyek, Sepertinya 'sangat' stabil dan sampai sekarang saya tidak punya masalah tentang perubahan API, sebenarnya saya tidak ingat ada perubahan besar pada API.
Morteza Ziyae
19

Saya percaya Anda dapat mencapainya hanya dengan memiliki lajang ng-view. Di templat utama Anda dapat memiliki ng-includebagian untuk tampilan sub, kemudian di controller utama tentukan properti model untuk setiap sub templat. Sehingga mereka akan mengikat secara otomatis ke ng-includebagian. Ini sama dengan memiliki banyakng-view

Anda dapat memeriksa contoh yang diberikan dalam ng-include dokumentasi

dalam contoh ketika Anda mengubah template dari daftar dropdown itu mengubah konten. Di sini diasumsikan Anda memiliki satu utama ng-viewdan alih-alih memilih secara manual sub konten dengan memilih drop down, Anda melakukannya seperti ketika tampilan utama dimuat.

Tekz
sumber
2
Dengan tidak adanya solusi seperti UI-Router, ng-include memang merupakan alternatif yang layak, seperti yang telah Anda jelaskan. Yang tidak bisa dicapai oleh ng-memasukkan adalah URL (negara bagian) didorong multi tampilan, $ rute tidak dapat secara dinamis membuat tampilan berbeda berdasarkan URL saat ini. Kita dapat memutar lengan Angular dan mewujudkannya dengan menggunakan logika kustom di controller, seperti contoh dalam ng-include dokumentasi , tetapi tidak diinginkan pola arsitektur aplikasi, UI-Router adalah jenis solusi yang tepat.
Yiling
Satu plus untuk @Yiling komentar. Menggunakan ng-include adalah solusi.
Farshid Saberi
13

Menggunakan ng-viewmodul biasa, Anda tidak dapat memiliki lebih dari satu template dinamis.

Namun, proyek ini memungkinkan Anda untuk melakukannya (mencari ui-router).

ŁukaszBachman
sumber
3
angular-ui sepertinya pilihan yang baik dalam waktu dekat tetapi masih sangat tidak stabil untuk penggunaan produksi
David Barreto
8

Dimungkinkan untuk memiliki banyak atau beberapa tampilan bersarang. Tapi tidak dengan ng-view.

Modul perutean primer dalam sudut tidak mendukung banyak tampilan. Tapi Anda bisa menggunakan ui-router. Ini adalah modul pihak ketiga yang bisa Anda dapatkan melalui Github, angular-ui / ui-router, https://github.com/angular-ui/ui-router . Versi baru ngRouter (ngNewRouter) saat ini sedang dikembangkan. Saat ini tidak stabil. Jadi saya memberi Anda contoh memulai sederhana dengan ui-router. Dengan menggunakannya, Anda dapat memberi nama tampilan dan menentukan templat dan pengendali mana yang harus digunakan untuk rendering. Menggunakan $ stateProvider Anda harus menentukan bagaimana penampung tampilan harus dirender untuk keadaan tertentu.

<body ng-app="main">
    <script type="text/javascript">
    angular.module('main', ['ui.router'])
    .config(['$locationProvider', '$stateProvider', function ($locationProvider, $stateProvider) {
        $stateProvider
        .state('home', {
            url: '/',
            views: {
                'header': {
                    templateUrl: '/app/header.html'
                },
                'content': {
                    templateUrl: '/app/content.html'
                }
            }
        });
    }]);
    </script>
    <a ui-sref="home">home</a>
    <div ui-view="header">header</div>
    <div ui-view="content">content</div>
    <div ui-view="bottom">footer</div>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js">
</body>

Anda perlu merujuk angularjs, dan angular-ui.router untuk sampel ini.

$ bower install angular-ui-router
Farshid Saberi
sumber
Terima kasih Farshid ini Luar Biasa! Itu harus disebutkan dalam repositori Github angular-ui / ui-router github.com/angular-ui/ui-router di mana saya mendapatkan modul
totallytotallyamazing
Saya tidak yakin mengapa Anda harus melakukan itu. Mengapa tidak memasukkan header / footer dan melihat konten?
user441521
ng-include akan berfungsi jika file di-host, misalnya. pada nodejs. Jika bekerja dengan direktori lokal, itu akan menimbulkan kesalahan lintas domain.
Sid
0

Anda tidak dapat memiliki banyak tampilan ng. Di bawah ini adalah kasus penggunaan saya di mana saya menyelesaikan kebutuhan saya. Saya ingin memiliki tab perilaku di dialog model saya. Saya menghadapi masalah ketika klik pada tab yang memiliki hyperlink yang akan memunculkan tautan router. Saya memecahkan ini menggunakan tombol dan css untuk tab. Ketika pengguna mengklik pada tab, itu sebenarnya tidak akan memanggil hyperlink apa pun yang akan selalu memanggil ng-router. Ketika pengguna mengklik pada tab itu akan memanggil metode, di mana saya secara dinamis memuat html. Di bawah ini adalah fungsi pada klik tab

self.submit = function(form) {
                $templateRequest('resources/items/employee/test_template.html').then(function(template){
                var compiledeHTML = $compile(template)($scope);
                $("#d").replaceWith(compiledeHTML);
});

Pertanyaan Pengguna $ template. Di halaman test_template.html tambahkan konten html Anda. Konten html ini akan mengikat ke controller Anda.

Aslam anwer
sumber