AngularJS passing Data between controllers failure

Question

As mentioned in my other posts, i am still new to AngularJS and I am having quite a bit of difficulties understanding its' ins and outs.

I have reached a blocking point where I am trying to pass data between a controller which stores a list of objects and another where the user can edit individual objects within a different view.

I have tried using my own factory for it, however if i reference the service within the index.html file (it's a single page application) I get errors regarding the state of my NavigationController which does not use the service in question.

My Factory code is below:

var app = angular.module('MyAppName',[]);
app.factory('CharacterData', function() {
 var data = {
 Name: '',
 Description: '',
 TotalExperience: 0,
 RemainingExperience: 0
 }
 return {
 getName: function() {
 return data.Name;
 },
 setName: function(name) {
 data.Name = name;
 },
 getDescription: function() {
 return data.Description;
 },
 setDescription: function(description) {
 data.Description = description;
 },
 getTotalExperience: function() {
 return data.TotalExperience;
 },
 setTotalExperience: function(totalxp) {
 data.TotalExperience = totalxp;
 },
 getRemainingExperience: function() {
 return data.RemainingExperience;
 },
 setRemainingExperience: function(exp) {
 data.RemainingExperience = exp;
 }
 };
});

I have injected this factory in both controllers that need it (CharacterListController and CharacterEditController), code below:

(function(){
 angular.module('MyAppName')
 .controller('CharacterEditController', ['$scope', '$state', '$http', '$location', function ($scope, $state, $http, $location, CharacterData){
 /**
 *
 */
 $scope.readCharacter = function() {
 $scope.currentCharacter.name = CharacterData.getName();
 $scope.currentCharacter.description = CharacterData.getDescription();
 $scope.currentCharacter.totalExperience = CharacterData.getTotalExperience();
 $scope.currentCharacter.remainingExperience = CharacterData.getRemainingExperience();
 }
...
}]);
}());

and the listing controller from where the character in question is passed:

(function(){
 angular.module('TimeWaste')
 .controller('CharacterListController',['$scope', '$state', '$http','$location', function($scope, $state, $http, $location, CharacterData){
.... more functions ... 
 $scope.updateCurrentCharacter = function(req, res) {
 CharacterData.setName($scope.character.name);
 CharacterData.setDescription($scope.character.description);
 CharacterData.setTotalExperience($scope.character.totalExperience);
 CharacterData.setRemainingExperience($scope.character.remainingExperience);
 $location.path('/edit-character');
 }
 }]);
}());

What I do not understand is what does the NavigationController have to do anything with passing data. I have referenced my service like so:

What I get when the service is added to index.html

I am not understanding exactly how it works or why this problem occurs. I've been following tutorials mostly for the things i have been doing but as I said I am still in my MEAN Stack/Angular ABCs

Any help would be appreciated.

• Paqman: CharacterData should also be listed in your dependencies injection with quotes: app.controller('CharacterEditController', ['$scope', '$state', '$http', '$location', 'CharacterData', function ($scope, $state, $http, $location, CharacterData){

Answer 1

You didn't inject it properly:

['$scope', '$state', '$http', '$location', 'CharacterData', function ($scope, $state, $http, $location, CharacterData){}]

Answer 2

well you missed on listing the CharacterData in your dependencies array

['$scope', '$state', '$http', '$location', 'CharacterData', function ($scope, $state, $http, $location, CharacterData){ ...

• user3498133: Unfortunately the State Provider still has an issue with my navigation controller. Error: [$injector:unpr] errors.angularjs.org/1.5.0/$injector/… - I still get this. I am not sure if it's even needed because the navigation controller just handles my nav-bar, being an SPA.

Answer 3

Your controllers are not on the same module. CharacterListController is on TimeWaste module and CharacterEditController is on MyAppName, so does CharacterData.

Try to use the same module or add them to your app dependency.

• user3498133: Oh i just changed it here for posting purposes. All controllers are set on TimeWaste.