Onsen angular js api call

Question

I dont know if this is an angular js problem. Anyway, I am using onsen ui for my mobile app and I need a way to transition from one page to another and have the data shared between those pages .below is my app.js code.

// Wordpress Posts Controller
var app = angular.module('myApp', []);
app.controller('PostsController', function($scope, $http, PostsData) {

    $http({method: 'GET', url: 'http://akufoaddo2016.com/api/get_recent_posts/'}).
    success(function(data, status, headers, config) {
        $scope.posts = data.posts;

    }).
    error(function(data, status, headers, config) {

    });

    $scope.showDetail = function(index) {
    var selectedItem = $scope.posts[index];
    PostsData.selectedItem = selectedItem;
    $scope.ons.navigator.pushPage('page4.html', selectedItem);
    }

});

The page i want to show the data on is page4.html and the code is below.

<ons-page ng-controller="PostsController">
<ons-toolbar style="background-color: #132e42" >
            <div class="left">
                <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="ion-android-more-vertical" style="color: #fff"></ons-icon></ons-toolbar-button>
            </div>
            <div class="center" style="font-weight:bold; color:#fff;">Nana Akuffu Addo</div>             
        </ons-toolbar>

    <ons-scroller>

        <div  ng-app="myApp" ng-repeat="post in posts">
        <ons-row >
        <h3 class="title" ng-click="showDetail($index)">{{post.title}}</h3>
        <p>{{post.excerpt}}</p>
        </ons-row>
        </div>

    </ons-scroller>

</ons-page>

I dont know what i am doing wrong ; it just wont print any value .

If you are wondering how the json data looks like :

{
  "count": 2,
  "status": "ok",
  "count_total": 2,
  "pages": 1,
  "posts": [
    {
      "id": 4,
      "type": "post",
      "slug": "nana-akufo-addo-visits-pentecost-convention-centre",
      "url": "http://akufoaddo2016.com/2016/01/17/nana-akufo-addo-visits-pentecost-convention-centre/",
      "status": "publish",
      "title": "NANA AKUFO &#8211; ADDO VISITS PENTECOST CONVENTION CENTRE",
      "title_plain": "NANA AKUFO &#8211; ADDO VISITS PENTECOST CONVENTION CENTRE",
      "content": "<p>The Presidential Candidate of the New Patriotic Party (NPP) for the 2016 elections, Nana Addo Dankwa Akufo-Addo, on Friday, January 15, 2016 made a historic visit to the ultra-modern Pentecost Convention Centre (PCC) located at Gomoa Fetteh, near Kasoa.  <a href=\"http://akufoaddo2016.com/2016/01/17/nana-akufo-addo-visits-pentecost-convention-centre/#more-4\" class=\"more-link\">Read more</a></p>\n",
      "excerpt": "<p>The Presidential Candidate of the New Patriotic Party (NPP) for the 2016 elections, Nana Addo Dankwa Akufo-Addo, on Friday, January 15, 2016 made a historic visit to the ultra-modern Pentecost Convention Centre (PCC) located at Gomoa Fetteh, near Kasoa.</p>\n",
      "date": "2016-01-17 23:56:42",
      "modified": "2016-01-17 23:56:42",
      "categories": [
        {
          "id": 2,
          "slug": "blog",
          "title": "Blog",
          "description": "",
          "parent": 0,
          "post_count": 1
        }
      ],
      "tags": [],
      "author": {
        "id": 1,
        "slug": "admin",
        "name": "admin",
        "first_name": "",
        "last_name": "",
        "nickname": "admin",
        "url": "",
        "description": ""
      },
      "comments": [],
      "attachments": [
        {
          "id": 5,
          "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
          "slug": "akufoaddo-pentecost-jan16",
          "title": "akufoaddo-pentecost-jan16",
          "description": "",
          "caption": "",
          "parent": 4,
          "mime_type": "image/jpeg",
          "images": {
            "full": {
              "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
              "width": 430,
              "height": 334
            },
            "thumbnail": {
              "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16-150x150.jpg",
              "width": 150,
              "height": 150
            },
            "medium": {
              "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16-300x233.jpg",
              "width": 300,
              "height": 233
            },
            "medium_large": {
              "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
              "width": 430,
              "height": 334
            },
            "large": {
              "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
              "width": 430,
              "height": 334
            },
            "post-thumbnail": {
              "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
              "width": 430,
              "height": 334
            }
          }
        }
      ],
      "comment_count": 0,
      "comment_status": "open",
      "thumbnail": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
      "custom_fields": {},
      "thumbnail_size": "post-thumbnail",
      "thumbnail_images": {
        "full": {
          "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
          "width": 430,
          "height": 334
        },
        "thumbnail": {
          "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16-150x150.jpg",
          "width": 150,
          "height": 150
        },
        "medium": {
          "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16-300x233.jpg",
          "width": 300,
          "height": 233
        },
        "medium_large": {
          "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
          "width": 430,
          "height": 334
        },
        "large": {
          "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
          "width": 430,
          "height": 334
        },
        "post-thumbnail": {
          "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
          "width": 430,
          "height": 334
        }
      }
    },
    {
      "id": 1,
      "type": "post",
      "slug": "hello-world",
      "url": "http://akufoaddo2016.com/2016/01/13/hello-world/",
      "status": "publish",
      "title": "Hello world!",
      "title_plain": "Hello world!",
      "content": "<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>\n",
      "excerpt": "<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>\n",
      "date": "2016-01-13 21:24:36",
      "modified": "2016-01-13 21:24:36",
      "categories": [],
      "tags": [],
      "author": {
        "id": 1,
        "slug": "admin",
        "name": "admin",
        "first_name": "",
        "last_name": "",
        "nickname": "admin",
        "url": "",
        "description": ""
      },
      "comments": [
        {
          "id": 1,
          "name": "Mr WordPress",
          "url": "https://wordpress.org/",
          "date": "2016-01-13 21:24:36",
          "content": "<p>Hi, this is a comment.<br />\nTo delete a comment, just log in and view the post&#039;s comments. There you will have the option to edit or delete them.</p>\n",
          "parent": 0
        }
      ],
      "attachments": [],
      "comment_count": 1,
      "comment_status": "open",
      "custom_fields": {}
    }
  ]
}

