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路由器不工作

回答

相关问题