{"id":20314368,"url":"https://github.com/normandy72/ajax-with-http-service","last_synced_at":"2026-05-11T17:32:19.967Z","repository":{"id":153902726,"uuid":"586913206","full_name":"Normandy72/Ajax-with-http-Service","owner":"Normandy72","description":"Ajax with $http Service in AngularJS. Coursera course \"Single Page Web Applications with AngularJS\" by Yaakov Chaikin.","archived":false,"fork":false,"pushed_at":"2023-01-09T17:14:47.000Z","size":69,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-04T08:44:56.625Z","etag":null,"topics":["ajax","ajax-request","angular","angularjs","html","html5","javascript","js"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Normandy72.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-09T14:25:42.000Z","updated_at":"2023-01-09T16:36:02.000Z","dependencies_parsed_at":"2023-05-06T16:46:31.009Z","dependency_job_id":null,"html_url":"https://github.com/Normandy72/Ajax-with-http-Service","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Normandy72/Ajax-with-http-Service","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Normandy72%2FAjax-with-http-Service","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Normandy72%2FAjax-with-http-Service/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Normandy72%2FAjax-with-http-Service/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Normandy72%2FAjax-with-http-Service/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Normandy72","download_url":"https://codeload.github.com/Normandy72/Ajax-with-http-Service/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Normandy72%2FAjax-with-http-Service/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32905833,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-11T17:09:15.040Z","status":"ssl_error","status_checked_at":"2026-05-11T17:08:45.420Z","response_time":120,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ajax","ajax-request","angular","angularjs","html","html5","javascript","js"],"created_at":"2024-11-14T18:14:58.643Z","updated_at":"2026-05-11T17:32:19.951Z","avatar_url":"https://github.com/Normandy72.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## $http Service\n## --- 1 ---\nCalling HTTP service is very simple.\n```\n$http({\n    method: \"GET\",\n    url: \"http://someurl\",\n    params: {param1: \"value1\"},\n    ....\n}).then(...);\n```\nThe HTTP service is itself a function, so you can actually call it directly. It takes just one argument, a configuration object which Angular expects to have some pretty fine properties such as method, URL, and so on. It returns a promise so that's why you can invoke the familiar `.then` method.\n\nThe only required property of the configuration object is the __URL__. If the method property is not specified the HTTP method GET is assumed.\n\nAnother property worth taking a look at is the params property. That property can take an object whose property names become parameter names and their corresponding values become the values for those parameters.\n\n` params: {param1: \"value1\"}` - resultant URL: `http://someurl?param1=value1`\n\nThe parameter values are automatically URL encoded. What that means: a URL is not allowed to have spaces and other special characters. If the parameter value your trying to pass to the server contains those special characters, the process of URL encoding replaces those special characters by replacing them with a percent sign followed by two hexidecimal digits. Spaces turn into plus signs.\n\nThe three properties - method, URL, and params - are certainly not the only properties that the configuration object can have. There's a lot more properties for more specific cases, and you can look them up in the Angular documentation that talks about the HTTP service.\n\n## --- 2 ---\n```\n$http({\n    url: \"http://someurl\"\n}).then(\n    function success(response){\n        // do something with response.data\n    },\n    function error(response){\n        // do something with error response\n);\n```\nThe arguments that you would pass into the then function are the usual arguments that you would pass into the then function when you deal with a promise. The first argument is a function value of a successful response, meaning a resolution of a promise. And the second value is an error response, meaning a rejection of a promise. Here these functions were named success and error but in practice you could keep them anonymous when you use them in line like this. Probably most used property of the response object will be the response data property. That's the property that holds the response body. Now if Angular detects that the response body contains JSON, it will automatically transform the response body into a JavaScript object using the JSON parser. The the same response object gets returned if an error occurs. However, its data property will probably contain some server-generated HTML page explaining the error message, so it's usually not as useful for our programmatic needs.\n\n## --- 3 ---\n### Avoid This Mistake\n```\nvar message = \"\";\n\n$http({\n    url: \"http://someurl\"\n}).then(function(response){\n    message = response.data;\n});\n\n$scope.message = message;\n```\nIf you look in the code, it starts with declaring a local variable called message as an empty string. Then we call the HTTP method providing some URL and then we resolve it, successfully resolve it, and set our local message variable to the response.data. Then we take the scope object and create a message property on it, initializing it to the value that the message holds. So what would you say is the value of the $scope.message?\n\nIf you guess an empty string you are correct, why is that? Well remember they were dealing within _asynchronous call_. The local variable message will not get set with the response that data until after the last line in slide executes. That last line will set the `$scope.message` to whatever the value of the local message variable is right now, which is an empty string.\n\n### The Fix\nSo what's the fix? Well, it's actually quite simple. The proper implementation would be to set the `$scope.message` to the `response.data` directly in the function representing a successful resolution of the promise. The setting of the message on the scope service will then occur only when the data is returned, and the promise is resolved.\n\n```\n$http({\n    url: \"http://someurl\"\n}).then(function(response){\n    $scope.message = response.data;\n});\n```\n***\n#### _Summary_\n* `$http` service is based on the promise api exposed to by `$q`.\n* `$http` is itself a function:\n    * Takes a single config object parameter (url only required prop);\n    * Returns a promise to be resolved with `.then` function.\n* `response.data` property holds the server data response.\n    * If JSON, automatically gets transformed into a JS object.\n* `module.constant` can be used an injectable constant\n***\n* All categories: \n`https://coursera-jhu-default-rtdb.firebaseio.com/categories.json`\n* Menu items:\n`https://coursera-jhu-default-rtdb.firebaseio.com/menu_items.json`\n* Menu items category:\n`https://coursera-jhu-default-rtdb.firebaseio.com/menu_items.json?category=B`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnormandy72%2Fajax-with-http-service","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnormandy72%2Fajax-with-http-service","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnormandy72%2Fajax-with-http-service/lists"}