Thanks for your help.

First thing you need to do is place the ng-app directive (ng-app="myApp") as a root of your application and all other ng- directives have to be its children. — Ma3x, Jan 20 '16 at 17:45
like this -- `` ? it didnt work . but it got rid of some errors. I am very new to this thing. What i am getting now is -- **PostsController is not a function , got undefined bla bla bla in js/loader.js** . do i have to do extra things in the onsen js file? i actually learnt angular js today so i am not too familiar with the language . i've been trying to do this for days! — Rich Ozil, Jan 20 '16 at 17:58
I dont know onsen-ui, so can't help you with that. But here is how you can setup angularjs in your example: https://jsfiddle.net/7xawhtfj/ — Ma3x, Jan 20 '16 at 20:57
@RichOzil Change `var app = angular.module('myApp', []);` with `var app = ons.bootstrap();`. This way you are including OnsenUI and you don't need to specify `ng-app="myApp"` anywhere. Also, `$scope.ons.navigator` was deprecated long ago. If you define your navigator as `` then you should use `$scope.myNavigator.pushPage(...)`. — Fran Dios, Jan 21 '16 at 03:05
thank you boss. but the values are still not printing on page 4.. but one more thing , in the menu.html , how do i pass the variable in my case. i am sorry, i only need to know this once . I wish someone could do a youtube tuts on onsen or maybe on treehouse. its really complicated.I cant see jack :( — Rich Ozil, Jan 21 '16 at 19:42
@RichOzil are you sending and retrieving the data as Patrick explains in his answer? Sorry but I don't follow you about passing the variable in menu.html. What do you mean? In any case, you can store your data in an AngularJS service and share it among controllers if that's easier for you. — Fran Dios, Jan 24 '16 at 15:56

score 0 · Answer 1 · answered Jan 21 '16 at 00:59

When you push some data from one controller to another, it will be saved in the navigator.getCurrentPage().options object, so something like that should work.

angular.module('app').controller('FirstController', function ($scope, $http) { 
  // .. get myData somehow from the page
  navi.pushPage('second-page.html', {myData: myData});
}

angular.module('app').controller('SecondController', function ($scope, $http) { 
   // read the data that that was given by pushPage
   $scope.data =  navi.getCurrentPage().options.myData;
}

Onsen angular js api call

1 Answers1