Angular-UI-router 路由在 Ionic 应用程序中不起作用答案

【问题标题】：Angular-UI-router Routing doesn't work in Ionic appAngular-UI-router 路由在 Ionic 应用程序中不起作用
【发布时间】：2015-02-15 19:13:31
【问题描述】：

我有一个问题，我的 Ionic 应用程序无法呈现我的视图，但我没有收到错误消息。当我运行这个应用程序时，只显示导航栏和一个空白页面。

index.html:

    <html ng-app="App">
<head>
    <!-- Project setup: https://scotch.io/tutorials/angularjs-best-practices-directory-structure -->
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>TEST Mobile</title>

     <!-- Assets -->
    <link href="assets/libs/ionic/ionic.css" rel="stylesheet" />
    <script src="assets/libs/ionic/ionic.bundle.js"></script>
    <script src="app/app.module.js"></script>
    <script src="app/app.route.js"></script>


    <!-- Controllers -->
    <script src="app/components/home/homeController.js"></script>
    <script src="app/components/projects/projectsController.js"></script>
    <script src="app/components/vms/vmsController.js"></script>
    <script src="app/components/auth/authController.js"></script>

    <!-- Services -->
    <script src="app/components/home/homeService.js"></script>
    <script src="app/components/projects/projectsService.js"></script>
    <script src="app/components/vms/vmsService.js"></script>
    <script src="app/components/auth/authService.js"></script>

    <!-- Cordova.js isn't loaded until build for a specific  platform, this will give 404 when viewing from ordinary browser -->
    <script src="cordova.js"></script>
</head>

<body>

    <ion-nav-bar class="bar-assertive">
        <ion-nav-back-button class="button-icon ion-arrow-left-c">
        </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>

</body>
</html>

我有一个模块文件和一个单独的路由文件：

var app = angular.module('App', ['ionic']);

路由js文件：

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

        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: 'app/components/home/homeView.html',
                controller: 'homeController'

            });

        $urlRouterProvider.otherwise('/home');

    })

当我运行它时，我只显示导航栏，但没有显示离子视图主页，现在仅用于演示：

<ion-view view-title="Forgot Password">
    <ion-content padding="true">
        <p>
            Yeah this is just a demo showing how views can be shown without tabs, then you can navigate
            to views within tabs. Additionally, only one set of tabs needs to be written for all of the different views that should go inside the tabs. (Compared to written the same tab links in the footer of every view that's in a tab.)
        </p>
        <p>
            There's no username/password, just click
            the Sign-In button back a the sign-in view.
        </p>
        <p>
            Return to <a href="#/sign-in">Sign-In</a>.
        </p>
    </ion-content>
</ion-view>

我怀疑我的问题出在路由配置中，但我无法找到解决此问题的有效方法。

【问题讨论】：

您已将路由模块注入主模块... app.js angular.module('App', ['ionic','routingModule']) routing.js angular.module('routingModule', ['ionic']) 这就是为什么您的配置路由是另一个文件的原因。

标签： angular-ui-router ionic-framework

【解决方案1】：

将 ui-view 添加到 index.html 中的 ion-nav-view 即可。

<ion-nav-view ui-view></ion-nav-view>

【讨论】：

【解决方案2】：

问题不在于路由配置。问题是在另一个文件（控制器文件）中，我还声明了angular.module('App', ['ionic']); 这覆盖了我的 app.config。

【讨论】：