イオン状態が作動しない

Question

状態に問題があります（どのように動作するのかわかりません）。

[OK]を私のapp.jsコードビューこの：

.... 
app.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) { 
// $ionicConfigProvider.views.transition('none'); 
$stateProvider 
      .state('app', { 
      url: '/app', 
      templateUrl: 'tpl/home.html', 
      controller: 'AppController', 
      abstract: true 
      }) 
      .state('app.aquarium', { 
      url: '/aquarium/index', 
      views: { 
       'menuContent': { 
       templateUrl: 'tpl/aquarium/index.html', 
       controller: 'AquariumIndexCtrl', 
       } 
      } 
      }) 
.... 
    $urlRouterProvider.otherwise('/app/aquarium/index'); 

.... 

app.controller('AppController', function($scope) { 
    console.log("App"); 
}); 
app.controller('AquariumIndexCtrl', function($scope) { 
    console.log("Akwaria"); 
}); 
.... 

と、私はこれまでのhrefを持っているのindex.htmlに述べている：

<a class="item item-icon-left" href="#/app/aquarium/index"> 
    <i class="icon"><img src="img/aquarium.png" /></i> 
    Aq 
    </a> 

しかし、すべての時間が、私は状態からファイルを参照してください " app "（tpl/home.html）。

なぜ私のリンクは、作品をいけないと起動アプリに私は

$urlRouterProvider.otherwise('/app/aquarium/index'); 

に「リダイレクト」を使用したときに、なぜまだTPL/home.htmlファイルを読み込みますか？ありがとう:)

Answer 1

まず、私はあなたがそれらをinyectするときに文字列の配列として依存関係を渡すことをお勧めします。もしそうでなければ、あなたが生産にuglifyするまでに、それらに問題があります。

状態の問題を回避

app.config([ 
    $stateProvider, 
    $urlRouterProvider, 
    $ionicConfigProvider, 
    function($stateProvider, $urlRouterProvider, $ionicConfigProvider) { 
}]) 

：

状態はあなたが前に定評いるUI-ビュー、この場合には私はあなたのインデックスにそれらを設定したいと思うに直接依存します。 ui-viewsについては、状態やURLによってアプリケーションを構造化することによって、状態やURLから呼び出すhtmlで記入するボックスと考えることができます。状態使用

：あなたのindex.htmlを想定し

、あなたは州からHTMLを埋めるためのUIビューを作成する必要があります。

あなたがui-viewを宣言しているかどうかわかりませんが、私はそう仮定します。 抽象的な状態では、ビューを使用してui-viewにも呼び出す必要があります。少なくとも、空であると宣言していなければ、後で再度呼び出す必要のないコンテンツで満たしてください。

app.config([ 
    $stateProvider, 
    $urlRouterProvider, 
    $ionicConfigProvider, 
    function($stateProvider, $urlRouterProvider, $ionicConfigProvider) { 

// $ionicConfigProvider.views.transition('none'); 
$stateProvider 
      .state('app', { 
      url: '/app', 
      views: { 
      'menuContent': {} 
      }, 
      abstract: true 
      }) 
      .state('app.aquarium', { 
      url: '/aquarium/index', 
      views: { 
       'menuContent': { 
       templateUrl: 'tpl/aquarium/index.html', 
       controller: 'AquariumIndexCtrl', 
       } 
      } 
      }) 
.... 
    $urlRouterProvider.otherwise('/app/aquarium/index'); 

}]) 

お電話の状態に応じて、dinamically満たされるボックスなどのUIビューmenuContentについて考え、あなたがそれらを設定した場合にのみ、あなたが望む限り多くのUI-景色を眺めることができ、それらを一つずつを読み込むことができますビュー：{}の状態です。

<a class="item item-icon-left" ui-sref="app.aquarium"> 
    <i class="icon"><img src="img/aquarium.png" /></i> 
</a> 

：

最後に、あなたはUI-SREF代わりに呼び出すためのhrefのdiferent状態を使用する必要があります