This example application is a simple "To Do" list that illustrates LoopBack synchronization using isomorphic LoopBack. It is based on the well-known TodoMVC example.
Prerequisites
You must install the following:
- Node.js. See LoopBack初级教程.
MongoDB - if you want to be able to preserve state between application restarts.
The application uses Grunt to generate the isomorphic client-side JavaScript API.
If you have not already done so, install Grunt:$ npm install grunt-cli -g
Run the application
Follow these steps to build and run the example application.
Clone the repository and change your current directory:
$ git clone https://github.com/strongloop/loopback-example-full-stack.git $ cd loopback-example-full-stack
Install the root package dependencies:
$ npm install
Run Bower to install the client scripts:
$ bower install
Optional: If you want to run MongoDB, then:
$ mongod
REVIEW COMMENT from $paramName
What does this buy you?Build and run the entire project in development mode
$ grunt serve
Open
http://localhost:3000
in your browser to view the running app.- Click View your todo list to see the main screen:
Try it out
First, add a couple of "To Do" items: click View your todo list then in the "What needs to be done" field enter a short text item and hit RETURN.
Then you can use the API Explorer to check out the LoopBack API: http://localhost:3000/explorer/.
Follow these steps to see the synchronization API in action.
- Create a new todo item.
Find the ID of the todo: In the API explorer, go to http://localhost:3000/explorer/#!/Todos/Todo_findOne_get_5, then click Try it out! You'll see a JSON response that looks something like this:
{ "id": "t-2562", "title": "Spackle the den", "completed": false, "created": 1404245971346 }
Update the To Do item: In the API explorer, go to http://localhost:3000/explorer/#!/Todos/Todo_upsert_put_1.
In the data field, enter JSON such as the following, but change the value of the id field to the value returned in step 2.
{"id": "t-2562", "title": "zarflag"}
Where the id is the actual ID of the To Do item.
- Make a change in the browser (against the stale local data / without syncing).
- The conflict GUI pops up and you can choose how to resolve the conflict.