Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Write AngularJS Frontends for LoopBack Applications

DZone's Guide to

How to Write AngularJS Frontends for LoopBack Applications

Niklas Heidloff provides an example of how to write AngularJS front-end against the Loopback Node.js API framework.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

With the Node.js API framework LoopBack you can easily provide REST APIs for your applications. In order to build web frontends, LoopBack provides an AngularJS JavaScript SDK. Below is a sample application which demonstrates how to use this SDK.

Download the sample application from GitHub.

In AngularJS applications, you typically build views that interact with services via controllers. The services access data from the server-side applications. Obviously, you can write your own services which invoke the REST APIs of your LoopBack applications directly. But, LoopBack makes this even simpler via the AngularJS SDK. With the SDK, client-side JavaScript libraries are generated for your REST APIs so that the controllers can simply invoke JavaScript APIs rather than REST APIs.

The sample application demonstrates how to build a web-based frontend for a simple Approval Request scenario. Approval requests have titles, descriptions, requesters, and approvers.

angular-5s

Here is the code snippet of the controller that returns all approval requests. The class ApprovalRequest is provided by the LoopBack SDK.

angular.module('angularApp').controller('RequestsController', ['$scope', 'ApprovalRequest', function($scope, ApprovalRequest) {
  $scope.requests = [];
  function getRequests() {
      ApprovalRequest.find().$promise
        .then(function(results) {
          $scope.requests = results;
        }, 
        function(err) {
          $scope.requestsError = err.statusText;
        }
    );
  }
  getRequests();
}]);

Authentication is also very easy from Angular. Just invoke the Person.login function.

The file lb-services.js with the JavaScript APIs for your own business objects defined via LoopBack is generated either via command line or via Grunt. The approval request sample application uses the Grunt plugin to build the file automatically and to put it in the Angular application.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
javascript ,angular js ,loopback ,web design and web development ,node js

Published at DZone with permission of Niklas Heidloff, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}