Message:

Quick Start Guide for Angular2

This guide will help you get up and running with Backendless quickly so you can develop Angular2 applications on top of our services. At the end of the guide you will have a configured working environment and a basic project with the code communicating with the Backendless services.

  1. Login to your Backendless account or register to create a new one.
  2. Set up your development environment:
    1. Install node and npm
    2. Create an application project folder:
    3. add a tsconfig.json to guide the TypeScript compiler:
    4. add a typings.json that identifies missing TypeScript definition files:
    5. add a package.json that defines the packages and scripts you need:
    6. Install the npm packages and typings files by running the following command:
    7. Create application’s index.html file:
    8. create app/main.ts file (make sure it is in the app directory):
    9. create app/app.component.ts file. (make sure it is in the app directory):
  3. In the root directory of your application run the following command:
  4. create tsd.d.ts  file in the root directory of your application:
  5. Get your Backendless application keys for Backendless SDK for JavaScript from the Backendless Console. The keys can be found in the Manage > App Settings section:js keys - Quick Start Guide for Angular2
  6. Copy/paste the application ID and JavaScript secret key into the code and add the Backendless application initialization code into app/main.ts right after the import line added in step 6:

At this point the application has the bare minimum required code to work with Backendless. The steps below will demonstrate how to use various Backendless APIs:

User Registration

  1. Add the following code to app/main.ts. The code registers a user with your app. Instead of michael@backendless.com used in the code below, consider using an email address  where you can check email – your Backendless backend will send out an email welcoming the user to your app.
  2. Run the following command to start your application. The command runs LiteServer and automatically opens a browser which loads the main application page. There is no output in the user interface of the app, however, it runs the Backendless API to create a user.
  3. A new user is registered with Backendless. You can verify the registered user in the Data section of the Backendless Console:
    new user created - Quick Start Guide for Angular2

Data Persintence

  1. In order to experience the Backendless Data Service API declare a new class. Instances of the class can be saved using the Backendless API. The class is going to be called Comment, it will also correspond to a table with the same name. Create the app/comment.ts file with the following code:
  2. Import the Comment  class created above into app/main.ts. Use the code snippet below to store an instance of the Comment from the registered user:
  3. Add the following code into app/main.ts (it is okay to add it after user registration code – the code re-uses the user object):
  4. Reload the page in the browser which will run the code you just added.
  5. Now you can verify in the Backendless Console that the Comment data table has been created with the columns corresponding to the properties of the Comment class and it contains the saved instance.
    comment record - Quick Start Guide for Angular2

Finally all your code should look like this:

package.json:

tsconfig.json:

typings.json:

tsd.d.ts:

index.html:

app/main.ts:

app/app.conponent.ts:

app/comment.ts:

Enjoy!