#loopback-example-angular

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

In this example, we create a "todo" list application that uses LoopBack on the server side and AngularJS on the client side.

• Prerequisites
• Procedure
  • 1. Create the application
  • 2. Create the Todo model
  • 3. Store the memory connector data in a JSON file
  • 4. Add a sample model instance
  • 5. Configure the vendor directory
  • 6. Install client side dependencies
  • 7. Create the main page
  • 8. Create the main stylesheet
  • 9. Serve static assets from the client directory
  • 10. Create app.js
  • 11. Create todo.html
  • 12. Create controllers.js
  • 13. Generate lb-services.js
  • 14. Run the application
  • 15. Conclusion

##Prerequisites

###Tutorials

• Getting started with LoopBack
• Tutorial series - Step 1

###Knowledge

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

##Procedure

###1. 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

###2. 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

###3. Store memory connector data in a JSON file

Add the file property to datasources.json.

This property tells the memory connector to persist data into a file at the path we specify.

###4. Add a sample model instance

Add a "todo" instance using the API explorer.

To use the API explorer, start the server via slc run and browse to localhost:3000/explorer.

Use the PUT /Todos option and insert the following value:

{
  "content": "Buy eggs"
}

###5. 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 instead to make importing files into index.html more convenient.

###6. Install client side dependencies

From the project root, run:

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

###7. Create the main page

Create index.html in the client directory.

###8. Create the main stylesheet

Create a css directory to store stylesheets.

mkdir client/css

In this directory, create styles.css.

###9. Serve static assets from the client directory

Remove the contents of routes property and add static middleware to the files section in middleware.json.

###10. 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.

###11. Create todo.html

Create a views to store view templates.

mkdir client/views

In this directory, create todo.html.

###12. Create controllers.js

Create a controllers directory to store our controller files.

mkdir client/js/controllers

In this directory, create todo.js.

###13. Generate lb-services.js

Create a services directory to store service files.

mkdir client/js/services

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

lb-ng is automatically installed along with the slc command line tool (ie. when you ran npm install -g strongloop).

lb-services.js is an Angular service used to interact with LoopBack models.

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

lb-ng takes two arguments, the first argument is the path to server.js and the second argument is the path to the generated service file.

###14. Run the application

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

###15. Conclusion

You've successfully built a simple Angular "todo" application with LoopBack. For more information, see the official LoopBack Angular SDK documentation.

---

• All tutorials