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>
2 answers
solution1
1 2017-03-13 01:18:10
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
}
}
}
solution2
0 2017-03-13 03:16:26
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;
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.