I have an HTML which looks like -
<div ng-controller="PostsCtrl">
<ul ng-repeat="post in posts" style="list-style: none;">
<li style="padding: 5px; background-color: #f5f5f5;">
<h4>
{{post.postTitle}}
</h4>
<div class="post-details" ng-show="showDetails">
<p>{{post.postContent}}</p>
</div>
</li>
</ul>
</div>
Now the data is being populated from a JSON based REST URL and being displayed. I also have a form that will be adding new post to the database-
<form data-ng-submit="submit()"
data-ng-controller="FormSubmitController">
<h3>Add Post</h3>
<p>
Title: <input type="text" data-ng-model="postTitle">
</p>
<p>
Content: <input type="text" data-ng-model="postContent">
</p>
<p>
Tags: <input name="postTags" data-ng-model="postTags" ng-list
required>
</p>
<input type="submit" id="submit" value="Submit" ng-click="loadPosts()" /><br>
</form>
I basically want to achieve two things -
1. As soon as i add new post it shows up in the list of posts above.
2. As soon as i manually add a new post in the backend, front end automatically updates.
Is it possible to achieve both using angular and if yes how will i be able to do that.
Below is my controller code, which as of now is showing me existing posts as well as letting me add new post to DB.
<script>
var app = angular.module("MyApp", []);
app.controller("PostsCtrl", function($scope, $http) {
$http.get('http://localhost:8080/MyApp/posts')
.success(function(data, status, headers, config) {
$scope.posts = data;
}).error(function(data, status, headers, config) {
console.log("Error in fetching the JSON data.");
});
$scope.$watch('posts', function(newVal, oldVal){
console.log('changed');
alert('hey, myVar has changed!');
}, true);
/*$scope.$watch('posts', function() {
alert('hey, myVar has changed!');
console.log("test log");
$scope.$digest();
});*/
});
app.controller('FormSubmitController', [ '$scope', '$http',
function($scope, $http) {
$scope.loadPosts = function() {
$http.get('http://localhost:8080/MyApp/posts')
.success(function(data, status, headers, config) {
$scope.posts = data;
alert(JSON.stringify(data));
//$scope.posts_updated = data;
}).
error(function(data, status, headers, config) {
console.log("Error in fetching the JSON data.");
});
}
$scope.list = [];
$scope.submit = function() {
var formData = {
"postTitle" : $scope.postTitle,
"postContent" : $scope.postContent,
"postTags" : $scope.postTags,
"postedBy" : "admin"
};
var response = $http.post('addPost', formData);
response.success(function(data, status, headers, config) {
console.log("na");
});
response.error(function(data, status, headers, config) {
alert("Exception details: " + JSON.stringify({
data : data
}));
});
//Empty list data after process
$scope.list = [];
};
} ]);
</script>
Any help on this will be really appreciable.
1: on your success of post, you can just push the added object into your posts list. This will trigger the two-way-binding, and the object will "automatically" appear in your ng-repeater.
$scope.posts.push(element);
2: This one is a bit tricky, since angular is a client-side application, it doesn't recognize what happens on the server-side. What you have to do to make this work is to look at websockets (like SignalR or similar) that can make a push to your client whenever something gets added. This also depends on that your "manual" insert is done using a programatically method. Doing it directly from database-changes is going to be alot more painfull
Initialize $scope.posts before invoking $http request
$scope.posts = [];
Since you are using $http service, it should automatically repaint ng-repeat when new data found. So you don't need be to worried about it
Very important thing is that you don't need to call $digest when you use $http service. Using $digest blindly is a very bad practice and is major performance issue. In the end of $http service angular automatically call $digest so you don't need to call again
Related
I am using AngularJs 1.5 RC build.
I have a view wherein I am using ng-repeat to iterate over a collection , like so
<tr ng-repeat="user in users">
<td>{{user.JobID}}</td>
<td>{{getManager(user.userID)}}</td>
<td>{{user.StatusDesc}}</td>
<td>{{user.StartedAt}}</td>
</tr>
The idea here is to use the getManager function to get the name of the manager for each and every user in the users collection.
As an aside , I have to use this approach since the API is not returning me all the information.
This is how the getManager function looks like now.
$scope.getManager = function($id) {
return "John Doe";
}
The entire controller looks as follows
var app = angular.module('userapp', ['ui.bootstrap']);
app.controller('MainController', ['$scope','$http', function($scope, $http) {
$scope.getUsers = function() {
$http.get("http://localhost/getUsers").
success(function(data, status, headers, config) {
$scope.users = data.resource;
}).
error(function(data, status, headers, config) {
// log error
console.error("An error as encountered. Error follows:");
console.error(data);
});
}
$scope.getManager= function($id) {
return "John Doe";
}
}]);
So in my page view, I am getting "John Doe" as a manager for all my users.
Problem
The problem begins whenever I try to get the real manager for a user. So if i replace my dummy getManager with the following function
$scope.getManager = function($id) {
$http.get("http://localhost/user/manager/"+$id).
success(function(data, status, headers, config) {
return (data.resource[0].ManagerName);
}).
error(function(data, status, headers, config) {
// log error
console.error("An error as encountered. Error follows:");
console.error(data);
});
}
AngularJs starts complaining and fails with the following
https://docs.angularjs.org/error/$rootScope/infdig?p0=10&p1=%5B%5D
Can you please let me know what might be happening here.
Please note , I am an Angular noob, hence your patience will be well appreciated.
Thanks
You should call ajax in that way inside {{}} interpolation. It will get called on each digest cycle and will throw $rootScope/infdig error.
So I'd suggest you to call the getManager method as soon as you retrieve a data from server. Then after getting data from a server you need to call getManager method just by passing UserId(look I change getManager implementation to return managerName by returning data). After getting managerName you need to bind that manager name to user object & use {{user.ManagerName}} on the HTML.
Markup
<tr ng-repeat="user in users">
<td>{{user.JobID}}</td>
<td>{{user.managerName}}</td>
<td>{{user.StatusDesc}}</td>
<td>{{user.StartedAt}}</td>
</tr>
Code
$scope.getUsers = function() {
$http.get("http://localhost/getUsers")
.success(function(data, status, headers, config) {
$scope.users = data.resource;
angular.forEach($scope.users, function(user){
(function(u){
$scope.getManager(u.UserID).then(function(name){
u.ManagerName = data;
})
})(user);
})
})
};
$scope.getManager = function($id) {
return $http.get("http://localhost/user/manager/"+$id).
then(function(response) {
var data = response.data;
return (data.resource[0].ManagerName);
},function(error) {
console.error("An error as encountered. Error follows:");
});
};
Side Note
Don't use .success & .error function on $http calls as they are
deprecated.
This is a really bad practice. If you have N users, you will send N queries to fetch every data. You should return this data in http://localhost/getUsers response.
You can try:
$scope.getManager = function($id) {
return $http.get("http://localhost/user/manager/"+$id)
...
}
Hello angular experts!
I used this custom directive for a table (implementation) but when I try to use $http service load that json array from a file, json is not loaded into $scope.items, I am a beginner in angular and on fairly advance javascript thus I need some help from you.
controller initialization
fessmodule.controller('ptiListController', function($http, $scope, $filter) {
$http service call
$http.get('data/ptis/ptis.json').then(function(response) {
$scope.items = response.data;
}
);
browser console error
TypeError: Cannot read property 'length' of undefined
at Scope.$scope.groupToPages (http://localhost:8000/app/modules/app/phone/scripts/pti-list-controller.js:75:49)
at Scope.$scope.search (http://localhost:8000/app/modules/app/phone/scripts/pti-list-controller.js:68:16)
at new <anonymous> (http://localhost:8000/app/modules/app/phone/scripts/pti-list-controller.js:117:12)
at invoke (http://localhost:8000/app/lib/js/angular.js:4185:17)
at Object.instantiate (http://localhost:8000/app/lib/js/angular.js:4193:27)
at http://localhost:8000/app/lib/js/angular.js:8462:28
at link (http://localhost:8000/app/lib/js/angular-route.js:975:26)
at invokeLinkFn (http://localhost:8000/app/lib/js/angular.js:8219:9)
at nodeLinkFn (http://localhost:8000/app/lib/js/angular.js:7729:11)
at compositeLinkFn (http://localhost:8000/app/lib/js/angular.js:7078:13) <div ng-view="" class="ng-scope">
so what I have changed from the fiddle is:
instead of:
$scope.items = [
{"id":1,"name":"name 1","description":"description 1","field3":"field3 1","field4":"field4 1","field5 ":"field5 1"},
{"id":2,"name":"name 2","description":"description 1","field3":"field3 2","field4":"field4 2","field5 ":"field5 2"},
{"id":3,"name":"name 3","description":"description 1","field3":"field3 3","field4":"field4 3","field5 ":"field5 3"}
];
i have changed to this:
$http.get('data/ptis/ptis.json').then(function(response) {
$scope.items = response.data;
}
);
and also, I have tried using the service call as:
$http.get('data/ptis/ptis.json').success(function(data) {
$scope.items = data;
});
and got the same behavior.
Thank you in advance!
I believe you are using the $http.get wrong. Try $http.JSONP this pattern:
$scope.items = {}; // <-- initialize empty object
$http.jsonp('/someJSONUrl').
success(function(data) {
// this callback will be called asynchronously
// when the response is available
$scope.items = data; // <-- fill object with data
});
You can't use $scope.items before it holds some data. That's why you have to initialize it first, as empty object/array then fill it with data and angular magic should do the rest :)
I just do something like this as mention in document and it work:
$http.get('someUrl').
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
Here the sample:
angular.module('myApp', [])
.controller('JustCtrl', function($scope, $http) {
$scope.ptis = [];
// Simple GET request example :
$http.get('https://gist.githubusercontent.com/idhamperdameian/239cc5a4dbba4488575d/raw/0a2ea4c6c120c9a8f02c85afcf7a31941ef74d3a/ptis.json').
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
$scope.ptis = data;
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="JustCtrl">
<span ng-repeat="p in ptis">
{{p.name}}, {{p.description}}, etc...<br>
</span>
</div>
Or you may prefer to this demo.
I'm new to Angularjs and I'm trying to build a simple location finder widget. I have a service set up to contain the location data in a json block. Then I have a controller for the search form that makes a http call to get the json. Then I update the data in service. The service is also used in the location results controller to set the data for the directives on the front end. I've tried a bunch of different things and I'm not sure what I'm doing wrong. Thanks!
(function() { // start closure wrap
var app = angular.module('store_locator', []);
app.service('$store_location_data', function() {
var store_location_data = this;
store_location_data.data = [];
store_location_data.update_data = function(data) {
store_location_data.data = data;
}
});
app.controller('StoreLocatorFormControllor', [ '$http', '$store_location_data', function($http, $store_location_data) {
this.search_form = {};
this.searchLocations = function() {
$http.get('services/locations/').
success(function(data, status, headers, config) {
$store_location_data.update_data(data);
}).
error(function(data, status, headers, config) {
alert('fail');
});
this.search_form = {};
} // end form submit
}]);
app.controller('location_results', [ '$store_location_data', function($store_location_data) {
this.locations = $store_location_data.data;
}]);
})(); // end closure wrap
HTML:
<form name="storeLocatorForm" ng-controller="StoreLocatorFormControllor as storeLocFormCtrl" ng-submit="storeLocFormCtrl.searchLocations()">
<p>
<input ng-model="storeLocFormCtrl.search_form.zip_code" type="text" name="zip_code" value="" />
</p>
<p>
<select ng-model="storeLocFormCtrl.search_form.distance">
<option value="20">20</option>
<option value="40">40</option>
<option value="60">60</option>
</select>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
<div ng-controller="location_results as results" ng-show="results.locations.length">
<div ng-repeat="location in results.locations">
<h1>{{ location.name }}</h1>
</div>
</div>
You are directly assigning service data at the time of loading controller.
You shouldn't do that because when you are assigning data from service the ajax call may just started or might not, but for sure it hasn't completed. So for that reason you service data is empty always.
I'd suggest you to use $broadcast, this will be useful in your case.
When you get the locations data inside your controller you will $broadcast event inside your controller, and that will listen by the controller whichever listing to that event using $on
StoreLocatorFormControllor
app.controller('StoreLocatorFormControllor', [ '$http', '$rootScope', '$store_location_data', function($http, $rootScope, $store_location_data) {
this.search_form = {};
this.searchLocations = function() {
$http.get('services/locations/').
success(function(data, status, headers, config) {
$store_location_data.update_data(data);
$rootScope.$broadcast('locationFetched');
}).
error(function(data, status, headers, config) {
alert('fail');
});
this.search_form = {};
} // end form submit
}]);
location_results
app.controller('location_results', [ '$store_location_data', function($store_location_data) {
//will call when locationFetched event gets broadcast
$rootScope.$on('locationFetched', function(event, data){
this.locations = $store_location_data.data;
});
}]);
Hope this will be helpful to you. Thanks.
I just started with learning Angular and now i'm busy with an web application that shows some records i fetched from a JSON. The JSON looks like:
"results": [
{
"easy": false,
"id": 1,
"title": "title",
}
]
i am parsing that on this way (seems correct to me)
var app = angular.module("DB", []);
app.controller("Controller", function($scope, $http) {
$http.defaults.headers.common["Accept"] = "application/json";
$http.get('api_url').
success(function(data, status, headers, config) {
$scope.thing = data.results;
});
});
So now that i am in this JSON file i need to get the ID (in this case its 1) and with that ID i need to do a new request api.com/game/{id} to get more detailed information about the result from the first file.
What is the best way to do that?
$http.get('api.com/game/' + $scope.thing.id, function(...){ });
Point to note, you do not have to manually parse JSON with angular. It will do that for you. So data.results already has the object representing your response.
i think it is good idea if you do like this:
var app = angular.module("DB", []);
app.controller("Controller", function($scope, $http) {
$http.defaults.headers.common["Accept"] = "application/json";
$http.get('api_url').
success(function(data, status, headers, config) {
$scope.thing = data.results;
$scope.id=data.results[0].id;
gameInfo();
});
});
var gameInfo=function(){
$http.get('api.com/game/'+$scope.id).
success(function(data, status, headers, config) {
$scope.newThing = data;
});
}
Also take a look at ngResource which is a module that gives you more fine-grained control over HTTP requests. It does parameter replacement among other things (custom interceptors, etc.)
https://docs.angularjs.org/api/ngResource/service/$resource
I'm just getting started with Angular.js and I'm not sure how to "link" two "models" together. I have the following code in my index.php file
<div ng-controller="AccountCtrl">
<h2>Accounts</h2>
<ul>
<li ng-repeat="account in accounts">
<span>{{account.id}} {{account.ownedBy}}</span>
</li>
</ul>
</div>
<div ng-controller="TransactionCtrl">
<h2>Transactions</h2>
<ul>
<li ng-repeat="transaction in transactions">
<span>{{transaction.id}} {{transaction.timestamp}} {{transaction.amount}} {{transaction.description}} {{transaction.account}}</span>
</li>
</ul>
</div>
and the following js
function AccountCtrl($scope, $http) {
// initialize Data
$http({
method:'GET',
url:'http://api.mydomain.ca/accounts'
}).success(function(data, status, headers, config) {
$scope.accounts = data;
}).error(function(data, status, headers, config) {
alert('Error getting accounts. HTTP Response status code: '+status);
});
}
function TransactionCtrl($scope, $http) {
// initialize Data
$http({
method:'GET',
url:'http://api.mydomain.ca/transactions'
}).success(function(data, status, headers, config) {
$scope.transactions = data;
}).error(function(data, status, headers, config) {
alert('Error getting transactions. HTTP Response status code: '+status);
});
}
So in my example each account will have many transactions and I want to add a function to my account controller to calculate the balance of the account based on the transactions but I'm not sure how to do that because they are in different $scopes.
Is there a way to do this in Angular or do I have to return the "linked" transaction information in my JSON response from the server when I get the accounts?
I guess account holds transactions, right?
Then I guess, you can create an service to manage account / transaction data.
Inject this service into both controllers.
module = angular.module('app', []);
module.factory('accountService', function($http) {
var obj = {
// handles http communication to/from server.
// also has methods/getters/setters for data manipulation, etc.
};
return obj;
});
module.controller('AccountCtrl', function($scope, accountService) {
// access accountService for the view-databind.
});
module.controller('TransactionCtrl', function($scope, accountService) {
// access accountService for the view-databind.
});
Since you are making both http requests at the same time, I would change my service to return the transactions as a property of the account object. Then it would be one server call, less overhead, and you data would be in the format that you need it in. I think you have the right idea with your last question.
And good choice using Angular. If you haven't found them yet, John Lindquest released a great set of videos at egghead.io.