A brief tutorial on creating an Angular client app using the Loopback AngularJS SDK.
Page Contents

loopback-example-angular

⚠️ This LoopBack 3 example project is no longer maintained. Please refer to LoopBack 4 Examples instead. ⚠️

$ git clone https://github.com/strongloop/loopback-example-angular.git
$ cd loopback-example-angular
$ npm install
$ node . # then browse to localhost:3000

A simple todo list using AngularJS on the client-side and LoopBack on the server-side.

Prerequisites

Tutorials

Knowledge of

Procedure

Create the application

Application information

  • Name: loopback-example-angular
  • Directory to contain the project: loopback-example-angular
$ slc loopback loopback-example-angular
... # follow the prompts
$ cd loopback-example-angular

Create the Todo model

Model information

  • Name: Todo
    • Data source: db (memory)
    • Base class: PersistedModel
    • Expose over REST: Yes
    • Custom plural form: Leave blank
    • Properties:
      • content
        • String
        • Required
$ slc loopback:model Todo
... # follow the prompts

Configure the vendor directory

In the project root, create .bowerrc.

Bower installs packages in bower_components by default, but we reconfigure this to client/vendor to make importing files into index.html more convenient.

Install client-side dependencies

From the project root, run:

$ bower install angular angular-resource angular-ui-router bootstrap

Create the home page

Create index.html in the client directory.

Create the main stylesheet

Create a css directory to store stylesheets.

$ mkdir client/css

In this directory, create styles.css.

Serve static assets from the client directory

Delete /server/boot/root.js.

Add static middleware to the files section in middleware.json .

Create app.js

Create a js directory to hold scripts files.

$ mkdir client/js

In this directory, create app.js.

Notice we declare lbServices as a dependency. We will generate this file using the lb-ng command in a later step.

Create todo.html

Create a views to store view templates.

$ mkdir client/views

In this directory, create todo.html.

Create controllers.js

Create a controllers directory to store controller files.

$ mkdir client/js/controllers

In this directory, create todo.js.

Generate lb-services.js

Create a services directory to store service files.

$ mkdir client/js/services

lb-ng is automatically installed along with the slc command-line tool (ie. when you ran npm install -g strongloop). lb-ng takes two arguments: the path to server.js and the path to the generated services file. lb-services.js is an Angular service used to interact with LoopBack models.

Create lb-services.js using the lb-ng command.

$ lb-ng server/server.js client/js/services/lb-services.js

Run the application

From the project root, enter node . and browse to localhost:3000 to view the application.

More LoopBack examples

Tags: angularjs