AngularJS 1 - How to pass app.js list of values to controller.js

Question

This is regarding Angular JS One, so I created a simple app in my plunkr. What I did? , I created a factory called app.js and a myController.js.

The problem is the Get Method from controller.js, i dont know how to write it properly so it will pass the list of data to the html. Please check on methods getData(app.js)and Get(controller.js). What are the mistakes?

Note : Add and Edit are working fine using these three layers (app->controller->view) that i need.

PS: I tried nothing yet.

Thanks!!! John

Below is my app.js or business

    angular.module('myFirstApp',['ngRoute'])

.config(function($routeProvider){
  $routeProvider
  .when('/home',{templateUrl : 'home.html'})
  .when('/people',{templateUrl : 'people.html'})
  .when('/about',{templateUrl : 'about.html'})
  .when('/contact',{templateUrl : 'contact.html'})

})


.factory('personFactory',function(){

    function getData(){

      $http.get('iphone.json').success(function(result){
      return  result;
      }).error(function(error){
      alert(error.error + "/" + error.statusCode);
      });

    }


    function insertData(Name,Email,Password,Mobile){

      //update data to database
      var x = "Record added successfuly.";
      return x;
    }


    function updateData(){ 

      //update data to database
      var x = "Record updated successfuly.";
      return x;
    }


    return {
        getData : getData,
                insertData,
                updateData


            };


  })

Below is my controller.js

   angular.module('myFirstApp')

.controller('myController',function($scope,$http,personFactory){


  $scope.Add = function(){
    var x = personFactory.insertData($scope.Name,$scope.Email,$scope.Password,$scope.Mobile,$scope.result);
    $scope.Message = x;
    return $scope.Message;
  }


  $scope.Edit = function(){
    var x = personFactory.updateData();
    $scope.Message = x;
  return $scope.Message;
  }


   $scope.Get = function(){
    var x = personFactory.getData();
    $scope.PeopleList = x;
    return $scope.PeopleList;
  }



})

Below is my view

    <html>
  <head>

  <title></title>
  <script src="app.js"></script>
  </head>
  <body>
    <p>People</p>

    <table ng-controller='myController'>
      <thead>
        <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Model</th>
        <th>Status</th>
        <th>Purchased on</th>
        </tr>
        </thead>
      <tr ng-repeat="values in PeopleList">
        <td>{{values.name}}</td>
        <td>{{values.email}}</td>
        <td>{{values.model}}</td>
        <td>{{values.status}}</td>
        <td>{{values.purchasedate}}</td>
        </tr>
      </table>
  </body>
</html>

xxfast · Accepted Answer · 2017-03-13 01:18:10Z

1

The factory needs to return a JS Object that encapsulate all the functionalities, like this

   // Data factory
   app.factory("Data", function () {
      return {
         add: function () {
            // add logic here
         },
         get: function () {
            // get logic here
         }
      }
   }

answered Mar 13, 2017 at 1:18

xxfast

7375 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Evandro Macedo · Accepted Answer · 2017-03-13 03:16:26Z

0

I guess you're having a little problem on the $http.get('iphone.json') within the factory. Maybe you should try to use a callback to handle that, like this:

app.js:

function getData(callback) {
    $http.get('iphone.json').success(function(result){
        callback(result);
    }).error(function(error){
        alert(error.error + "/" + error.statusCode);
    });
}

controller.js:

$scope.Get = function(){
    personFactory.getData(function(result) {
        $scope.PeopleList = result;
    });
}

answered Mar 13, 2017 at 3:16

Evandro Macedo

11 bronze badge

1 Comment

loki_thor Over a year ago

what happens next?

Collectives™ on Stack Overflow

AngularJS 1 - How to pass app.js list of values to controller.js

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related