{"id":18429097,"url":"https://github.com/openliberty/guide-rest-client-angularjs","last_synced_at":"2026-03-02T09:32:32.052Z","repository":{"id":32547698,"uuid":"110575896","full_name":"OpenLiberty/guide-rest-client-angularjs","owner":"OpenLiberty","description":"A guide on how to consume a REST service with AngularJS: https://openliberty.io/guides/rest-client-angularjs.html","archived":false,"fork":false,"pushed_at":"2026-02-01T11:33:17.000Z","size":331,"stargazers_count":7,"open_issues_count":4,"forks_count":12,"subscribers_count":5,"default_branch":"prod","last_synced_at":"2026-02-27T04:27:07.182Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OpenLiberty.png","metadata":{"files":{"readme":"README.adoc","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2017-11-13T16:57:57.000Z","updated_at":"2025-11-06T16:56:32.000Z","dependencies_parsed_at":"2024-03-22T18:28:34.713Z","dependency_job_id":"a5e44574-1a5d-4749-b5c7-43d33b8262cc","html_url":"https://github.com/OpenLiberty/guide-rest-client-angularjs","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/OpenLiberty/guide-rest-client-angularjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpenLiberty%2Fguide-rest-client-angularjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpenLiberty%2Fguide-rest-client-angularjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpenLiberty%2Fguide-rest-client-angularjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpenLiberty%2Fguide-rest-client-angularjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OpenLiberty","download_url":"https://codeload.github.com/OpenLiberty/guide-rest-client-angularjs/tar.gz/refs/heads/prod","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpenLiberty%2Fguide-rest-client-angularjs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29997213,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-02T01:47:34.672Z","status":"online","status_checked_at":"2026-03-02T02:00:07.342Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-11-06T05:15:49.988Z","updated_at":"2026-03-02T09:32:32.020Z","avatar_url":"https://github.com/OpenLiberty.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"// Copyright (c) 2017, 2023 IBM Corporation and others.\n// Licensed under Creative Commons Attribution-NoDerivatives\n// 4.0 International (CC BY-ND 4.0)\n//   https://creativecommons.org/licenses/by-nd/4.0/\n//\n// Contributors:\n//     IBM Corporation\n:projectid: rest-client-angularjs\n:page-layout: guide-multipane\n:page-duration: 20 minutes\n:page-description: Explore how to access a simple RESTful web service and consume its resources with AngularJS in Open Liberty.\n:page-releasedate: 2017-11-20\n:page-related-guides: ['rest-intro', 'rest-client-java']\n:page-permalink: /guides/{projectid}\n:common-includes: https://raw.githubusercontent.com/OpenLiberty/guides-common/prod\n:source-highlighter: prettify\n:page-seo-title: Consuming a RESTful Java web service with AngularJS\n:page-seo-description: A getting started tutorial with examples on how to access a RESTful Java micoservice and deserialize the returned JSON by using the high-level `$resource` service of AngularJS.\n:guide-author: Open Liberty\n= Consuming a RESTful web service with AngularJS\n\n[.hidden]\nNOTE: This repository contains the guide documentation source. To view the guide in published form, view it on the https://openliberty.io/guides/{projectid}.html[Open Liberty website].\n\nExplore how to access a simple RESTful web service and consume its resources with AngularJS in Open Liberty.\n\n// =================================================================================================\n// Introduction\n// =================================================================================================\n\n== What you'll learn\n\nYou will learn how to access a REST service and deserialize the returned JSON that contains a list of artists and their albums by using the high-level `$resource` service of AngularJS.\n\nThe REST service that provides the artists and albums resource was written for you in advance and responds with the [hotspot]`artists.json`.\n\nartists.json\n[source, json, linenums, role='code_column']\n----\ninclude::finish/src/resources/artists.json[]\n----\n\n// Static guide instruction\nifndef::cloud-hosted[]\nYou will implement an AngularJS client that consumes this JSON and displays its contents at the following URL: `\\http://localhost:9080`.\nendif::[]\n\n// Cloud-hosted guide instruction\nifdef::cloud-hosted[]\nYou will implement an AngularJS client that consumes this JSON and displays its contents at a URL.\nendif::[]\n\n\nTo learn more about REST services and how you can write them, see\nhttps://openliberty.io/guides/rest-intro.html[Creating a RESTful web service^].\n\n\n// =================================================================================================\n// Getting Started\n// =================================================================================================\n[role='command']\ninclude::{common-includes}/gitclone.adoc[]\n\n=== Try what you'll build\n\nThe `finish` directory in the root of this guide contains the finished application. Give it a try before you proceed.\n\n// tag::runCommand[]\nifndef::cloud-hosted[]\nTo try out the application, first go to the `finish` directory and run the following Maven goal to build the application and deploy it to Open Liberty:\n```\ncd finish\nmvn liberty:run\n```\nendif::[]\n\nifdef::cloud-hosted[]\nIn this IBM cloud environment, you need to update the URL to access the ***artists.json*** in the ***consume-rest.js*** file. Run the following commands to go to the ***finish*** directory and update the ***consume-rest.js*** file:\n```bash\ncd finish\nsed -i 's=http://localhost:9080/artists='\"https://${USERNAME}-9080.$(echo $TOOL_DOMAIN | sed 's/\\.labs\\./.proxy./g')/artists\"'=' src/main/webapp/js/consume-rest.js\n```\n\nTo try out the application, run the following Maven goal to build the application and deploy it to Open Liberty:\n```bash\nmvn liberty:run\n```\nendif::[]\n\nAfter you see the following message, your Liberty instance is ready:\n\n[role=\"no_copy\"]\n----\nThe defaultServer server is ready to run a smarter planet.\n----\n// end::runCommand[]\n\nifndef::cloud-hosted[]\nNavigate your browser to the application root http://localhost:9080[http://localhost:9080^] to see the following output:\nendif::[]\n\nifdef::cloud-hosted[]\nWhen the Liberty instance is running, select **Terminal** \u003e **New Terminal** from the menu of the IDE to open another command-line session.\nOpen your browser and check out the application by going to the URL that the following command returns:\n```bash\necho https://${USERNAME}-9080.$(echo $TOOL_DOMAIN | sed 's/\\.labs\\./.proxy./g')\n```\n\nSee the following output:\nendif::[]\n\n[subs=\"quotes\", role=\"no_copy\"]\n----\nfoo wrote 2 albums:\n    Album titled *album_one* by *foo* contains *12* tracks\n    Album tilted *album_two* by *foo* contains *15* tracks\nbar wrote 1 albums:\n    Album titled *foo walks into a bar* by *bar* contains *12* tracks\ndj wrote 0 albums:\n----\n\n[role='command']\ninclude::{common-includes}/twyb-end.adoc[]\n\n// =================================================================================================\n// Starting the service\n// =================================================================================================\n\n== Starting the service\n\nBefore you begin the implementation, start the provided REST service so that the artist JSON is available to you.\n\nNavigate to the `start` directory to begin.\n// cloud hosted instruction\nifdef::cloud-hosted[]\n```bash\ncd /home/project/guide-rest-client-angularjs/start\n```\nendif::[]\n\n[role='command']\ninclude::{common-includes}/devmode-lmp33-start.adoc[]\n\nifndef::cloud-hosted[]\nAfter the Liberty instance is started, you can find your artist JSON at the following URL: http://localhost:9080/artists[http://localhost:9080/artists^].\nendif::[]\n\n// Cloud hosted guide instruction\nifdef::cloud-hosted[]\nAfter the Liberty instance is started, run the following curl command to view your artist JSON.\n```bash\ncurl -s http://localhost:9080/artists | jq\n```\nendif::[]\n\nAny local changes to your JavaScript and HTML are picked up automatically, so you don't need to restart the Liberty instance.\n\n// =================================================================================================\n// Guide\n// =================================================================================================\n\n== Creating the AngularJS controller\n\nBegin by registering your application module. Every application must contain at least one module, the application module, which will be bootstrapped to launch the application.\n\n\n[role=\"code_command hotspot\", subs=\"quotes\"]\n----\n#Create the `consume-rest` file.#\n`src/main/webapp/js/consume-rest.js`\n----\n\nconsume-rest.js\n[source, javascript, linenums, role='code_column']\n----\ninclude::finish/src/main/webapp/js/consume-rest.js[]\n----\n\nifdef::cloud-hosted[]\nRun the following command to update the URL to access the ***artists.json*** in the ***consume-rest.js*** file:\n```bash\nsed -i 's=http://localhost:9080/artists='\"https://${USERNAME}-9080.$(echo $TOOL_DOMAIN | sed 's/\\.labs\\./.proxy./g')/artists\"'=' /home/project/guide-rest-client-angularjs/start/src/main/webapp/js/consume-rest.js\n```\nendif::[]\n\nThe application module is defined by [hotspot=consumeRestApp]`consumeRestApp`.\n\nYour application will need some way of communicating with RESTful web services in order to retrieve their resources. In the case of this guide, your application will need to communicate with the artists service to retrieve the artists JSON. While there exists a variety of ways of doing this, you can use the fairly straightforward AngularJS [hotspot=resource-module]`$resource` service.\n\nThe [hotspot=consumeRestApp]`ngResource` module is registered as it is appended after [hotspot=consumeRestApp]`consumeRestApp`. By registering another module, you are performing a dependency injection, exposing all functionalities of that module to your main application module.\n\nNext, the [hotspot=Artists]`Artists` AngularJS service is defined by using the Factory recipe. The Factory recipe constructs a new service instance with the return value of a passed in function. In this case, the [hotspot=resource-module]`$resource` module that you imported earlier is the passed in function. Target the artist JSON URL in the [hotspot=resource-call]`$resource()` call.\n\nThe [hotspot=Controller]`controller` controls the flow of data in your application.Each controller is instantiated with its own isolated scope, accessible through the [hotspot=Scope]`$scope` parameter. All data that is bound to this parameter is available in the view to which the controller is attached.\n\nYou can now access the `artists` property from the template at the point in the Document Object Model (DOM) where the controller is registered.\n\n\n== Creating the AngularJS template\n\nYou will create the starting point of your application. This file will contain all elements and attributes specific to AngularJS.\n\n[role=\"code_command hotspot file=0\", subs=\"quotes\"]\n----\n#Create the starting point of your application.#\n`src/main/webapp/index.html`\n----\n\nindex.html\n[source, html, linenums, role='code_column tags=html hide_tags=copyright']\n----\ninclude::finish/src/main/webapp/index.html[]\n----\n\nconsume-rest.js\n[source, javascript, linenums, role='code_column']\n----\ninclude::finish/src/main/webapp/js/consume-rest.js[]\n----\n\nBefore your application is bootstrapped, you must pull in two [hotspot=AngularJS file=0]`AngularJS` libraries and import [hotspot=consume-rest file=0]`consume-rest.js`.\n\nThe first import is the base AngularJS library, which defines the [hotspot=angular-script file=0]`angular.js` script in your HTML. The second import is the library responsible for providing the APIs for the `$resource` service, which also defines the [hotspot=angular-resource-script file=0]`angular-resource.js` script in your HTML. The application is bootstrapped because the [hotspot=consumeRestApp file=0]`consumeRestApp` application module is attached to the [hotspot=body file=0]`body` of the template.\n\nNext, the [hotspot=ArtistCtrl file=0]`ArtistCtrl` controller is attached to the DOM to create a new child scope. The controller will make the [hotspot=Scope file=1]`artists` property of the [hotspot=Scope file=1]`$scope` object available to access at the point in the DOM where the controller is attached.\n\nOnce the controller is attached, the [hotspot=Artists file=0]`artists` property can be data-bounded to the template and accessed using the [hotspot=artist-info file=0]`{{ artists }}` expression. You can use the [hotspot=Artists file=0]`ng-repeat` directive to iterate over the contents of the [hotspot=Artists file=0]`artists` property.\n\nifndef::cloud-hosted[]\nAfter everything is set up, point your browser to the application root http://localhost:9080[http://localhost:9080^] to see the following output:\nendif::[]\n\nifdef::cloud-hosted[]\nAfter everything is set up, open your browser and check out the application by going to the URL that the following command returns:\n```bash\necho https://${USERNAME}-9080.$(echo $TOOL_DOMAIN | sed 's/\\.labs\\./.proxy./g')\n```\n\nSee the following output:\nendif::[]\n\n[subs=\"quotes\", role=\"no_copy\"]\n----\nfoo wrote 2 albums:\n    Album titled *album_one* by *foo* contains *12* tracks\n    Album tilted *album_two* by *foo* contains *15* tracks\nbar wrote 1 albums:\n    Album titled *foo walks into a bar* by *bar* contains *12* tracks\ndj wrote 0 albums:\n----\n\n\n== Testing the AngularJS client\n\nNo explicit code directly uses the consumed artist JSON, so you do not need to write any test cases for this guide.\n\nifndef::cloud-hosted[]\nWhenever you change your AngularJS implementation, the application root at http://localhost:9080[http://localhost:9080^] will reflect the changes automatically. You can visit the root to manually check whether the artist JSON was consumed correctly.\nendif::[]\n\nifdef::cloud-hosted[]\nWhenever you change your AngularJS implementation, the application root at `http://accountname-9080.theiadocker-4.proxy.cognitiveclass.ai` will reflect the changes automatically. You can visit the root to manually check whether the artist JSON was consumed correctly.\nendif::[]\n\nWhen you are done checking the application root, exit dev mode by pressing CTRL+C in the command-line session where you ran the Liberty.\n\nWhen you develop your own applications, testing becomes a crucial part of your development lifecycle. If you need to write test cases, follow the official unit testing and end-to-end testing documentation on the https://docs.angularjs.org/guide/unit-testing[official AngularJS website^].\n\n\n== Great work! You're done!\n\nYou have just accessed a simple RESTful web service and consumed its resources by using AngularJS in Open Liberty.\n\ninclude::{common-includes}/attribution.adoc[subs=\"attributes\"]\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopenliberty%2Fguide-rest-client-angularjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopenliberty%2Fguide-rest-client-angularjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopenliberty%2Fguide-rest-client-angularjs/lists"}