How to test or troubleshoot? Ionic framework on node.js (with Angular.js)

Question

Im new to mobile development and trying to follow step by step on a app.

Page is blank on server startup with a arrow and the word "back" when there's supposed to be a full app.

Any idea how to test or where I can observe the error from? Many thanks!

Update:

This is what I see in developer tools (Console)

Failed to load resource: the server responded with a status of 404 (Not Found)

[email protected]
Failed to load resource: the server responded with a status of 404 (Not Found)

local@js/services.js
Uncaught SyntaxError: Unexpected token . controllers.js:171
Uncaught Error [$injector:modulerr] Failed to instantiate module bucketList due to: Error: [$injector:modulerr]
Failed to instantiate module bucketList.controllers due to: Error: [$injector:nomod] Module 'bucketList.controllers' is not available ......1)

Additionally, running Testem with Jasmine gave the following additional error:

Angular is not defined in line 1 of app.js, which is the following code:

angular.module('bucketList', ['ionic', 'firebase', 'bucketList.controllers'])

Its something to do with dependencies as mentioned here: https://docs.angularjs.org/guide/di

But Im unable to pick out the erroneous relations...

Update 2: controllers.js:171 refers to the first line of this block line

   .controller('newCtrl', function($rootScope, $scope, $window, $firebase) {
  $scope.data = {
    item: ""
  };

  $scope.close = function() {
    $scope.modal.hide();
  };

  $scope.createNew = function() {
    var item = this.data.item;

    if (!item) return;

    $scope.modal.hide();
    $rootScope.show();
    $rootScope.show("Please wait... Creating new");

    var form = {
      item: item,
      isCompleted: false,
      created: Date.now(),
      updated: Date.now()
    };

    var bucketListRef = new Firebase($rootScope.baseUrl + escapeEmailAddress($rootScope.userEmail));
    $firebase(bucketListRef).$add(form);
    $rootScope.hide();
  };
})

..of which this is the view file html.

 <div class="modal slide-in-up" ng-controller="newCtrl">
  <header class="bar bar-header bar-secondary">
    <button class="button button-clear button-primary" ng-click="close()">Cancel</button>
    <h1 class="title">New Item</h1>
    <button class="button button-positive" ng-click="createNew()">Done</button>
  </header>

  <ion-content class="padding has-header">
    <input type="text" placeholder="I need to do..." ng-model="data.item">
  </ion-content>
</div>

When you view source in the browser is there HTML? Can you hit F12 to access your browser's developer tools and look at the console output? Remember the ionic bits are running in your browser, not in the server. — Dean Ward
From your tutorial : Note that cordova.js will be a 404 during development. And, since we added live reload support, all you need to do is make changes and switch to your browser to see the changes. — Oliboy50

Thinkerer Thinkerer · Accepted Answer · 2014-07-06T06:52:02

I solved it. turns out my placing of the email controller should be right at the end outside of all scopes.

How to test or troubleshoot? Ionic framework on node.js (with Angular.js)

1 Answers