複数の名前付きビュー（angularjs内で動的ルーティングを使用）

Question

編集：Plunkerの完全なコードは次のとおりです。私は実行では何もできませんが、ローカルで同じコードが働いています。しかし、コンソールエラーが発生する

すべてが完璧です。しかし、/news/:id/の:idのために、私はコード内のどこでも追跡することができないコンソールでjquery/angularエラーを取得しています。

私は間違っています。

編集：解決plunker https://plnkr.co/edit/FWcuBgGpVdMj3CroFrYJ

Answer 1

まず、ui-routerを使用しようとしていますが、あなたのプランナーにngRouteスクリプトが含まれています。そして、すべてが正常に動作する必要があり

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>

にそれを変更！

それはあなたがしたい場合href="#/news/1"

に変身

ui-sref="post({id:1})"を定義するためにはるかに簡単ですので、私はあなたにいくつかの変更...

1. ui-srefの代わりhrefを示唆あなたのルートファイルを変更しなければなりません。それぞれhrefです。

$stateProvider .state('post', { url: "news/:id"

または

$stateProvider .state('post', { url: "archive/:id"

または

$stateProvider .state('post', { url: "whatever/:id"

2.抽象状態

あなたの例では、ヘッダー、コンテンツ、フッターを保持する抽象状態を定義する方が良い方法です - これは典型的な使用例です。

UI-ルータ 抽象米国

抽象状態は、子の状態を持つことができますが、 自体を有効に得ることができません。 「抽象的な」状態は単に に移行できない状態です。子孫の のいずれかがアクティブになると、暗黙的にアクティブになります。あなたは抽象状態をどのように使用するかの

いくつかの例は以下のとおりです。

すべての子状態のURLへのURLを付加するには。 のテンプレートを挿入するには、その子ステートが設定する独自のUIビューを挿入します。必要に応じて コントローラをテンプレートに割り当てます。コントローラーは、 テンプレートとペアにする必要があります。さらに、$ scopeオブジェクトを子に継承すると、 は、これがビュー階層を介して行われ、状態 の階層ではないことがわかります。 子の状態で使用するための解決を介して解決された依存関係を提供すること。 子ステートまたはイベントリスナーが使用するデータを介して継承されたカスタムデータを提供すること。 onEnterまたはonExit 関数を実行して、アプリケーションをある程度変更する可能性があります。上記の任意の組み合わせ 。覚えておいてください：抽象的な州では子どもがプラグインできるように依然として独自の が必要です。したがって、 アブストラクト状態を使用してURLをプリペンドするか、resolves/dataを設定するか、または onEnter/Exit機能を実行する場合は、さらにテンプレート： ""を設定する必要があります。

ここには私がそれを行う方法を示すplunkerがあります。

https://plnkr.co/edit/5FvJaelyxdl5MuALt5VY?p=preview

はそれがお役に立てば幸いです。

Answer 2

あなたがキーワードに応じて、カスタムテンプレートを使用する必要がある場合は、次の操作を行うことができます。exampleControllerで、その後

.config(['$routeProvider', function($routeProvider, $routeParams) { $routeProvider .when('/news/:id/:keyWords', { template: '<div ng-include="url"></div>', controller: "exampleController" })

function($routeParams, $scope) { $scope.url = $routeParams.keyWords; }

Answer 3

のドキュメントをご覧ください、

あなたは私はあなたがheaderとfooterを維持し、contentビューを変更したい推測している

$stateProvider 
    .state('state',{ 
    url: '', 
    views: { 
     'header': { 
     templateUrl: 'views/header.html', 
     controller: 'headerCtrl' 
     }, 
     'content': { 
     template: '<div ui-view=" "></div>', //<-- child templates loaded to here 
     }, 
     'footer': { 
     templateUrl: 'views/footer.html', 
     controller: 'footerCtrl' 
     } 
    } 
    }) 
    .state('state.post', { 
    url: 'news/:id/:KeyWords' 
    templateUrl: 'views/post.html' //<-- This goes into content's ui-view 
    }); 

を複数のビューを使用するための次の構文を使用することができます。

あなたは、すべての子ビューは、 元に自分の意見をロードする他のすべての州に親として、この状態を作ることによって

仮定する

.state('main',{ 
    abstract: true, 
    views: { 
    'header': ... , 
    'content': { 
     template: '<ui-view></ui-view>', 
    } 
    'footer': ... 
    } 
}) 

をこれを達成することができますmain.childなどで、あなたのテンプレートがコンテンツの<ui-view></ui-view>タグにロードされます