Codepen code not working in application?


#1

Hi Ionic members,

I’ve set up a codepen here: Link
Which works perfectly. However, when i try to implement this into my application it cannot receive the JSON data even though the code is almost exactly the same and i cannot understand why it’s not working.

<body ng-controller="Controller">
<ion-view view-title="Announcements">
  <ion-content class="padding">

    <ion-refresher 
      pulling-text="Pull to refresh..."
      on-refresh="doRefresh()">
    </ion-refresher>

    <ion-list>
    <ion-item ng-repeat="data in data">
    <div class="list card">
      <div class="item item-divider">{{data.announcement_name}} - {{data.date}}</div>
      <div class="item item-body">
        <div>
          {{data.message}}
        </div>
      </div>
    </div>
    </ion-item>
    </ion-list>
    
  </ion-content>
</ion-view>
</body>

And here’s the controller:

angular.module('ionicApp', ['ionic'])

.controller('Controller', ['$http', '$scope', function($http, $scope) {
  $scope.data = [];
  $scope.doRefresh = function() {
   $http.get('https://api.myjson.com/bins/3z1eg')
      .success(function (data) {
         $scope.data = data;
      })
      .finally(function() {
      $scope.$broadcast('scroll.refreshComplete');
         });
      };
    }]);

I don’t get any errors in console log when i run the code (which is annoying) so i have no idea what the problem is. Any help would be brilliant. Thanks.


#2

Your code is fine. I’ve just created a blank starter project, pasted your code in the new controllers.js file and it works ok. So it must be some else that you are missing.
Have you checked that in index.html you are correctly including all the source? Also, in the app.js are you sure that the module name that you include are correct?
These are my steps:

  • ionic start testApp blank

  • Open index.html and paste your code. Be sure to move the app init from body tag to html tag by putting: <html ng-app="starter">.

  • In index.html, in head block add <script src="js/controllers.js"></script> after including app.js

  • Create new js file, controllers.js, and put it in js www/js folder.

  • Paste your code in that file and replace first line:
    angular.module('ionicApp', ['ionic'])
    with:
    angular.module('starter.controllers', [])

  • In last step append 'starter.controllers' to the list in first line, so that it looks like this:

    angular.module(‘starter’, [‘ionic’, ‘starter.controllers’])


#3

Oh, i need to provide:

angular.module('ionicApp', [])

in my app.js??

My app.js currently looks like this

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }
  });
})

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

  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

  // Each tab has its own nav history stack:

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

  .state('tab.chats', {
      url: '/chats',
      views: {
        'tab-chats': {
          templateUrl: 'templates/tab-chats.html',
          controller: 'ChatsCtrl'
        }
      }
    })
    .state('tab.chat-detail', {
      url: '/chats/:chatId',
      views: {
        'tab-chats': {
          templateUrl: 'templates/chat-detail.html',
          controller: 'ChatDetailCtrl'
        }
      }
    })

  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

});

I’m guessing i need to add??:

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ionicApp'])

Did that but it’s still not working. Any suggestions about anything else i need to add? Fairly new to Ionic.


#4

The name of the module depends on the ng-app tag in your html. Is yours called starter or ionicApp? If you have this:

<body ng-app="starter">

Then the module should be

angular.module('starter', ['ionic'])

If you’re comfortable sending me a message with a zipped version of your www folder I can try to pinpoint the problem.


#5

Thank you. I’ve sent you a message. :slight_smile:


#6

Thank you @brandyshea