[MAN鉄人]日08：AngularJS - プラグイン：UI-ルーター

要約：[MANアイアンマン]日07：AngularJS - プラグイン：UI-ルーター

- > AngularJS - プラグイン：UI-ルーター

序文

UI-ルータ：スーパープラグインを導入するために必要な基本的な概念の後、フィード上の誰もがAngularJSにインストールする必要がありますように、ルーティングでは、昨日紹介しました。

UI-ルータ

githubの

UI-ルータは、主に、あなたのページのアーキテクチャはUI-ルータアーキテクチャの状態を経て来て、オリジナルの$ルートサービスとは異なり、異なるサブページレンダリングネストされたビューに分離することができます助けるために、ルーティングフレームワークのAngularJSでありますあなたのページを切り替えるには、より大きな柔軟性を与える、ページを切り替えます。

次のように使用されます：






...


    ...

例

まず、構造は大まかページの指示に従って、5ページの合計を持っています

index.htmlを

ホームたとえば、次のように設定するに焦点を当て、すべてのCSS、アプリケーションと設定NG-アプリのjsの範囲をロードします。

myApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1', {
  url: "/state1",
  templateUrl: "partials/state1.html"
})
.state('state1.list', {
  url: "/list",
  templateUrl: "partials/1.list.html",
  controller: function($scope) {
    $scope.items = ["A", "List", "Of", "Items"];
  }
})
.state('state2', {
  url: "/state2",
  templateUrl: "partials/state2.html"
})
.state('state2.list', {
  url: "/list",
    templateUrl: "partials/state2.list.html",
    controller: function($scope) {
      $scope.things = ["A", "Set", "Of", "Things"];
    }
  })
});

概要側接続部は、URL templateUrl及びコントローラのそれぞれに対応する制御状態を設定することによって、各レイアウトに割り当てられます。

route1.html

URLのページが表示内容route1.list.htmlのサブセットの状態が含ま＃/ route1の、を意味する場合、URLは、ページ＃/ route2を指すサブ表示状態がroute2が設定されている含まれ、表示されています次のように.list.htmlコンテンツが、ソースコードは、次のとおりです。


  
  
Route 1

Show List

  
  


  
  
Route 2

Show List

.LIST接続された各ファイル名の後にhtmlページのコンテンツからUI-SREFウェイ・コンテンツ内をここで指定した表示リスト。

route1.list.html与route2.list.html

状態1品目リスト
- {{アイテム}}
国家のH3>リスト2つの物事
- {{}}事

サイドには、それぞれngRepeatを通じてマナー事で対象項目を読んで

エピローグ

側への紹介、私たちはすでに簡単なWeb SPAを構築することができ、次のステップは、その後導入された一つ一つは、誰もが知るための火力をAngularJSと思います！デイ-8オーバー！

あなたはかなり良い記事を感じた場合は、記事の上部に推奨されるトラブルを与えてください、それは、出力パワーのあなたの努力の弟をサポートし続けることです！

オリジナル：大列 [MAN鉄人]日08：AngularJS -プラグイン： UI-ルーター