Wenn Sie lernen, Angular zu verwenden, ist UI-Route eine der Schwierigkeiten. Es gibt kein Problem mit einfachem Gebrauch, aber wenn es um mehrstufiges Nisten geht, fühle ich mich verwirrt. Ich habe viele Informationen nachgeschlagen und viele Fallstricke getreten. Bisher kann ich nicht sagen, dass ich ein umfassendes Verständnis für UI-Route habe. Hier nehme ich nur die wenigen Gruben auf, die ich ausgefüllt habe.
1. Zusammenfassung: Zusammenfassung:
$stateProvider .state('shop',{ resolve:{ "shoplist":function($http){ return $http({ url:"/bookApp/data/shoplist.php", method:"GET" }) } }, abstract: true, url:"/shop", templateUrl:"templates/shop/list.html", Controller: "ShopListController"})Was nutzt die Verwendung von abstraktem Attribut? Offizielle Beschreibung: Abstract: TRUE weist darauf hin, dass dieser Zustand nicht explizit aktiviert werden kann und nur implizit durch den Unterzustand aktiviert werden kann. Wenn Sie nicht explizit aktivieren können, können Sie über "/Shop" nicht direkt auf diesen staatlichen Weg zugreifen. Ist das nicht eine Sackgasse? Was macht das? Warten Sie, werfen wir einen Blick auf den nächsten Satz: Er kann im Quiltzustand verborgen werden, und es scheint, dass es immer noch am Leben sein kann. Wie kann es es leben lassen? Schauen wir uns den folgenden Code an:
.State ('shop.main', {url: "/: id", Abstract: true, templateurl: "templates/shop/main2.html", Controller: "ShopMainController"})Staat : "Shop.Main" ist ein Stellvertretung des Ladens. Nach der Theorie kann Shop.main Shop aktivieren. Wir müssen nur zugreifen: /shop /1, damit wir Shop State und "Shop.main" aktivieren können.
Lassen Sie uns nicht eilig sein. Ich werde abstraktes Attribut hinzufügen, um mit einigen aufregenden Dingen zu spielen. Schauen wir uns den folgenden Code auf der nächsten Ebene an:
.state('shop.main.info',{ url:"", templateUrl:"templates/shop/info.html", cache:'false', controller:"InfoController" }) .state('shop.main.author',{ url:"/author", template:"<div>authorauthorauthorauthorauthor</div>" }) .State ('shop.main.Samebook', {url: "samebook", Vorlage: "<Div> sameBooksameBooksameBook </div>"})Ich sehe, dass der Staat "shop.main.info" die URL des Staates hat "" "" Wir müssen nur auf diese Weise auf "Shop/1" zugreifen, auf diese Weise, die als "Shop.main" verwendet werden können.
Zu diesem Zeitpunkt lautet die Verschachtelungsbeziehung des Moduls: list.html verschachtelte main.html, main.html verschachtelte info.html. Wir können diese dreischichtige Verschachtelung durch die URL von "Shop/: ID" aktivieren.
2. Verwendung von Parametern im Controller:
Dies gibt keine Schwierigkeiten. In den URL -Parameter "$ stateParams" in den Controller injizieren, können Sie ihn in diesem Objekt erhalten:
Shop.Controller ("ShopMainController", ['$ scope', '$ stateParams', '$ rootScope', Funktion ($ scope, $ stateParams, $ rootScope) {$ scope.persons = [1,2,3,4,5,6]; cfploadingbar.start ();}]);3.. So verhindern Sie Vorlagen -Cache
Während des Entwicklungsprozesses wirkt sich der Vorlagen -Cache ernsthaft auf unser Debuggen aus. Manchmal wird der Code geändert, aber die Vorlage ändert sich überhaupt nicht. Es ist sehr belastend. Wir müssen nur einen Statechangesuccess hören und $ $ templatecache löschen. Hier verwenden wir die Run -Methode, um den Hörer hinzuzufügen:
bookapp.run (['$ rootscope', '$ templatecache', function ($ rootscope, $ templatecache) {var statechangesuccess = $ rootScope.Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.