strongloop/loopback-example-angular

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

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

loopback-example-angular's Issues

Quick start instructions

The provided quick start instructions did not work for me:

git clone [email protected]:strongloop/loopback-example-angular.git
cd loopback-example-angular
npm install
slc run

$ git clone [email protected]:strongloop/loopback-example-angular.git
Cloning into 'loopback-example-angular'...
Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights and the repository exists.

The solution to fully run the application successfully was:

git clone https://github.com/strongloop/loopback-example-angular.git
cd loopback-example-angular
sudo npm install
bower install
slc run

Not difficult to work around but figured I'd report this regardless.

It must set value for the propety which not required while invoke the method in lb-services.js

I may call rest API without any value for the property which not required thr loopback explorer successfully.
But when I invoke the same method in the lb-services.js under the client folder, I had to set all property including those values which not required in model, because only as this way, the record may added successfully.

Cannot run on iisnode

Hi I could run it on local machine. While I couldn't run it in my production server.

Here are my files:

config.product.js
module.exports = { host: "luyd.ir", port: process.env.PORT };

server/middleware.production.json
{ "final:after": { "loopback#errorHandler": { "params": { "includeStack": false } } } }

server/component-config.production.json
{ "loopback-component-explorer": null }

I followed the instruction in:

https://loopback.io/doc/en/lb3/Environment-specific-configuration.html#application-wide-configuration

But I see the following error:

Application has thrown an uncaught exception and is terminated:
Error: Cannot apply C:\Inetpub\vhosts\xyz\luyd.ir\server\middleware.production.json: The middleware "loopback#errorHandler" in phase "final:after"is not defined in the main config.

How can I solve this issue?

Problem with the Tutorial with the latest version of Loopback

Hello,
Many thanks for this tutorial.
I just tried it, following it step by step from a fresh new installation of Loopback.
At the end, it does not work.
The problem is due to the file /server/boot/root.js which is installed by default and which install a / route that returns server status. Commenting the content of this file, the tutorial runs fine.
Warm Regards from Paris, Michael