{"id":12186,"date":"2016-04-27T16:15:09","date_gmt":"2016-04-27T13:15:09","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=12186"},"modified":"2017-12-19T16:29:55","modified_gmt":"2017-12-19T14:29:55","slug":"angular-js-http-post-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/","title":{"rendered":"Angular.js Http Post Example"},"content":{"rendered":"<p>Angular.js is famous for it&#8217;s Rest APIs and the simple ways it offers for us to communicate with remote HTTP servers. All this is done through the <code>$http<\/code> service via the browser&#8217;s <code>XMLHttpRequest<\/code> or JSON with Padding (alias JSONP). Let&#8217;s give a go at learning how to do that in real life examples, shall we?<\/p>\n<h2>1. The $http service<\/h2>\n<p>The AngularJS $http service is a function that makes a call to a remote HTTP server and returns a response. This service takes a single object as it&#8217;s argument: the configuration object. But what exactly is a configuration object?<br \/>\n[ulp id=&#8217;LXJcMJZXSsqGXYW8&#8242;]<\/p>\n<h3>1.1 The configuration object<\/h3>\n<p>It&#8217;s an object describing in detail the request that is to be made and how it should be processed by the receiver. It comes with a set of properties that ensure exactly that, too. Some of these are:<\/p>\n<ul>\n<li><code>method<\/code> &#8211; a string that describes the HTTP method to be used, which can either be GET, POST, DELETE, etc.<\/li>\n<li><code>url<\/code> &#8211; a string which represents the absolute or relative URL to the resource you&#8217;re requesting from.<\/li>\n<li><code>params<\/code> &#8211; a map of objects that will be serialized and appended as GET parameters.<\/li>\n<li><code>data<\/code> &#8211; is either a string or object of data to be sent as request message data.<\/li>\n<li><code>eventHandlers<\/code> &#8211; event listeners that are to be bound to the XMLHttpRequest.<\/li>\n<li><code>timeout<\/code> &#8211; is the timeout in milliseconds, or promise that should abort the request when resolved.<\/li>\n<\/ul>\n<p>These are the most important ones, but note that there are a number of other properties related to it, which you can very easily look up when you need them. The configuration object returns a promise that will be resolved to a response object when the request succeeds or fails.<\/p>\n<h3>1.2 The syntax<\/h3>\n<p>This may seem a bit hazy for now, but let&#8217;s explain the general way to generate an HTTP request using $http, and it&#8217;ll be much clearer. Take a look at the syntax below:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>syntax.js<\/em><\/span><\/p>\n<pre class=\"brush:js\">$http({\r\n  method: 'POST',\r\n  url: '\/yourURL'\r\n}).then(function successCallback(response) {\r\n                \/\/code for what happens when the request is successful\r\n  }, function errorCallback(response) {\r\n                \/\/code for what happens when there's an error\r\n  });\r\n<\/pre>\n<p>What we&#8217;ve done here is pretty simple. You specify the <code>method<\/code> and <code>url<\/code> of the $http request, and then use the <code>then()<\/code> function to invoke two actions: either the first callback named <code>successCallback()<\/code> which will be run asynchronously when the response is available, as it takes one as an argument, or the second callback <code>errorCallback(response)<\/code> which is invoked asynchronously in case the server returns an error status, or one occurs along the way.<\/p>\n<h3>1.3 The response object<\/h3>\n<p>The <code>response<\/code> object, being exactly that, enjoys some perks of it&#8217;s own. It has a number of properties which can be thought as components of the object. These would be:<\/p>\n<ul>\n<li><code>data<\/code> &#8211; is a string containing the response body transformed using the transformation functions<\/li>\n<li><code>status<\/code> &#8211; a number which serves as a code representing the status of the response<\/li>\n<li><code>headers<\/code> &#8211; is the header getter function<\/li>\n<li><code>config<\/code> &#8211; the configuration object that was used to generate the request<\/li>\n<li><code>statusText<\/code> &#8211; HTTP status text of the response<\/li>\n<\/ul>\n<p>The status can be any number, but only 200-299 will be considered success statuses and the rest will be taken for errors and will trigger the <code>errorCallback<\/code>. In case the status is a negative number it will be normalized to 0. Usually -1 is used to show that the request was aborted, and if the response is a redirect the status will be the final response status code.<\/p>\n<h2>2. Shortcut Methods of $http<\/h2>\n<p>AngularJS provides us with a number of shortcut methods for the basic usage of the $http service. These shortcut methods would be:<\/p>\n<ol>\n<li><code>$http.get<\/code> &#8211; generates Http GET request and retrieves server data if the request is successful.<\/li>\n<li><code>$http.post<\/code> &#8211; generates Http POST request and retrieves server data if the request is successful.<\/li>\n<li><code>$http.put<\/code> &#8211; generates Http PUT request and retrieves server data if the request is successful.<\/li>\n<li><code>$http.delete<\/code> &#8211; generates Http DELETE request and retrieves server data if the request is successful.<\/li>\n<li><code>$http.head<\/code> &#8211; generates Http HEAD request and retrieves server data if the request is successful.<\/li>\n<li><code>$http.patch<\/code> &#8211; generates Http PATCH request and retrieves server data if the request is successful.<\/li>\n<li><code>$http.jsonp<\/code> &#8211; generates Http JSONP request and retrieves server data if the request is successful.<\/li>\n<\/ol>\n<p>All of these methods send a request to the HTTP remote server and get data from them in response. We&#8217;ll explain each of them shortly and then focus on <code>$http.post<\/code>. After we finish with all the details of that one, you&#8217;ll know the drill about basically each of them.<\/p>\n<p>There are two (very similar, if I might add) scenarios of how the syntax of these methods could go. The first one is valid for all the methods above except <code>$http.post<\/code> and <code>$http.put<\/code>. It would go like below:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>syntax.js<\/em><\/span><\/p>\n<pre class=\"brush:js\">$http.get('\/yourURL', config).then(successCallback, errorCallback);\r\n<\/pre>\n<p>We&#8217;ve used <code>$http.get<\/code> as an example, but it&#8217;s the same for all of them. The method only takes one mandatory parameter as an argument, and that would be the URL of the resource to which you&#8217;re sending the request. In our case, that is <code>\/yourURL<\/code>.<\/p>\n<p>However, you can also add a second argument which you&#8217;re not obligated to, which is the configuration object, used to describe the request and how it is to be handled in detail. After that you only have to invoke the callbacks in case of success or failure, which we&#8217;ve aptly named <code>successCallback<\/code> and <code>errorCallback<\/code>. To do that, we&#8217;ve used the <code>then()<\/code> function, assuming that you&#8217;re using a version of Angular that is released later than v1.4.8 (or usually considered v1.5.0).<\/p>\n<p>Let&#8217;s see now the syntax for the two remaining methods: <code>$http.post<\/code> and <code>$http.put<\/code>. The code would go like below:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>syntax.js<\/em><\/span><\/p>\n<pre class=\"brush:js\">$http.put('\/yourURL', data, config).then(successCallback, errorCallback);\r\n<\/pre>\n<p>As you can see for yourself, there is basically no other difference except one added argument to the method. That would be <code>data<\/code> and it&#8217;s an argument you&#8217;re obliged to pass on. Like we mentioned, it&#8217;s an object which would contain the response body transformed using the transform functions.<\/p>\n<h2>3. The $http.post shortcut<\/h2>\n<p>We saw how to use each shortcut of the $http service in general, but let&#8217;s focus on just one of them and take it apart. We&#8217;ll focus on $http.post for this example, but as previously made clear, you can use this as a guide for all the other methods as well.<\/p>\n<h3>3.1 Syntax<\/h3>\n<p>While you&#8217;re already familiar with the syntax in case your AngularJs is v1.4.8+, you might want to know how to use this feature in case you decide that your version of choice is of an earlier date than that. The syntax would look like that in the code snippet below:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>syntax.js<\/em><\/span><\/p>\n<pre class=\"brush:js\">   $http.post('\/yourURL', data, config)\r\n              .success(function (data, status, headers, config) {\r\n              })\r\n              .error(function (data, status, header, config) {\r\n              });            \r\n<\/pre>\n<p>You&#8217;re already familiar with the greater part of this code snippet, and while you might already have guessed what the other parts do, we want to make it clearer for everyone. You see that we have used two methods there, which are <code>success()<\/code> and <code>error()<\/code>. These methods are called <code>$http<\/code> legacy promise methods, and yes, they were used to invoke the <code>successCallback<\/code>s and <code>errorCallback<\/code>s.<\/p>\n<p>However, they have been deprecated since the release of Angular.js v1.4.8, and instead of those, we use the standard <code>then()<\/code> method. If you insist on using them you have to make sure that <code>$httpProvider.useLegacyPromiseExtensions<\/code> is set to TRUE, because if not, you&#8217;ll have an error thrown.<\/p>\n<h3>3.2 Legacy Promise Methods vs. <em>then()<\/em><\/h3>\n<p>As Legacy Promise Methods we named two of them: <code>success()<\/code> and <code>error()<\/code>. While these have been arguably useful as <code>$http<\/code> promise methods, they&#8217;re not standard, meaning only <code>$http<\/code> promises have had them, while all other regular promises used <code>then()<\/code>. Which brings us to the first reason for these methods being deprecated: inconsistency. It isn&#8217;t very nice when you have to switch from one way to another. If I can just keep using one method while choosing from a number of them, then I&#8217;ll use the one which is all encompassing and is valid for the bigger picture, right? It&#8217;s only a matter of habit.<\/p>\n<p>&#8230;.not that much. While consistency is a big part of it, there are other reasons, which I&#8217;d call more important, for why we only use <code>then()<\/code> in the newer versions of Angular. So, by now we know that one of the major benefits of promises is the ability to flatten and chain code. While <code>success()<\/code> and <code>error()<\/code> might be visually appealing and fairly convenient for simple calls with no chaining, when chaining them we&#8217;re in for a little bit of a treat.<\/p>\n<p>While <code>then()<\/code> would give us an new promise each time it&#8217;s fired, <code>success()<\/code> and <code>error()<\/code> would give us the original promise and not a derived one, which is the whole point of chaining to begin with. That happens not because these two methods do not allow chaining, as they formally do. The reason is because when using <code>success()<\/code>, all the handlers will be fired during the same cycle, and the second handler will be fired before the newly returned promise is resolved. That would give us errors, and it&#8217;s only reasonable that the methods are deprecated.<\/p>\n<h2>4. Simple <em>$http.post<\/em> example<\/h2>\n<p>What we will do here is introduce you to a simple example of the usage of <code>$http.post<\/code>. The idea on the user&#8217;s point of view is to submit a string (which can be a name, number, or whatever you wish) through an input field and then have that information displayed. For that we only have to use the <code>$http.post<\/code> shorcut method and a function that makes the JSON data into a string. The code for the HTML part would go like below:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>post.html<\/em><\/span><\/p>\n<pre class=\"brush:xml\">&lt;body ng-app='myApp'&gt;\r\n\r\n&lt;div ng-controller=\"myCtrl\"&gt;\r\n\r\n    &lt;form ng-submit=\"sendPost()\"&gt;\r\n        &lt;input ng-model=\"newName\"\/&gt;\r\n        &lt;button type=\"submit\"&gt;Send&lt;\/button&gt;\r\n&lt;\/form&gt;\r\n\r\n{{hello.name}}\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n<\/pre>\n<p>As you see, we&#8217;ve used standard AngularJS syntax such as the one for the <code>ng-app<\/code> or <code>ng-controller<\/code>. We&#8217;ve bound the information entered in the input field to the <code>ng-model<\/code> and then we have used the expression to display it. Let&#8217;s take a look at all the behind the scenes of this part:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>post.js<\/em><\/span><\/p>\n<pre class=\"brush:js\">angular.module('myApp', [])\r\n.controller('myCtrl', function ($scope, $http) {\r\n    $scope.hello = {name: \"ERA\"};\r\n    $scope.newName = \"\";\r\n    $scope.sendPost = function() {\r\n        var data = $.param({\r\n            json: JSON.stringify({\r\n                name: $scope.newName\r\n            })\r\n        });\r\n        $http.post(\"\/echo\/json\/\", data).success(function(data, status) {\r\n            $scope.hello = data;\r\n        })\r\n    }\r\n})\r\n<\/pre>\n<p>First, before any name is entered in the input field, you&#8217;ll have the default <code>ERA<\/code> displayed, which we have saved at the <code>$scope.hello<\/code> variable. The initial information in the input field is just an empty string, and we&#8217;ve saved it into the <code>$scope.newName<\/code>, as you might have noticed in the HTML part of the code.<\/p>\n<p>You might have also noticed that the <code>ng-submit<\/code> would invoke a function named <code>sendPost()<\/code> which is the one that &#8220;stringifies&#8221; the data entered in the input field and posts it using <code>$http.post<\/code> by replacing <code>$scope.hello<\/code> with that info.<\/p>\n<p>What is worth noting in this code snippet is the syntax used for the <code>$http.post<\/code> shortcut, which is the one used with the earlier versions of Angular JS. Remember to use the standard method <code>then()<\/code> instead of <code>success()<\/code> if you&#8217;re using the latest versions.<\/p>\n<p>Don&#8217;t forget to include any external parts necessary into your main document such as the AngularJS file (I did forget that once while learning Angular. Don&#8217;t laugh!) or jQuery. With that, you&#8217;re set to go!<\/p>\n<h2>5. Download the source code<\/h2>\n<p>This was an example of $http.post using AngularJS.<\/p>\n<div class=\"download\"><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here:\u00a0<strong><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/04\/http.post_.zip\">$http.post<\/a><\/strong><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Angular.js is famous for it&#8217;s Rest APIs and the simple ways it offers for us to communicate with remote HTTP servers. All this is done through the $http service via the browser&#8217;s XMLHttpRequest or JSON with Padding (alias JSONP). Let&#8217;s give a go at learning how to do that in real life examples, shall we? &hellip;<\/p>\n","protected":false},"author":25,"featured_media":909,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[],"class_list":["post-12186","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Angular.js Http Post Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Angular.js is famous for it&#039;s Rest APIs and the simple ways it offers for us to communicate with remote HTTP servers. All this is done through the $http\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular.js Http Post Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Angular.js is famous for it&#039;s Rest APIs and the simple ways it offers for us to communicate with remote HTTP servers. All this is done through the $http\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/era.balliu.7\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-27T13:15:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-19T14:29:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Era Balliu\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@BalliuEra\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Era Balliu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/\"},\"author\":{\"name\":\"Era Balliu\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e\"},\"headline\":\"Angular.js Http Post Example\",\"datePublished\":\"2016-04-27T13:15:09+00:00\",\"dateModified\":\"2017-12-19T14:29:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/\"},\"wordCount\":1799,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"articleSection\":[\"Angular.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/\",\"name\":\"Angular.js Http Post Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"datePublished\":\"2016-04-27T13:15:09+00:00\",\"dateModified\":\"2017-12-19T14:29:55+00:00\",\"description\":\"Angular.js is famous for it's Rest APIs and the simple ways it offers for us to communicate with remote HTTP servers. All this is done through the $http\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Angular.js\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Angular.js Http Post Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e\",\"name\":\"Era Balliu\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g\",\"caption\":\"Era Balliu\"},\"description\":\"Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML\/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.\",\"sameAs\":[\"http:\/\/www.webcodegeeks.com\/\",\"https:\/\/www.facebook.com\/era.balliu.7\",\"https:\/\/www.instagram.com\/eraballiu\/\",\"https:\/\/www.linkedin.com\/in\/eraballiu\",\"https:\/\/www.pinterest.com\/001r2gw0jt0ln6d\/\",\"https:\/\/x.com\/BalliuEra\",\"https:\/\/www.youtube.com\/c\/eraballiu\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/era-balliu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular.js Http Post Example - Web Code Geeks - 2026","description":"Angular.js is famous for it's Rest APIs and the simple ways it offers for us to communicate with remote HTTP servers. All this is done through the $http","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/","og_locale":"en_US","og_type":"article","og_title":"Angular.js Http Post Example - Web Code Geeks - 2026","og_description":"Angular.js is famous for it's Rest APIs and the simple ways it offers for us to communicate with remote HTTP servers. All this is done through the $http","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/era.balliu.7","article_published_time":"2016-04-27T13:15:09+00:00","article_modified_time":"2017-12-19T14:29:55+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","type":"image\/jpeg"}],"author":"Era Balliu","twitter_card":"summary_large_image","twitter_creator":"@BalliuEra","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Era Balliu","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/"},"author":{"name":"Era Balliu","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e"},"headline":"Angular.js Http Post Example","datePublished":"2016-04-27T13:15:09+00:00","dateModified":"2017-12-19T14:29:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/"},"wordCount":1799,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","articleSection":["Angular.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/","name":"Angular.js Http Post Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","datePublished":"2016-04-27T13:15:09+00:00","dateModified":"2017-12-19T14:29:55+00:00","description":"Angular.js is famous for it's Rest APIs and the simple ways it offers for us to communicate with remote HTTP servers. All this is done through the $http","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-http-post-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Angular.js","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/"},{"@type":"ListItem","position":4,"name":"Angular.js Http Post Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e","name":"Era Balliu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g","caption":"Era Balliu"},"description":"Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML\/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.","sameAs":["http:\/\/www.webcodegeeks.com\/","https:\/\/www.facebook.com\/era.balliu.7","https:\/\/www.instagram.com\/eraballiu\/","https:\/\/www.linkedin.com\/in\/eraballiu","https:\/\/www.pinterest.com\/001r2gw0jt0ln6d\/","https:\/\/x.com\/BalliuEra","https:\/\/www.youtube.com\/c\/eraballiu"],"url":"https:\/\/www.webcodegeeks.com\/author\/era-balliu\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/12186","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=12186"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/12186\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/909"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=12186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=12186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=12186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}