Need debugging/outside advice. Angular not working

Question

So, my instructor thought it would be a great idea to throw in local storage and all that great nonsense the second week into learning Angular JS and basically told us to copy her code but change the names (as if that's learning). But anyways I have no idea how to work with angular js except for a few concepts and I need help finding the issues in my code. Any input would help. So far it looks as if the information from the form isn't being inputed to the html where it will be displayed. Here is my js fiddle. Any input is greatly appreciated

http://jsfiddle.net/g3tg5L15/1/

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

app.controller("EmployeeController", function($scope, DataService){

$scope.empInfo = DataService.getEmpInfo();
$scope.newempInfo = {};

$scope.addNewEmpInfo = function(){
    DataService.saveEmpInfo($scope.newempInfo.employee,      $scope.newempInfo.street,
        $scope.newempInfo.city,$scope.newempInfo.state, $scope.newempInfo.zip);

    $scope.newempInfo = {};
};
$scope.removeEmpInformation = function(index){
    DataService.removeEmpInfo(index);
};
$scope.clearInfo = function(){
    DataService.destroyLocalStorage();
};
});

angular.module('myApp').service("DataService", function(){
var empInfoArray = [];

this.getEmpInfo = function(){
    var employeeInfoArray = JSON.parse(localStorage.getItem("employeeInformationLS")) || [];
    var empInfoArray = employeeInfoArray;

    return empInfoArray;
};

this.saveEmpInfo = function(aName, aStreet, aState, aCity, aZip){
    var savedEmpInfo = {employee : aName, street : aStreet, state : aState, city : aCity, zip : aZip};

    empInfoArray.push(savedEmpInfo);
    localStorage.setItem("employeeInformationLS",   JSON.stringify(empInfoArray));
};

this.removeEmpInfo = function(aIndex){
    empInfoArray.splice(aIndex, 1);
    localStorage.setItem("employeeInformationLS",       JSON.stringify(empInfoArray));
};

this.destroyLocalStorage = function(){
    empInfoArray.splice(0);
    localStorage.clear();
};

});

Answer 1

The main reason for the lack of response and debugging ability is due to AngularJS not loading correctly. For it to load you must change the dropdown in the left menu bar of jsFiddle from onLoad to No wrap - in <body> to load Angular correctly (as shown in the following screenshot).

The following surmises the issues I observed when debugging the code.

The getEmpInfo function within the DataService returns a new array each time it is called which prevents Angular from effectively monitoring it for changes. Instead of this function checking localStorage each time it is called it should just return the local array. The array can be simply loaded from localStorage when the service is first initialized.

The following update to the fiddle demonstrates this http://jsfiddle.net/g3tg5L15/6/ . The changes implemented are as follows:

Change the dropdown in the menu bar of jsFiddle from onLoad to No wrap - in <body> to load Angular correctly.

Added ng-click to 'Add Entry' button in HTML

 <!-- Added ng-click to call addNewEmpInfo function on scope --> <button ng-click='addNewEmpInfo()'>Add Entry</button>

Amended text on employeeInfo header to employee name rather than being hard coded value and added ng-click to remove in HTML.

 <!-- Amended to add.employee rather than hardcoded value --> <h3>{{add.employee}}</h3> <!-- Added ng-click to call removeEmpInformation function on scope --> <button ng-click='removeEmpInformation($index)'>X</button>

Amended the DataService to load from localStorage when it is initialized rather than initializing as an empty array.
```
 var empInfoArray = JSON.parse(localStorage.getItem("employeeInformationLS")) || []; 
```

Amend the getEmpInfo object to just return the local Array

  this.getEmpInfo = function(){ return empInfoArray; };

If necessary you can also watch for events triggered when localStorage changes, as included in the above fiddle. This will pick up changes from different tabs / windows if multiple are open. To monitor for these you must:

Include the services $window and $timeout in the DataService

 angular.module('myApp').service("DataService", function($window, $timeout){

Add a trigger when a storage change occurs.

 //Watch for storage events indicating changes to storage angular.element($window).on('storage', function(event) { //Check if the storage change was for our key if (event.key === 'employeeInformationLS') { //In a timeout (ie on next digest) update the array //This could be done in a smarter way rather than clearing //and rebuilding the entire array $timeout(function(){ empInfoArray.splice(0); var newArr = JSON.parse(localStorage.getItem("employeeInformationLS")) || []; for (var i=0; i<newArr.length; i++){ empInfoArray.push(newArr[i]); } }); } });

Need debugging/outside advice. Angular not working

Question

1 answers

solution1
0 2015-09-12 02:12:39

Need debugging/outside advice. Angular not working

Question

1 answers

solution1 0 2015-09-12 02:12:39

solution1
0 2015-09-12 02:12:39