Dalam belajar menggunakan Angular, ui-rute adalah salah satu kesulitan. Tidak ada masalah dengan penggunaan sederhana, tetapi ketika datang ke sarang multi-level, saya merasa bingung. Saya telah mencari banyak informasi dan menginjak banyak jebakan. Sejauh ini, saya tidak bisa mengatakan bahwa saya memiliki pemahaman komprehensif tentang ui-route; Di sini saya hanya merekam beberapa lubang yang saya isi.
1. Menggunakan Abstrak:
$ stateProvider .state ('shop', {resolve: {"shopList": function ($ http) {return $ http ({url: "/bookapp/data/shoplist.php", metode: "dapatkan"})}, abstrak: true, url: "/shop", templataur: " Pengontrol: "ShopListController"})Apa gunanya menggunakan atribut abstrak? Deskripsi Resmi: Abstrak: Benar menunjukkan bahwa keadaan ini tidak dapat diaktifkan secara eksplisit, dan hanya dapat diaktifkan secara implisit oleh sub-negara. Jika Anda tidak dapat mengaktifkan secara eksplisit, Anda tidak dapat mengakses rute negara ini secara langsung melalui "/toko". Bukankah itu jalan buntu? Apa gunanya melakukan itu? Tunggu, mari kita lihat kalimat berikutnya: itu dapat diaktifkan secara tersembunyi dalam keadaan selimut, dan tampaknya masih bisa hidup. Bagaimana cara membuatnya hidup? Mari kita lihat kode berikut:
.state ('shop.main', {url: "/: id", abstrak: true, templateUrl: "templat/shop/main2.html", controller: "shopmaincontroller"})Negara : "Shop.Main" adalah substansi toko. Menurut teorinya, Shop.Main dapat mengaktifkan toko. Kami hanya perlu mengakses: /berbelanja /1, sehingga kami dapat mengaktifkan status toko dan "shop.main"
Jangan terburu -buru. Saya akan menambahkan atribut abstrak untuk dimainkan dengan beberapa hal menarik. Mari kita lihat kode berikut di level berikutnya:
.State ('shop.main.info', {url: "", templateUrl: "templat/shop/info.html", cache: 'false', controller: "infocontroller"}) .State ('shop.main.author', {url: "/worhor", Templated: "" <main. }) .State ('shop.main.sameBook', {url: "SameBook", template: "<div> SameBookSameBookSameBookSameBook </Div>"})Saya melihat bahwa negara bagian "shop.main.info" memiliki url negara "" "jadi kita hanya perlu mengakses" Shop/1 "dengan cara ini semua substat default yang dapat digunakan sebagai" shop.main ".
Pada saat ini, hubungan bersarang modul adalah: list.html Nested Main.html, Main.html Info Nested.html. Kita dapat mengaktifkan sarang tiga lapis ini melalui URL "Shop/: ID".
2. Penggunaan parameter di pengontrol:
Tidak ada kesulitan dalam hal ini. Menyuntikkan parameter URL "$ stateParams" ke dalam pengontrol dan Anda bisa mendapatkannya di objek ini:
shop.controller("ShopMainController",['$scope','$stateParams','$rootScope',function($scope,$stateParams,$rootScope){ $scope.persons = [1,2,3,4,5,6]; $scope.good = { id:$stateParams.id } cfploadingbar.start ();}]);3. Cara mencegah cache template
Selama proses pengembangan, cache template secara serius mempengaruhi debugging kami. Terkadang kode dimodifikasi, tetapi template tidak berubah sama sekali. Ini sangat menyusahkan. Kita hanya perlu mendengarkan statechangesuccess dan kemudian menghapus $ Templatecache. Di sini kami menggunakan metode run untuk menambahkan pendengar:
bookapp.run (['$ rootscope', '$ templatecache', fungsi ($ rootscope, $ templatecache) {var statechangesuccess = $ rootscope. $ on ('$ statechangescess', statechangescess); fungsi statechangesuccess ($ rootcope) ($ rootscope) ($rangeCe.Remplate.RemplAcess ($ rootcope) ($ rootlate) ($rempeCess (ditempa.Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.