AngularJS - Store Data, Factory

Question

Afternoon All,

We have been trying to learn AngularJS for the last week and need a little guidance on this, we want to be able to store data e.g userName, brandName and productName between routes. At the moment we are using routeParams but find this a pain having to duplicate code over and over.

Also within section (3) we have formData is they a way we can store this data within a factory so we can jump between brands and update products before submitting the final data? as at the moment when we leave each brand it removes our inputted data.

If anyone could help we'd greatly appreciate it, Thank you.

Plunker Example

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

// (1) Employees 
amlProductCtrl.controller('employees', ['$scope', '$http',
  function($scope, $http) {
    $http.get('json/employees.json').success(function(data) {
      $scope.employees = data;
    });
  }
]);
// (2) Brands
amlProductCtrl.controller('brands', ['$scope', '$routeParams', '$http',
  function($scope, $routeParams, $http) {
    // UserName
    $scope.employee = {"userName": $routeParams.userName};
    // Welcome Message
    $scope.alerts = [{
      type: 'info',
      msg: 'Hello ' + $scope.employee.userName + ', please select a brand.'
    }];
    $scope.closeAlert = function(index) {
      $scope.alerts.splice(index, 1);
    };
    // Get JSON Data
    $http.get('json/brands.json').success(function(data) {
      $scope.brands = data; 
    });
  }
]);
// (3) Products
amlProductCtrl.controller('products', ['$scope', '$routeParams', '$http',
  function($scope, $routeParams, $http) {
    // BrandName
    $scope.brand = {"brandName": $routeParams.brandName};
    // UserName 
    $scope.employee = {"userName": $routeParams.userName};
    // Get JSON Data
    var rpBrandName = $routeParams.brandName; // BrandName
    var rsBrandName = rpBrandName.replace(/\s+/g, ''); // Remove Space
    var lcBrandName = rsBrandName.toLowerCase(); // Lowercase
    var brandName = lcBrandName;
    $http.get('json/'+brandName+'-products.json').success(function(data) {
      $scope.products = data;
    });
    // FormData
    $scope.formData = {};
  }
]);

if you could set up a plunker you're likely to get more hits. — Will Lopez, Oct 27 '14 at 20:45
@WillLopez here is our Plnkr http://plnkr.co/edit/wnuWK32qfH7FMCzHiqWp?p=preview FYI only 'Black and Decker' currently works : ) — , Oct 28 '14 at 09:00
I provided a plunker below that might provide you what you need. Also check out http://stackoverflow.com/questions/20181323/passing-data-between-controllers-in-angular-js it provides another alternative using $broadcast (stay away from the $rootScope solution ) — Will Lopez, Oct 28 '14 at 13:55

score 3 · Answer 1 · answered Oct 27 '14 at 20:51

Here's a posible solution. Make a service that share the data between controllers. It's using $watch so may not be the most eloquent solution. I'm learning as well so I can feel your pain :-)

  myApp.factory('DataService', function () {
    var myObject = {
        id: 0, name: 'not set'
    };

    return {
       brandName: function () {
          return myObject.name;
        },
        setBrandName: function (brand) {
          myObject.name = brand.name;
        }
     };

   });

You can construct your object to better reflect your needs. Google this there are many articles providing solutions. Hope this helps. check this plunker out: http://plnkr.co/edit/9rw3kHCfwatqAw6TRQeW?p=preview Go to #2 and select a brand. You'll notice the other 2 updating to the selected item.

AngularJS - Store Data, Factory

1 Answers1

Linked