Angularを使用することを学ぶ際に、UI-Routeは困難の1つです。単純な使用に問題はありませんが、マルチレベルのネスティングに関しては、混乱していると感じます。私は多くの情報を調べて、多くの落とし穴に踏み出しました。これまでのところ、UI-Routeについて包括的な理解を持っているとは言えません。ここで、私が埋めたいくつかのピットを録音します。
1.要約の使用:
$ StateProvider .State( 'Shop'、{Resolve:{"Shoplist":function($ http){return $ http({url: ""/bookapp/data/shoplist.php "、" get "})}}、abstract:"/shop/shopml:コントローラー:「ShopListController」})抽象属性を使用することの使用は何ですか?公式説明:要約:Trueは、この状態を明示的に活性化できず、サブステートによって暗黙的にのみ活性化できることを示しています。明示的にアクティブ化できない場合は、「/shop」を介してこの状態ルートに直接アクセスすることはできません。それは行き止まりではありませんか?それをすることのポイントは何ですか?待って、次の文を見てみましょう。それはキルト状態で隠されてアクティブにすることができます、そしてそれはまだ生きているようです。どうすればライブにできますか?次のコードを見てみましょう。
.state( 'Shop.main'、{url: "/:id"、abstract:true、templateurl: "templates/shop/main2.html"、コントローラー: "ShopmainController"}))州:「shop.main」は店舗の物質です。理論によれば、Shop.mainはShopをアクティブにすることができます。 /shop /1にアクセスするだけで、Shop Stateと「Shop.main」をアクティブにすることができます。
急いでいないようにしましょう。抽象属性を追加して、いくつかのエキサイティングなもので遊んでいます。次のレベルで次のコードを見てみましょう。
.state( 'shop.main.info'、{url: ""、templateurl: "templates/shop/info.html"、cache: 'false'、controller: "infocontroller"}).state( 'shop.main.author'、{url: "/著者< }).state( 'shop.main.samebook'、{url: "samebook"、テンプレート: "<div> samebooksamebooksamebooksamebook </div>"})状態「shop.main.info」には州のURLがあることがわかります。「shop.main」として使用できるすべてのデフォルトの物質に、「shop/1」にアクセスする必要があります。
この時点で、モジュールのネスト関係は次のとおりです。htmlネストされたmain.html、main.htmlネストされた情報。html。 「shop/:id」のURLを介してこの3層のネストをアクティブにすることができます。
2。コントローラーでのパラメーターの使用:
これには困難はありません。 「$ StateParams」URLパラメーターをコントローラーに注入すると、このオブジェクトに入手できます。
shop.controller( "ShopmainController"、['$ Scope'、 '$ stateParams'、 '$ rootscope'、function($ scope、$ stateparams、$ rootscope){$ scope.persons = [1,2,3,4,5,6]; cfploadingbar.start();}]);3.テンプレートキャッシュを防ぐ方法
開発プロセス中、テンプレートキャッシュはデバッグに深刻な影響を与えます。コードが変更されることもありますが、テンプレートはまったく変更されません。とても苦痛です。 StateChangesuccessを聞いてから、$ TemplateCacheをクリアする必要があります。ここでは、実行方法を使用してリスナーを追加します。
bookapp.run(['$ rotscope'、 '$ templatecache'、function($ rotscope、$ templatecache){var statechangesuccess = $ rootscope。$ on( '$ statechangesuccess'、stateechesuccess); function stateChangesuccess($ rootscose){$ templatecache er)上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。