How to send an object to an action method in angular ui-router

Question

I am trying to do a SPA using angular ui-router. This is my app.js

var productCatalogApp = angular.module('ProductCatalog', ['ui.router']);
productCatalogApp.config(function ($stateProvider, $urlRouterProvider) {  

$stateProvider

    // route to show our basic form (/form)
    .state('wizard', {
        url: '/wizard',
        templateUrl: 'WizardSubForm',
        controller: 'WizardMainController'
    })

    // nested states 
    // each of these sections will have their own view
    // url will be nested (/form/profile)
    .state('wizard.offer', {
        url: '/offer',
        templateUrl: 'OfferForm',
        controller: 'OfferCtrlr'
    })

    // url will be /form/interests
    .state('wizard.customizations', {
        url: '/customizations',
        templateUrl: 'OfferCustomizations',
        controller: 'CustomizationCtrlr',
    });


// catch all route
// send users to the form page 
$urlRouterProvider.otherwise('/wizard');

});

The Url pattern in each state is the name of the action method. This is an action method that gets called when I click on OfferCustomizations.

  public virtual ActionResult OfferCustomizations(string data)
    {
        OfferCustomization offerCustomization = new OfferCustomization();
        //offerCustomization.ProviderId = loginUser.ProviderId;
        offerCustomization.ProductCatalogApiUrl = ProductCatalogApiUrl;
        return View(offerCustomization);
    }

Now I want to send the object to an action method, but I do not know how to do it. Please, help.

Answer 1

Your question is a bit vague , you need to be more specific on what exactly 
you are trying to do.

Generally , this his how you would get data in Angular from the MVC 
application.

In Case of MVC/WebAPI , you should use actions to return JSON result back to 
the angular service which can then be processed by angular. Example below :

app.factory('myService', function($http) {
  var myService = {
    GetData: function() {
      // $http returns a promise, which has a then function, which also 
        returns a promise
      var promise = $http.get('<ActionURL>').then(function (response) {
    // The then function here is an opportunity to modify the response
    console.log(response);
    // The return value gets picked up by the then in the controller.
    return response.data;
     });
      // Return the promise to the controller
      return promise;
    }
  };
  return myService;
});

app.controller('MainCtrl', function( myService,$scope) {
  // Call the async method and then do stuff with what is returned inside 
our own then function
  myService.GetData().then(function(d) {
       $scope.data = d;
  });
});


After this services is called from the MainCtrl , angular will have the data 
from the MVC action available in its $scope.data variable.