Question

我有一个最简单的小型离子应用程序，使用ionic serve在浏览器中运行时可以正常工作。

但是，当应用程序在Ionic View（view.ionic.io）中运行时，路由似乎失败（index.html已加载，但<div ui-view=""></div>内的任何内容都未加载。这是使用ionic upload完成。

我的简单index.html看起来像：

  <body ng-app="app">
      my app!
      <div ui-view=""></div>
  </body>

我的app.js包含：

angular
    .module("app", [
        "ionic",
        "ngCordova",
        "ui.router"
    ])
    .config(function ($stateProvider, $urlRouterProvider) {
        $stateProvider.state("splash", {
            url: "/splash",
            templateUrl: "components/splash/splash.html",
            controller: "SplashController"
        }).state("login", {
            url: "/login",
            templateUrl: "components/login/login.html",
            controller: "LoginController"
        });

        $urlRouterProvider.otherwise("/splash");
    });

我有一个SplashController：

var SplashController = (function () {
    function SplashController($scope) {
        this.test = null;
        this.scope = null;
        $scope.vm = this;
        this.scope = $scope;
        this.test = "Hello world!";
    }
    SplashController.$inject = ["$scope"];
    return SplashController;
})();
App.SplashController = SplashController;
angular.module("app").controller("SplashController", App.SplashController);

我真无聊的splash.html是：

<div class="padding">
    <h4 class="title dark">splash.html</h4>
    <h4 class="title dark">{{ vm.test }}</h4>
</div>

在我的浏览器（ionic serve）中，我看到了：

browser screenshot

在我的设备上（ionic upload / Ionic View应用）我看到my app!

我做错了什么？这是Ionic View应用程序的问题吗？还有其他人遇到过这个吗？

其他一些注意事项：

JavaScript是从TypeScript编译的。
我曾尝试<ion-nav-view></ion-nav-view> /排除ui.router，结果相同（在浏览器中有效，但在设备上无效）。我实际上不喜欢Ionic视图动画，如果可以，我更喜欢使用标准的ui-router。

Answer 1

原来这是最奇怪的问题。经过进一步的调试，我意识到路由器不仅没有工作，而且Angular根本没有工作（{{ 1 + 1 }}）。

出于某种原因，本机应用程序不喜欢我在.tsout目录中生成的JavaScript。我将其删除并将同一个文件放在与我index.html相同的目录中。我确信幕后会发生其他事情，但重新构建我的项目文件似乎解决了这个问题。

设置错误：

项目结构：

/www

    /.tsout
        app.js     // both .tsout and app.js are created through my gulp-typescript task
    /components
    /css
    /img
    /lib
    /typings
    index.html

HTML head：

<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="css/ionic.app.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ionic/js/ng-cordova.min.js"></script>

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

解决方案：

我的项目结构在之后我在浏览器和设备上都找到了成功：

/www
    /components
    /css
    /img
    /lib
    /typings
    index.html
    app.js     // just app.js is created through my gulp-typescript task

script中的head标记如下所示：

<script src="app.js"></script>

希望这种好奇的结果对别人有帮助！

AngularUI路由器+离子 - 路由在浏览器中工作，但不在Ionic View中？

1 个答案: