Angular2 Http Example
How do I make an angular2 http example?
This is a sample application based on off a angular2 to show the use of http in an application.In this example, we are using https://developer.nutritionix.com/for nutrition information; showing how to access REST API using ngFor directive for rendering the data.. What is a angular2 http example? How do you make a angular2 http example? This script and codes were developed by Aaron K Saunders on 25 September 2022, Sunday.
Angular2 Http Example - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Angular2 Http Example</title>
</head>
<body> <div class="preventoverflow"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.0/es6-shim.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js"></script> <script src="https://code.angularjs.org/tools/system.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.14/Rx.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.14/angular2.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.14/http.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.14/router.dev.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> System.config({ map: { app: 'https://codepen.io/aaronksaunders/pen/EKRJRJ.js' }, meta: { '*.js': { format: 'cjs' } }, packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app') .catch(console.error.bind(console)); </script> </head> <my-app>Loading...</my-app>
</div> <script src="js/index.js"></script>
</body>
</html>
Angular2 Http Example - Script Codes JS Codes
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var http_1 = require("angular2/http");
var http_2 = require("angular2/http");
var core_1 = require("angular2/core");
var browser_1 = require("angular2/platform/browser");
require("rxjs/Rx");
var DataService = (function () { /**/ function DataService(http) { this.http = http; this.BASE_URL = 'https://api.nutritionix.com/v1_1/search/'; // URL to web api this.APP_ID = '8abbcd8e'; this.API_KEY = '36e8d264537037ee7e832a41902ffe57'; } Object.defineProperty(DataService, "parameters", { /*this line is necessary to make the constructor work*/ get: function () { return [[http_1.Http]]; }, enumerable: true, configurable: true }); DataService.prototype.getSomeData = function (_searchString) { var params = new http_1.URLSearchParams(); params.set('appId', this.APP_ID); params.set('appKey', this.API_KEY); var url = this.BASE_URL + _searchString; return this.http.get(url, { search: params }) .map(function (res) { return res.json().hits; }); }; return DataService;
}());
DataService = __decorate([ core_1.Injectable()
], DataService);
exports.DataService = DataService;
var AppComponent = (function () { /**/ function AppComponent(_dataService) { this._dataService = _dataService; this.arraytorender = []; } Object.defineProperty(AppComponent, "parameters", { /**this line is necessary to make the constructor work**/ get: function () { return [[DataService]]; }, enumerable: true, configurable: true }); AppComponent.prototype.ngOnInit = function () { var _this = this; this._dataService.getSomeData().subscribe(function (response) { console.log(response); _this.resultArray = response; }); }; return AppComponent;
}());
AppComponent = __decorate([ core_1.Component({ selector: 'my-app', template: "\n <div>\n <div *ngFor=\"#item of resultArray\">\n {{item.fields.item_name}}\n </div>\n </div> ", providers: [DataService] })
], AppComponent);
exports.AppComponent = AppComponent;
browser_1.bootstrap(AppComponent, [http_2.HTTP_PROVIDERS])["catch"](function (err) { return console.error(err); });
Developer | Aaron K Saunders |
Username | aaronksaunders |
Uploaded | September 25, 2022 |
Rating | 3 |
Size | 3,851 Kb |
Views | 44,528 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Demo ui-router basic state change | 2,042 Kb |
Promise sample for Cross-Platform mobile application class | 2,214 Kb |
Google Map Directive in Ionic | 3,479 Kb |
Using ui-router to control application flow | 3,448 Kb |
Firebase Login Example | 2,682 Kb |
Ionic 2 Tabs Starter | 3,059 Kb |
Nested ng-repeat in AngularJS with Checkboxes | 2,600 Kb |
A Pen by aaron k saunders | 2,286 Kb |
A Pen by aaron k saunders | 2,916 Kb |
Proper way to manage ng-options selections | 2,114 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Spinners using Font Icons | Keyamoon | 3,007 Kb |
A simple log in form made with css | Mayurelbhar | 2,160 Kb |
FCC Portfolio | Cmwebby | 4,304 Kb |
UI Challenge - Budget Selector | AgentRR007 | 3,547 Kb |
Force Counter | Kenlauguico | 2,732 Kb |
Parallax scrolling scene | Iharosi | 2,485 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
Pruebas de d3.js | Juanmanuelcarnerero | 2,485 Kb |
Project MMetro beta | Atomicsong | 5,157 Kb |
Css Rotating 3d cubes different speed | Dghez | 2,364 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!