loopback-example-angular

$ 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

mrjf/loopback-example-angular