Menggunakan perutean AngularJS dengan aplikasi web satu halaman

Saya membaca tentang perutean sudutJS. Saya ingin menerapkannya di aplikasi web saya, tetapi sayangnya saya memiliki situasi yang agak sulit untuk mengubah perutean sekarang. Beginilah cara aplikasi saya bekerja sekarang (dan saya tahu ini mungkin tidak sebagaimana mestinya, tetapi berhasil):

Saya memiliki satu pengontrol untuk seluruh aplikasi. Tampilan dibangun dengan beberapa div, salah satunya adalah div menu. Yang lain adalah pandangan 'sebagian' seperti yang disebut oleh AngularJS. Namun masalah yang saya lihat di sini adalah dua tampilan sebagian saya dapat ditampilkan secara bersamaan (halaman dibuat seperti ini, tampilan sebagian hanya mengambil sebagian dari halaman itu sendiri).

Jadi yang saya lakukan adalah: Saya mengklik tombol pada menu -> satu tampilan sebagian muncul (ng-show), lalu saya dapat mengklik sesuatu pada tampilan sebagian ini untuk membuka tampilan sebagian kedua pada halaman yang sama (menu dan parsial pertama harus tetap apa adanya).

Saat ini saya menyertakan sebagian dalam beberapa div dengan penyertaan php (yang saya yakin dengan cara yang salah) dan div tersebut memiliki ng-show sehingga tidak ada yang ditampilkan di awal. Lalu saya memanipulasi semua klik di menu dengan mengatur parameter ng-show dari semua bagian (tampilan) saya. Jadi jika satu tombol diklik saya menyembunyikan tombol lainnya (dengan ng-klik dan fungsi di dalam pengontrol). Tapi ini adalah pekerjaan yang membosankan dan bukan cara AngularJS dan itulah mengapa saya menanyakan pertanyaan ini di sini.

Contoh sebagian yang saya sertakan (dihapus dari semua kelas css yang tidak perlu, dll):

<div ng-show="showNames">
    <?php include_once("views/AREA1/names.php") ?>  
</div>

Dan name.php misalnya hanya memiliki beberapa elemen dengan ng-repeat dan arahan AngularJS lainnya… Saya memiliki banyak penyertaan seperti itu dan mereka bekerja dengan sangat baik hanya dengan manipulasi ng-show. Namun sekarang setelah saya memahami beberapa konsep AngularJS, saya menyadari bahwa saya melakukan kesalahan…

Singkatnya: bagaimana saya bisa menggunakan rute AngularJS (mungkin dengan ng-view? -Tidak perlu) untuk menampilkan tampilan dalam aplikasi web saya? (dengan mempertimbangkan situasi yang telah saya jelaskan di atas). Saya hanya ingin pengguna mengetahui "bagian halaman" apa dia pada saat tertentu.

EDIT: Saya telah melalui ini dan saya rasa saya bisa menyelesaikannya: Saya memerlukan struktur yang mirip dengan yang ada di contoh ini 2.1 Demo Online, tapi lebih jauh lagi saya harus bisa mengklik sesuatu di ng-view yang seharusnya buka tampilan lain (yang pertama harus tetap di tempatnya). Adakah yang tahu bagaimana cara mencapainya?


person trainoasis    schedule 13.02.2014    source sumber


Jawaban (2)


Dengan menggunakan fitur routing di AngularJS, konten html ng-view akan diganti seluruhnya dengan sebagian yang baru. Anda tidak boleh menggunakan ng-view untuk tujuan seperti menampilkan beberapa bagian secara bersamaan.

Tapi Anda bisa memikirkan untuk mencampur ng-view dan ng-include.

Katakanlah, kita mengklik setiap item pada menu, ng-view mengubah sub-partial, Anda dapat memiliki ng-include di sub-partial yang kita dapat semuanya di sini seperti sub-sub-partial.

Coba baca ng-include

person Howard    schedule 13.02.2014
comment
hm mencoba ng-include tetapi itu menciptakan $scope baru dan dengan demikian membuat lebih banyak masalah daripada menyelesaikannya? - person trainoasis; 20.02.2014
comment
Maaf, mungkin terlambat untuk menjawab Anda. Ini demo Plunker dari saya, tunjukkan cara menggunakan ng-include untuk memasukkan subhalaman, plnkr .co/edit/bvr6764VR3Iq8AUO1Urh?p=info - person Howard; 25.02.2014
comment
Dan ya, ng-include akan membuat scope baru. Masalah apa yang Anda hadapi? Lebih baik memberi plunker. Kemudian kita bisa menyelesaikan masalah tersebut berdasarkan kasus nyata. - person Howard; 26.02.2014

AngularJS memiliki ng-view yang akan berisi tema utama konteks saat ini, elemen UI lainnya semuanya dikelola oleh ng-include. Rute juga berfungsi sinkron dengan nv-view.

Jika kebutuhan tampilan Anda rumit, lihat komponen ui-router yang mendukung berbagai kombinasi.

person Chandermani    schedule 13.02.2014
comment
Hmm, itu terlihat agak rumit. Ng-include membuat $scope baru dan itu sedikit mengganggu saya. Saya masih belum tahu cara mulai menerapkan perutean ke aplikasi saya - person trainoasis; 20.02.2014
comment
Di dalam sebagian Anda yang dirender di ng-view, Anda selalu dapat menambahkan bagian yang disembunyikan secara default dan berdasarkan klik, ditampilkan. Anda dapat menggunakan ng-if atau ng-show\hide untuk melakukan ini. - person Chandermani; 21.02.2014
comment
Tapi kemudian saya tidak memiliki url khusus untuk sub-halaman yang diklik ini yang saya inginkan jika saya ingin melakukan perutean. Saat ini saya memiliki ng-show/hide untuk memanipulasi seluruh halaman, yang berfungsi dengan baik - satu-satunya hal adalah saya tidak bisa membuka halaman tertentu dengan url tetapi hanya dengan mengklik untuk sampai ke sana - person trainoasis; 21.02.2014
comment
Ya dan itulah mengapa saya meminta Anda untuk memeriksa ui-router. Satu lagi yang menurut saya bisa saya sarankan adalah menggunakan querystring dengan rute untuk sub tampilan. Dalam hal ini Anda dapat menyetel reloadOnSearch dalam kumpulan rute $routeProvider ke false. Apa yang akan terjadi kemudian adalah tampilan utama tidak akan ditukar, dan Anda mendapatkan parameter tambahan dari url. - person Chandermani; 21.02.2014
comment
Saya tidak ingin menggunakan ui-router karena seharusnya sedang dalam tahap pengembangan yang berat dan bukan untuk penggunaan produksi (sayangnya)… bagaimanapun juga saya melihat saya memiliki situasi yang agak sulit di sini ehh. terima kasih atas jawaban Anda. Saya akan mencoba melakukan penelitian lebih lanjut - person trainoasis; 21.02.2014