How to pass results from POST request to another page in Ionic and Angular

Question

I'm using ionic to build a mobile app and I'm implementing very lightweight authentication (no security) into the app. Basically when a users hits the login button after submitting their email and password, their information is checked against a database using a POST request. Now my question is, once I have confirmed that the user's information is in the database, I'd like to pass that response object from the POST to a profile page that can then show the user's profile information. How can I pass information (the response object) from one controller to the another page so it can then be displayed on screen? Code below:

app.js

    //Login view
     .state('signin', {
      url: '/signin',
      templateUrl: 'templates/signin.html',
      controller: 'LoginCtrl'
  })

  // Profile view:
  .state('tab.profile', {
    url: '/profile',
    views: {
      'tab-profile': {
        templateUrl: 'templates/tab-profile.html'
        controller: 'ProfileCtrl'
      }
    }
  })

controllers.js:

$http.post(url, obj)
         .success(function (res, status, headers, config) {
          if (res == null){
             console.log("bad login");
          }
          else{
           // $scope.response = res;
            console.log(res);
            console.log("post successful");
            $state.go('tab.profile',{response:res});
          }
         });

tab-profile.html

<ion-view view-title="Profile">
  <ion-content>
    <ion-list>
      <ion-item >{{response.name}}</ion-item>
    </ion-list>
  </ion-content>
</ion-view>

score 2 · Accepted Answer · answered Nov 30 '16 at 13:10

2

You can create a service which will store data to be passed to other controllers.

Let me show an example:

var yourApp = angular.module('fooApp', []);

yourApp.factory('yourFactory', function() {
    var items = [];
    var storeService = {};

    storeService.addItem = function(item) {
        items.push(item);
    };
    storeService.removeItem = function(item) {
        var index = items.indexOf(item);
        items.splice(index, 1);
    };
    storeService.items = function() {
        return items;
    };

    return storeService;
});

function MyCtrl($scope, yourFactory) {
    $scope.newItem = {};
    $scope.yourFactory = yourFactory;    
}

answered Nov 30 '16 at 13:10

StepUp

36,391
15
88
148

This appears to be working but when I inject the service into my controller it changes the appearance of my page such that the top tab (i'm using the tabs structure) lays on top of my header, do you know why that would happen? – user2466886 Nov 30 '16 at 13:32
@user2466886 just debug what happens using Google Chrome and using keyword `debugger`. Please, see the following post http://stackoverflow.com/questions/5156388/how-to-set-breakpoints-in-inline-javascript-in-google-chrome – StepUp Nov 30 '16 at 13:43
I was able to implement a service that performs the post request and returns the object. However in my login page, the user provides their login information which is used for the post request. In my profile page, how can I transfer over the login information so that I can use it again to make another Post request. The reason I want to make another request is because I want to display the profile information. – user2466886 Dec 01 '16 at 01:36
@user2466886 just create new variable in service to store all necessary information. And you can take this info from service at any time. – StepUp Dec 01 '16 at 15:02

score 1 · Answer 2 · edited May 23 '17 at 11:45

You can define params in the definiton of a route. Look at the docu (https://github.com/angular-ui/ui-router/wiki/URL-Routing) of the ui-router module to see the right syntax.

In order to pass more complex object between two controllers i would use a service. Xou can set the data in the service after the POST is resolved and after the state change read it in the other controller. Read this link to see examples Passing data between controllers in Angular JS?. Hope this helps :)

How to pass results from POST request to another page in Ionic and Angular

2 Answers2

Linked