Ionic Framework | Page Six

Adding data to our app.

Link to freshly pressed api

Open app.js, register the FreshlyPressed service and add the click function:

App.service("FreshlyPressed", ["$http", FreshlyPressed]);
....
function FreshlyPressed($http) {
 this.getBlogs = function($scope) {
   $http.jsonp('https://public-api.wordpress.com/rest/v1/freshly-pressed?callback=JSON_CALLBACK')
   .success(function(result) {
    $scope.posts = result.posts;
   })
 }
}

Update controller to receive data from the FreshlyPressed Service:

function AppCtrl($scope, FreshlyPressed) {
  $scope.posts = [];
  $scope.refresh = function() {
   FreshlyPressed.getBlogs($scope);
  }
}

Update index.html to display data:

<div class="card list" ng-repeat="post in posts">
  <div class="item item-avatar-left">
   <img ng-src="{ {post.author.avatar_URL}}" alt="">
   <h2> { {post.author.nice_name}}</h2>
   <p><a href="{ { post.author.URL }}">{{ post.author.URL }}</a></p>
  </div>
  <div class="item item-body">
   <h1>{ {post.title}}</h1>
   <div ng-bind-html="post.content"></div>
  </div>
</div>

Implement pull to refresh:

<ion-refresh on-refresh="refresh()"></ion-refresh>

To let ionic know when refresh is complete, add this to the end of the getBlogs function:

Documentation for Ionic refresher.
$scope.$broadcast("scroll.refreshComplete");

Use ng-show to show pull to refresh:

ng-show="!posts.length"

Add logo, replace text between H1 with image source:

<img src="img/logo.png">

Add platform:

$ ionic platform ios
$ ionic build ios
$ ionic emulate ios

view code on github

@dabit3


prev