Angular example app

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

• Getting started with LoopBack
• Tutorial series, step 1

Knowledge of

• Angular
• Angular Resource
• AngularUI Router
• Bootstrap
• Bower
• LoopBack
• LoopBack AngularJS SDK
• LoopBack models
• LoopBack middleware

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