{"id":862,"date":"2020-03-08T15:30:10","date_gmt":"2020-03-08T15:30:10","guid":{"rendered":"https:\/\/www.reloadly.com\/blog\/?p=862"},"modified":"2022-02-08T13:41:44","modified_gmt":"2022-02-08T13:41:44","slug":"building-an-angular-application-with-reloadly","status":"publish","type":"post","link":"https:\/\/blog.reloadly.com\/blog\/building-an-angular-application-with-reloadly\/","title":{"rendered":"Building an Angular Application with Reloadly"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_46 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"ez-toc-toggle-icon-1\"><label for=\"item-69d2b956b1f81\" aria-label=\"Table of Content\"><span style=\"display: flex;align-items: center;width: 35px;height: 30px;justify-content: center;direction:ltr;\"><svg style=\"fill: #000000;color:#000000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #000000;color:#000000\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/label><input  type=\"checkbox\" id=\"item-69d2b956b1f81\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-visibility-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/blog.reloadly.com\/blog\/building-an-angular-application-with-reloadly\/#How_to_Connect_Reloadlys_API_to_Angular\" title=\"How to Connect Reloadly\u2019s API to Angular\">How to Connect Reloadly\u2019s API to Angular<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/blog.reloadly.com\/blog\/building-an-angular-application-with-reloadly\/#Steps\" title=\"Steps\">Steps<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/blog.reloadly.com\/blog\/building-an-angular-application-with-reloadly\/#Creating_Your_First_Reloadly_Angular_Project\" title=\"Creating Your First Reloadly Angular Project\">Creating Your First Reloadly Angular Project<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/blog.reloadly.com\/blog\/building-an-angular-application-with-reloadly\/#Using_Nodejs_to_Call_Reloadlys_API\" title=\"Using Node.js to Call Reloadly&#8217;s API\">Using Node.js to Call Reloadly&#8217;s API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/blog.reloadly.com\/blog\/building-an-angular-application-with-reloadly\/#Connecting_the_Reloadly_Response_to_Angular\" title=\" \nConnecting the Reloadly Response to Angular\"> \nConnecting the Reloadly Response to Angular<\/a><\/li><\/ul><\/nav><\/div>\n<p>&nbsp;<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-865\" src=\"https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2020\/03\/nodejs-angular-300x104.png\" alt=\"reloadly angular node.js\" width=\"300\" height=\"104\" srcset=\"https:\/\/blog.reloadly.com\/blog\/wp-content\/uploads\/2020\/03\/nodejs-angular-300x104.png 300w, https:\/\/blog.reloadly.com\/blog\/wp-content\/uploads\/2020\/03\/nodejs-angular-768x266.png 768w, https:\/\/blog.reloadly.com\/blog\/wp-content\/uploads\/2020\/03\/nodejs-angular-1024x355.png 1024w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/> <em>Reloadly connects to Angular from Node.js<\/em><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Angular is a framework that most developers deem seamless, efficient, and easy. Given its recent rise in popularity for everything from lightweight mobile applications to heavy-duty SaaS systems, we thought it\u2019d be a good opportunity to delineate some ways that you can use it with Reloadly.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this tutorial, we\u2019ll go over how to build a simple Angular front-end project. In order to connect with Reloadly, however, you\u2019re going to need a backend. You can use Node.js for this purpose.<\/span><\/p>\n<h2 style=\"text-align: center;\"><span class=\"ez-toc-section\" id=\"How_to_Connect_Reloadlys_API_to_Angular\"><\/span><strong>How to Connect Reloadly\u2019s API to Angular<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<figure id=\"attachment_864\" aria-describedby=\"caption-attachment-864\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-864 size-medium\" src=\"https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2020\/03\/kelly-sikkema-YK0HPwWDJ1I-unsplash-300x200.jpg\" alt=\"angular API\" width=\"300\" height=\"200\" srcset=\"https:\/\/blog.reloadly.com\/blog\/wp-content\/uploads\/2020\/03\/kelly-sikkema-YK0HPwWDJ1I-unsplash-300x200.jpg 300w, https:\/\/blog.reloadly.com\/blog\/wp-content\/uploads\/2020\/03\/kelly-sikkema-YK0HPwWDJ1I-unsplash-768x512.jpg 768w, https:\/\/blog.reloadly.com\/blog\/wp-content\/uploads\/2020\/03\/kelly-sikkema-YK0HPwWDJ1I-unsplash-1024x683.jpg 1024w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><figcaption id=\"caption-attachment-864\" class=\"wp-caption-text\">front-end developer using Angular to create a top up app<\/figcaption><\/figure>\n<h2 style=\"text-align: center;\"><span class=\"ez-toc-section\" id=\"Steps\"><\/span><b>Steps<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><span style=\"font-weight: 400;\">Install Angular on your machine (or ensure it is installed).&nbsp;<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">First, start by installing <\/span><a href=\"https:\/\/github.com\/Homebrew\"><span style=\"font-weight: 400;\">Homebrew<\/span><\/a><span style=\"font-weight: 400;\">. Homebrew is a package manager for MacOs and Linux. If you\u2019re using Windows, this step is optional.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Installing Homebrew enables you to install Node.js. Homebrew eases the pain of package management and is the recommended route for installation. It also contains all the files you\u2019ll need to work with Node.js, Reloadly, and Angular.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Once Homebrew is installed, enter the following command in your terminal or command prompt:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">$ brew install node<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Installing Node.js took <\/span><i><span style=\"font-weight: 400;\">more than thirty minutes<\/span><\/i><span style=\"font-weight: 400;\"> on our end. Once it is on your system, enter the following command in your terminal or command prompt to get Angular.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">$ npm install -g @angular\/cli<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Angular\u2019s command line keyword is <\/span><em><span style=\"font-weight: 400;\">ng<\/span><\/em><span style=\"font-weight: 400;\">. You may need to run your terminal or command prompt as an administrator to proceed with Angular\u2019s installation.<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">After Homebrew, Node.js, and Angular are installed, we can get to instantiating a project.<\/span><\/li>\n<\/ul>\n<h2 style=\"text-align: center;\"><span class=\"ez-toc-section\" id=\"Creating_Your_First_Reloadly_Angular_Project\"><\/span>Creating Your First Reloadly Angular Project<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Use the following commands to start a project:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">$ ng new reloadlyproject<\/span>\n<span style=\"font-weight: 400;\">$ cd reloadlyproject<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Be sure to include only alphanumeric letters or dashes in the project name. For this example, we\u2019ve named our project \u201creloadlyproject\u201d, but you can provide a name that is meaningful to you.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The server location for Angular applications defaults to port 4200 <\/span><span style=\"font-weight: 400;\">(<\/span><a href=\"http:\/\/localhost:4200\/\"><span style=\"font-weight: 400;\">http:\/\/localhost:4200\/<\/span><\/a><span style=\"font-weight: 400;\">).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Use the following command to compile your project:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">$ ng serve<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Projects are set to auto-compile on modification. This can be changed in the settings option.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Navigate to the directory of your project (for example, <\/span><em><span style=\"font-weight: 400;\">src\\app<\/span><\/em><span style=\"font-weight: 400;\"> ) and you will see the <\/span><span style=\"font-weight: 400;\">component<\/span><span style=\"font-weight: 400;\"> and <\/span><span style=\"font-weight: 400;\">module<\/span><span style=\"font-weight: 400;\"> files that were created on project start.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">According to Angular, \u201c<\/span><span style=\"font-weight: 400;\">A <\/span><span style=\"font-weight: 400;\">component<\/span><span style=\"font-weight: 400;\"> controls a patch of screen called a <\/span><span style=\"font-weight: 400;\">view<\/span><span style=\"font-weight: 400;\">. You define a component&#8217;s application logic\u2014what it does to support the view\u2014inside a class. The class interacts with the view through an API of properties and methods.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Angular modules are referred to as <\/span><span style=\"font-weight: 400;\">NgModules<\/span><i><span style=\"font-weight: 400;\">. <\/span><\/i><span style=\"font-weight: 400;\">Modules are, \u201ccontainers for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. They can contain components, service providers, and other code files whose scope is defined by the containing NgModule. They can import functionality that is exported from other NgModules, and export selected functionality for use by other NgModules.\u201d<\/span><\/p>\n<p><em><span style=\"font-weight: 400;\">Sources: <\/span><\/em><a href=\"https:\/\/angular.io\/guide\/architecture-modules\"><span style=\"font-weight: 400;\">https:\/\/angular.io\/guide\/architecture-modules<\/span><\/a><span style=\"font-weight: 400;\"> and <\/span><a href=\"https:\/\/angular.io\/guide\/architecture-components\"><span style=\"font-weight: 400;\">https:\/\/angular.io\/guide\/architecture-components<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">For more information on modules and components, see Angular\u2019s architecture documentation <\/span><a href=\"https:\/\/angular.io\/guide\/architecture\"><span style=\"font-weight: 400;\">here<\/span><\/a><span style=\"font-weight: 400;\">.&nbsp;<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Next, begin coding your simple application.&nbsp;<\/span><\/li>\n<\/ul>\n<h2 style=\"text-align: center;\"><span class=\"ez-toc-section\" id=\"Using_Nodejs_to_Call_Reloadlys_API\"><\/span>Using Node.js to Call Reloadly&#8217;s API<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">You can use the <\/span><em><strong>HTTPS<\/strong><\/em><span style=\"font-weight: 400;\"> library in Node.js for calling Reloadly. For more on this library, <\/span><a href=\"https:\/\/nodejs.org\/api\/https.html#https_https_request_options_callback\"><span style=\"font-weight: 400;\">visit Node.js\u2019s documentation<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For Sandbox, you\u2019re going to need an <\/span><em><span style=\"font-weight: 400;\">Auth<\/span><\/em><span style=\"font-weight: 400;\"> token. You can get one by signing up for <\/span><a href=\"https:\/\/www.reloadly.com\/\"><span style=\"font-weight: 400;\">Reloadly<\/span><\/a><span style=\"font-weight: 400;\">. Once signed up, you will receive a <\/span><em><span style=\"font-weight: 400;\">Client ID<\/span><\/em><span style=\"font-weight: 400;\"> and <\/span><em><span style=\"font-weight: 400;\">Client Secret<\/span><\/em><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can use any API tool to generate your auth token. <\/span><a href=\"https:\/\/developers.reloadly.com\/#first_call_anc\"><span style=\"font-weight: 400;\">This page<\/span><\/a><span style=\"font-weight: 400;\"> contains examples for cURL and Postman for getting your token from <\/span><em><span style=\"font-weight: 400;\">https:\/\/auth.reloadly.com\/oauth\/token<\/span><\/em><span style=\"font-weight: 400;\">. Additionally, you can generate your auth token programmatically.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">With your <\/span><em><span style=\"font-weight: 400;\">bearer<\/span><\/em><span style=\"font-weight: 400;\"> token in hand, you\u2019re ready to make requests to Reloadly\u2019s robust API. For this example, we\u2019ll use the <\/span><em><span style=\"font-weight: 400;\">operators<\/span><\/em><span style=\"font-weight: 400;\"> endpoint.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In order to connect with Reloadly\u2019s API, you need a backend. This is because, for security reasons, CORS (cross-origin resource sharing) policy does not allow <\/span><em><span style=\"font-weight: 400;\">Access-Control-Allow-Origin<\/span><\/em><span style=\"font-weight: 400;\">.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s where you have to integrate with Node.js, which is merely an example. You can use any backend that you\u2019re familiar with for this exercise. For more details on how to do that, please <\/span><a href=\"mailto:hello@reloadly.com\"><span style=\"font-weight: 400;\">contact us<\/span><\/a><span style=\"font-weight: 400;\">.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When running your program, you should see a collection of operators like below:&nbsp;<\/span><\/p>\n<pre style=\"text-align: left;\"><span style=\"font-weight: 400;\">\"content\": [<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"operatorId\": 340,<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"name\": \"9Mobile Nigeria (Etisalat)\",<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"bundle\": false,<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"denominationType\": \"RANGE\",<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"senderCurrencyCode\": \"USD\",<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"senderCurrencySymbol\": \"$\",<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"destinationCurrencyCode\": \"NGN\",<\/span>\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"destinationCurrencySymbol\": \"<\/span><span style=\"font-weight: 400;\">?<\/span><span style=\"font-weight: 400;\">\",<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"commission\": 2.0,<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"internationalDiscount\": 2.0,<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"localDiscount\": 0.0,<\/span>\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"mostPopularAmount\": 15,<\/span>\n\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"country\": {<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"isoName\": \"NG\",<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"name\": \"Nigeria\"<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<\/span><\/pre>\n<h2 style=\"text-align: center;\"><span class=\"ez-toc-section\" id=\"Connecting_the_Reloadly_Response_to_Angular\"><\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span>Connecting the Reloadly Response to Angular<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">To grab the <\/span><span style=\"font-weight: 400;\">response<\/span><span style=\"font-weight: 400;\"> object and inject it into the UI, navigate to the component\u2019s <\/span><span style=\"font-weight: 400;\">HTML<\/span><span style=\"font-weight: 400;\"> file and add <\/span><span style=\"font-weight: 400;\">paragraph<\/span><span style=\"font-weight: 400;\"> tags. Then, add a button to call the <\/span><span style=\"font-weight: 400;\">GET<\/span><span style=\"font-weight: 400;\"> method.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;title&gt; Reloadly&lt;\/title&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;p&gt;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;Click the button to get Reloadly operators.<\/span>\n<span style=\"font-weight: 400;\">&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;hr \/&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;button class=\"button\" (click)=\"getOperator()\"&gt;Click&lt;\/button&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;div&gt;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&lt;p&gt;&nbsp;{{&nbsp;operator?.name&nbsp;}}&nbsp;&lt;\/p&gt;&nbsp;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">In the component\u2019s <\/span><span style=\"font-weight: 400;\">CSS<\/span><span style=\"font-weight: 400;\"> file, include a simple block for styling the button and div.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">div {<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;padding:&nbsp;2px;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;text-align:&nbsp;center;<\/span>\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">button.button {<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;background: transparent;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;border: 2px solid #000;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;padding: 5px;<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">And that\u2019s it! You\u2019ve created your first Angular application with Reloadly\u2019s API. Clicking the button will call the API and populate JSON property data in the div.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Building a web application with Reloadly, Node.js and Angular is simple, intuitive, and seamless.&nbsp; The only question that remains is, what will <em>you<\/em> build?<\/span><\/p>\n<p><a href=\"http:\/\/www.reloadly.com\/registration\"><span style=\"font-weight: 400;\">Sign-up&nbsp;<\/span><\/a><span style=\"font-weight: 400;\"> to get your free API Keys<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; Reloadly connects to Angular from Node.js &nbsp; Angular is a framework that most developers deem seamless, efficient, and easy. Given its recent rise in popularity for everything from lightweight mobile applications to heavy-duty SaaS systems, we thought it\u2019d be a good opportunity to delineate some ways that you can use it with Reloadly. In<\/p>\n","protected":false},"author":11,"featured_media":863,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[274],"tags":[139,36,145,158,157],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Building an Angular Application with Reloadly - Reloadly<\/title>\n<meta name=\"description\" content=\"A beginner&#039;s tutorial to building an Angular app connected to Reloadly&#039;s API.\" \/>\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.reloadly.com\/blog\/building-an-angular-application-with-reloadly\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building an Angular Application with Reloadly - Reloadly\" \/>\n<meta property=\"og:description\" content=\"A beginner&#039;s tutorial to building an Angular app connected to Reloadly&#039;s API.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.reloadly.com\/blog\/building-an-angular-application-with-reloadly\/\" \/>\n<meta property=\"og:site_name\" content=\"Reloadly\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-08T15:30:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-08T13:41:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.reloadly.com\/blog\/wp-content\/uploads\/2020\/03\/ilya-pavlov-OqtafYT5kTw-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3543\" \/>\n\t<meta property=\"og:image:height\" content=\"2365\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"6 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.reloadly.com\/blog\/#organization\",\"name\":\"Reloadly\",\"url\":\"https:\/\/www.reloadly.com\/blog\/\",\"sameAs\":[],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.reloadly.com\/blog\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/blog.reloadly.com\/blog\/wp-content\/uploads\/2020\/11\/logo-1.svg\",\"width\":100,\"height\":100,\"caption\":\"Reloadly\"},\"image\":{\"@id\":\"https:\/\/www.reloadly.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.reloadly.com\/blog\/#website\",\"url\":\"https:\/\/www.reloadly.com\/blog\/\",\"name\":\"Reloadly\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.reloadly.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.reloadly.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.reloadly.com\/blog\/building-an-angular-application-with-reloadly\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/blog.reloadly.com\/blog\/wp-content\/uploads\/2020\/03\/ilya-pavlov-OqtafYT5kTw-unsplash.jpg\",\"width\":3543,\"height\":2365,\"caption\":\"coding\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.reloadly.com\/blog\/building-an-angular-application-with-reloadly\/#webpage\",\"url\":\"https:\/\/www.reloadly.com\/blog\/building-an-angular-application-with-reloadly\/\",\"name\":\"Building an Angular Application with Reloadly - Reloadly\",\"isPartOf\":{\"@id\":\"https:\/\/www.reloadly.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.reloadly.com\/blog\/building-an-angular-application-with-reloadly\/#primaryimage\"},\"datePublished\":\"2020-03-08T15:30:10+00:00\",\"dateModified\":\"2022-02-08T13:41:44+00:00\",\"description\":\"A beginner's tutorial to building an Angular app connected to Reloadly's API.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.reloadly.com\/blog\/building-an-angular-application-with-reloadly\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.reloadly.com\/blog\/building-an-angular-application-with-reloadly\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.reloadly.com\/blog\/building-an-angular-application-with-reloadly\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.reloadly.com\/blog\/\",\"url\":\"https:\/\/www.reloadly.com\/blog\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.reloadly.com\/blog\/building-an-angular-application-with-reloadly\/\",\"url\":\"https:\/\/www.reloadly.com\/blog\/building-an-angular-application-with-reloadly\/\",\"name\":\"Building an Angular Application with Reloadly\"}}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.reloadly.com\/blog\/building-an-angular-application-with-reloadly\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.reloadly.com\/blog\/building-an-angular-application-with-reloadly\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.reloadly.com\/blog\/#\/schema\/person\/7e32c5f56ec00f341af539e7eb29e9e9\"},\"headline\":\"Building an Angular Application with Reloadly\",\"datePublished\":\"2020-03-08T15:30:10+00:00\",\"dateModified\":\"2022-02-08T13:41:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.reloadly.com\/blog\/building-an-angular-application-with-reloadly\/#webpage\"},\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/www.reloadly.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.reloadly.com\/blog\/building-an-angular-application-with-reloadly\/#primaryimage\"},\"keywords\":\"Africa airtime api,airtel top up,airtime api,angular top up application,top up with angular\",\"articleSection\":\"Developer Blog\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.reloadly.com\/blog\/building-an-angular-application-with-reloadly\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.reloadly.com\/blog\/#\/schema\/person\/7e32c5f56ec00f341af539e7eb29e9e9\",\"name\":\"Rice Omary\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.reloadly.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6f42a26e3c16f062dc4fc6abee72f77d?s=96&d=mm&r=g\",\"caption\":\"Rice Omary\"},\"sameAs\":[\"http:\/\/www.reloadly.com\"],\"url\":\"https:\/\/blog.reloadly.com\/blog\/author\/riceo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","authors":[{"term_id":358,"user_id":11,"is_guest":0,"slug":"riceo","display_name":"Rice Omary"}],"_links":{"self":[{"href":"https:\/\/blog.reloadly.com\/blog\/wp-json\/wp\/v2\/posts\/862"}],"collection":[{"href":"https:\/\/blog.reloadly.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.reloadly.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.reloadly.com\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.reloadly.com\/blog\/wp-json\/wp\/v2\/comments?post=862"}],"version-history":[{"count":9,"href":"https:\/\/blog.reloadly.com\/blog\/wp-json\/wp\/v2\/posts\/862\/revisions"}],"predecessor-version":[{"id":2520,"href":"https:\/\/blog.reloadly.com\/blog\/wp-json\/wp\/v2\/posts\/862\/revisions\/2520"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.reloadly.com\/blog\/wp-json\/wp\/v2\/media\/863"}],"wp:attachment":[{"href":"https:\/\/blog.reloadly.com\/blog\/wp-json\/wp\/v2\/media?parent=862"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.reloadly.com\/blog\/wp-json\/wp\/v2\/categories?post=862"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.reloadly.com\/blog\/wp-json\/wp\/v2\/tags?post=862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}