Ionic UI路由器不工作

我已經創建了這個簡單的Ionic應用程序。試着學習UI路由器的工作原理。Ionic UI路由器不工作

但是，當我運行它時，什麼都沒有出現。此外，Google Chrome中的開發人員工具中沒有任何內容顯示。

的index.html

<!DOCTYPE html> 
    <html> 
     <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user- scalable=no, width=device-width"> 
    <title></title> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
    <link href="css/ionic.app.css" rel="stylesheet"> 
    --> 

    <!-- ionic/angularjs js --> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 

    <!-- cordova script (this will be a 404 during development) --> 
    <script src="cordova.js"></script> 

    <!-- your app's js --> 
    <script src="js/app.js"></script> 


    </head> 
    <body ng-app="starter"> 
    <!-- 
     The nav bar that will be updated as we navigate between views. 
    --> 
    <ion-nav-bar class="bar-stable"> 
     <ion-nav-back-button> 
     </ion-nav-back-button> 
    </ion-nav-bar> 
    <!-- 
     The views will be rendered in the <ion-nav-view> directive below 
     Templates are in the /templates folder (but you could also 
     have templates inline in this html file if you'd like). 
    --> 
    <ion-nav-view></ion-nav-view> 


    </body> 
</html>

app.js

var app = angular.module('starter', ['ionic']); 
app.config(function($stateProvider) { 
    $stateProvider 
    .state('index', { 
     url: '/', 
     templateUrl: 'templates/home.html' 
    }) 

    .state('music', { 
     url: '/music', 
     templateUrl: 'templates/music.html' 
    }); 
});

模板/ home.html做爲

<script id="home" type="text/ng-template"> 
<!--  The title of the ion-view will be shown on the navbar--> 
     <ion-view view-title="Home"> 
      <ion-content ng-controller="HomeCtrl"> 

<!--    The the content of the page --> 
       <a href="#/music">Go to music page!</a> 
      </ion-content> 
     </ion-view> 
    </script>

模板/ music.html

<script id="home" type="text/ng-template"> 
<!--  The title of the ion-view will be shown on the navbar--> 
     <ion-view view-title="Home"> 
      <ion-content ng-controller="HomeCtrl"> 

<!--    The the content of the page --> 
       <a href="#/music">Go to music page!</a> 
      </ion-content> 
     </ion-view> 
    </script>

來源

2015-07-10 Irene Liu

編輯：看着你的github回購之後，你的app.js不會調用run（）。

下面是一些工作，在app.js中定義您的控制器和狀態。如您所見，我將我的視圖命名爲主視圖。

app.controller('HomeCtrl', function ($scope) { 
}) 

app.controller('MusicCtrl', function ($scope) { 
}) 

app.config(function($stateProvider) { 
    $stateProvider 
    .state('index', { 
     url: '/', 
     views: { 
      'main': { 
      templateUrl: 'templates/home.html', 
      controller: 'HomeCtrl' 
      } 
     } 
    }) 

    .state('music', { 
     url: '/music', 
     views: { 
      'main': { 
      templateUrl: 'templates/music.html', 
      controller: 'MusicCtrl' 
      } 
     } 
    }); 
});

index.html中，我命名的觀點：

<ion-nav-view name="main"></ion-nav-view>

hom.html

<!--  The title of the ion-view will be shown on the navbar--> 
     <ion-view view-title="Home"> 
      <ion-content> 

<!--    The the content of the page --> 
       <a href="#/music">Go to music page!</a> 
      </ion-content> 
     </ion-view>

music.html是相似的。

請注意，對於一個真實的項目，我不會在app.js中定義控制器和狀態，每頁有3個文件：狀態，控制器和模板在專用文件夾內。

來源

2015-07-10 23:01:25

嗨，仍然沒有工作。順便說一句，爲什麼你做這個改變，添加name =「main」到ion-nav-view？ –

因爲我喜歡我的國家清楚地定義他們管理的觀點。 –

除非您分享您的整個項目，否則我無法爲您提供幫助，例如您沒有說明如何以及在何處定義您的控制器。嘗試使用codepen或github共享。 –

如果home.html和music.html真的在單獨的文件中，那麼您不需要將它們包裝在<script>標記中。那就是我開始的地方。

來源

2015-07-10 21:01:51 Chad

是的。我已刪除腳本標記。 music.html是。但仍然無法正常工作 –

Ionic UI路由器不工作

回答

相關問題