StrongLoop Looback And AngularJS First Tutorial

Ref: Loopback and AngularJs first tutorial.

Make sure you already installed node/nodejs and npm on your system

Then start installing Strongloop framework

Wait until it’s finished. Then I go to my default directory for node project.

Use ‘slc’ command to create a new project. My first node project name is ‘todo’. Type ‘slc loopback todo’:

Then, as instructed, go to ‘todo’ directory

then create a model

At the end if there is no more property needed, type ENTER twice!
The last, Run the node server:

Use your browser to see the action:
http://localhost:3000/

http://localhost:3000/explorer/:Lest try to create a new post. Click ‘POST’ from the above explorer or http://localhost:3000/explorer/#!/Todo/Todo_createThen click ‘Try out!’ button. Here is the response:I also got the error in my terminal.

Let the error from now because we haven’t setup a datasource to store our data yet. We’ll fix this later. UPDATE: READ SETUP OUR DATASOURCE! AT THE END OF THIS ARTICLE.
NOTE: I ALSO CREATED THE OTHER LOOPBACK APP ‘todo1’ WITH Loopback 3 AND app ‘notes’ (A project containing a basic working example, including a memory database)

SO THE DATASOURCE ALREADY SETUP AND I’D NOT GET THE ABOVE ERROR ANYMORE. I DID THE SAME THING FOR ‘todo2’ AND Loopback 2.x.

BUT WHAT I DONT LIKE IS IT’D CREATE ALSO ‘notes’ REST BESIDE ‘todo’ REST. SO I PREFER TO SETUP MY OWN DATASOURCE FROM SCRATCH. PLEASE READ AT THE END OF THIS ARTICLE TO DO THAT!
The REST backend is ready but we need to instruct the ExpressJs backend on how to serve our static content. In the server folder locate the middleware.json file and modify the ‘files’ object in it like show below.

From now on all the files in the client folder will be served as static content.

AngularJS
We need install angularjs and the dependencies in /client/lib directory. Create a new file .bowerrc in the todo project root then write this piece of code in it.

Then use ‘bower’ to install angular and the others.

NOTE: at the beginning, I failed to execute the above code with this error

I tried this solution: (ref:https://github.com/bower/bower/issues/2260)

Before I tried ‘sudo bower update -a’, ‘sudo bower init –allow-root’, etc but no avail.
Okay. Now the angular, etc already installed in /client/lib/ directory. Please check the directory to make sure.
To test the angularjs in action, create a new html file ‘index.html’ in /client/ directory. Here is the content:

Open it in your browser: http://localhost:3000/index.html
Here is the result:

we will use the Loopback AngularJS client to create a service, compatible with the angular-resource module, to access the backend API.
Create a ‘js’ folder into the client folder and then type the command ‘lb-ng server/server.js client/js/lb-services.js’ in the console.

Check ‘lb-services.js’ in /client/js/ dir.
Now create another file called ‘app.js’ into the same ‘js’ folder.

In the app.js file we injected the ‘lbServices’ and defined three function (add, delete and update) for the basic CRUD operations. As you can see we used all the method exposed by the service created with the ‘lb-ng’ tool to interact with the backend. Most of this methods return a $promise that we used as callback to modify the client model.

The last thing in order to make this tutorial complete is to rewrite the index.html to suite our  application needs. Open the index.html previously created and paste the code below into it.

IT IS NOT FINISHED YET! SETUP OUR DATASOURCE!
Now we want to connect it to a datasource, MySQL!. read: Connect your API to a data source. Here are the steps:
1. Use scaffolding ‘slc’ to define the datasource. datasource name is ‘mysqlID’

2. Check the setting created in /server/datasources.json
SORRY, ONLY ADMIN CAN SHOW THIS!
3. Create the database ‘loopback’ (utf8-general-ci) and table ‘Todo’ manually (via phpmyadmin). For the table ‘Todo’, Here are the fields:
id int, primary, auto increment,
title varchar(50),
isDone boolean
4. Don’t forget to hook the datasource ‘mysqlID’ in /server/model-config.json like this:

NOTE: TO ADD ANOTHER TABLE IN /server/model-config.json, PLS DO LIKE THIS (FOR EXAMPLE WE WANT TO ADD A TABLE ‘User’):

SOMETHING LIKE THIS. PLS LEARN THE OTHERS PARAMS LIKE ‘$promise’ and ‘$resolved’.
5. If the node server still run, stop it then run it again to refresh the changes. Open your browser: http://localhost:3000/index.html. Here is the looks