AngularJS - магазин данных, фабрика

Question

Во второй половине дня все,

Мы пытались узнать AngularJS на прошлой неделе, и нужно немного руководства по этому вопросу, мы хотим, чтобы иметь возможность хранить данные, например, имя пользователя, брендовых и ProductName между маршруты. В настоящий момент мы используем routeParams, но обнаруживаем, что это боль, повторяющая код снова и снова.

Также в разделе (3) у нас есть formData - способ хранения этих данных на фабрике, чтобы мы могли прыгать между брендами и продуктами обновления перед отправкой окончательных данных? так как в тот момент, когда мы оставляем каждый бренд, он удаляет наши введенные данные.

Если кто-то может помочь, мы будем очень благодарны, Спасибо.

Plunker Пример

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 = {}; 
    } 
]); 

Answer 1

Вот Возможное решение. Создайте службу, совместно использующую данные между контроллерами. Он использует $ watch, поэтому не может быть самым красноречивым решением. Я тоже учусь, поэтому я чувствую вашу боль :-)

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

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

    }); 

Вы можете построить свой объект, чтобы лучше отражать ваши потребности. Google это много статей, которые предоставляют решения. Надеюсь это поможет. проверьте этот плункер: http://plnkr.co/edit/9rw3kHCfwatqAw6TRQeW?p=preview Перейдите на # 2 и выберите бренд. Вы заметите, что 2 обновляется до выбранного элемента.