CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerionic-framework
amlyhamm
amlyhamm

Reputation: 1150

AngularUI Router + Ionic - routing works in browser, but not within Ionic View?

I have the most simple little Ionic App that works as expected when run in the browser using ionic serve.

However, when the app is run in Ionic View (view.ionic.io), the routing appears to be failing (the index.html is loaded, but nothing within <div ui-view=""></div> is loaded. This is done using ionic upload.

My simple index.html looks like:

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

My app.js contains:

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");
    });

I have a SplashController that has:

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);

And my really boring splash.html is:

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

In my browser (ionic serve) I see:

browser screenshot

And on my device (ionic upload / Ionic View app) I just see my app!

What am I doing wrong? Is this an issue with the Ionic View app? Has anyone else run into this?

A few other things to note:

Upvotes: 0

Views: 433

Answers (1)

amlyhamm
amlyhamm

Reputation: 1150

Well this turned out to be the strangest of issues. After further debugging, I realized that not only was the router not working, but Angular was not working at all ({{ 1 + 1 }}) displayed literally.

For some reason, the native app did not like my generated JavaScript in a .tsout directory. I removed it and placed the same exact file in the same directory as my index.html. I'm sure something else was going on behind the scenes, but re-structuring my project files seemed to solve the problem.

The setup with the error:

Project structure:

/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>

The solution:

My project structure after I found success both in the browser and on the device:

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

The script tag in the head then looks like:

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

Hope the outcome of this wonkiness can be helpful to someone else!

Upvotes: 1

Related Questions