Search code examples
javascriptangularjsangular-ui-routerangularjs-serviceangularjs-resource

Sharing unsaved $resource between controllers in Angular.js


I have a home page that encourages uses to signup for a service. The home page only has a few inputs to fill out. After the new user submits those fields, they are taken to the primary registration page with the rest of the required inputs. I am having problems populating the already supplied inputs on the primary registration page.

I've read that the best way to transfer data between templates (not even changing the controller on this) is to use a service. I'm using services, but they are $resource services, and I have been unable to figure out how to preserve an unsaved $resource between templates. I'm unable to save the $resource since it does not yet have all the required information.

Routes - Using angular-ui router

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

  $urlRouterProvider.otherwise('/');

  $stateProvider
    .state('welcome', {
      url: '/',
      templateUrl: 'views/welcome.html',
      controller: 'CompanyCtrl'
    })
    .state('registerAccount', {
      url: '/account/register',
      templateUrl: 'views/account/register.html',
      controller: 'CompanyCtrl'
    });
});

Services - Company & Manager

angular.module('app')
  .factory('Company', ['$resource', function ($resource) {
    return $resource('http://localhost:3000/api/v1/company/');
  }]);

angular.module('app')
  .factory('Manager', ['$resource', function ($resource) {
    return $resource('http://localhost:3000/api/v1/managers');
  }]);

Controller

angular.module('app')
.controller('CompanyCtrl', ['Company', 'Manager',
  function (Company, Manager) {
    this.company = new Company();
    this.manager = new Manager();

    this.create = function() {
      var params = {
        company: this.company,
        manager: this.manager
      };

      Company.save(params);
    };
  } 
]);

Solution

  • With some help from this answer I decided the best way to handle both resources & persistent factories was to separate the resources into their own API factory, freeing up my model factories for me to use however I like.

    API Factory

    angular.module('app')
    
    .factory('Api', ['$resource',
     function($resource) {
      return {
        Company: $resource('http://localhost:3000/api/v1/company/'),
        Manager: $resource('http://localhost:3000/api/v1/managers')
      };
    }]);
    

    Manager & Company without the $resource

    angular.module('app')
    
    .factory('Manager', function () {
      return {};
    })
    
    
    .factory('Company', function () {
      return {};
    });
    

    Updated Controller

    angular.module('app')
    
    .controller('CompanyCtrl', ['Company', 'Manager', 'Api',
      function (Company, Manager, Api) {
        this.company = Company;
        this.manager = Manager;
    
        this.create = function() {
          var params = {
            company: this.company,
            manager: this.manager
          };
    
          Api.Company.save(params);
        };
      } 
    ]);