{"id":19574477,"url":"https://github.com/hybridlogics/loopback-angular-todo","last_synced_at":"2026-04-11T18:03:30.894Z","repository":{"id":201885626,"uuid":"74874940","full_name":"hybridlogics/loopback-angular-todo","owner":"hybridlogics","description":"A simple Todo app in Loopback wired up with AngularJs","archived":false,"fork":false,"pushed_at":"2017-05-22T14:12:23.000Z","size":13063,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-01-09T03:59:04.115Z","etag":null,"topics":["angularjs","bower","loopback","loopback-models"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hybridlogics.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-11-27T07:59:28.000Z","updated_at":"2016-11-27T09:08:29.000Z","dependencies_parsed_at":"2024-02-17T22:45:47.270Z","dependency_job_id":null,"html_url":"https://github.com/hybridlogics/loopback-angular-todo","commit_stats":null,"previous_names":["hybridlogics/loopback-angular-todo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hybridlogics%2Floopback-angular-todo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hybridlogics%2Floopback-angular-todo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hybridlogics%2Floopback-angular-todo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hybridlogics%2Floopback-angular-todo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hybridlogics","download_url":"https://codeload.github.com/hybridlogics/loopback-angular-todo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240840106,"owners_count":19866168,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angularjs","bower","loopback","loopback-models"],"created_at":"2024-11-11T06:41:57.632Z","updated_at":"2025-11-19T18:04:01.613Z","avatar_url":"https://github.com/hybridlogics.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Wiring Up Loopback With AngularJs - Part 2\n\n## Todo App\n\nOpen terminal / cmd(command-line)\n\n```\ngit clone https://github.com/hybridlogics/loopback-angular-todo.git\ncd loopback-angular-todo\nnpm install\nnode . \nthen browse to localhost:3000\n```\n\nA simple todo list using AngularJS on the client-side and LoopBack on the\nserver-side.\n\n## Prerequisites\n\n### Tutorials\n\n- [Wiring Up Loopback With AngularJs - Part 1](https://github.com/hybridlogics/loopback-angular-setup).\n\n### Knowledge of\n\n- [Angular](https://angularjs.org/)\n- [Angular Resource](https://docs.angularjs.org/api/ngResource/service/$resource)\n- [AngularUI Router](https://github.com/angular-ui/ui-router)\n- [Bootstrap](http://getbootstrap.com/)\n- [Bower](http://bower.io/)\n- [LoopBack](http://loopback.io/)\n- [LoopBack AngularJS SDK](http://loopback.io/doc/en/lb2/AngularJS-JavaScript-SDK.html)\n- [LoopBack models](http://loopback.io/doc/en/lb2/Defining-models.html)\n- [LoopBack middleware](http://loopback.io/doc/en/lb2/Defining-middleware.html)\n\n## Procedure\n\n### Create the application\n\n#### Application information\n\n- Name: `loopback-angular-todo`\n- Directory to contain the project: `loopback-angular-todo`\n\n```\nslc loopback loopback-angular-todo\n... # follow the prompts\ncd loopback-angular-todo\n```\n\n### Create the `Todo` model\n\n#### Model information\n\n- Name: `Todo`\n  - Data source: `db (memory)`\n  - Base class: `PersistedModel`\n  - Expose over REST: `Yes`\n  - Custom plural form: *Leave blank*\n  - Properties:\n    - `name`\n      - String\n      - Required\n    - `description`\n      - String\n      - Required\n\n```\nslc loopback:model Todo\n... # follow the prompts\n```\n\n### Configure the vendor directory\n\n\n\u003eBower installs packages in `bower_components` \n\n### Install client-side dependencies\n\nFrom the project root, run:\n\n```\nbower install angular angular-resource angular-ui-router bootstrap\n```\n\n### Create the home page\n\nCreate [`index.html`]in the client directory.\n\n### Create the main stylesheet\n\nCreate a css directory to store stylesheets.\n\n```\nmkdir client/css\n```\n\nIn this directory, create [`styles.css`]\n\n### Serve static assets from the `client` directory\n\nDelete `/server/boot/root.js`.\n\nAdd static middleware to the [`files` section in `middleware.json`]\n.\n\n### Create `app.js`\n\nCreate a [`js` directory](https://github.com/strongloop/loopback-example-angular/blob/master/client/js) to hold scripts files.\n\n```\nmkdir client/js\n```\n\nIn this directory, create [`app.js`]\n\n\u003eNotice we declare [`lbServices`] as a dependency. We\nwill generate this file using the `lb-ng` command in a later step.\n\n### Create `todo.html`\n\nCreate a [`views`] to store view templates.\n\n```\nmkdir client/views\n```\n\nIn this directory, create [`todo.html`].\n\n### Create `controllers.js`\n\nCreate a [`controllers`]  directory to store controller\nfiles.\n\n```\nmkdir client/js/controllers\n```\n\nIn this directory, create [`todo.js`]\n\n### Generate `lb-services.js`\n\nCreate a [`services` directory] to store service files.\n\n```\nmkdir client/js/services\n```\n\n`lb-ng` is automatically installed along with the `slc` command-line tool (ie.\nwhen you ran `npm install -g strongloop`). `lb-ng` takes two arguments: the\npath to [`server.js`] and the path\nto the [generated services file].\n[`lb-services.js`] is an Angular service\nused to interact with LoopBack models.\n\nCreate [`lb-services.js`]  using the `lb-ng`\ncommand.\n\n```\nlb-ng server/server.js client/js/services/lb-services.js\n```\n\n### Run the application\n\nFrom the project root, enter `node .` and browse to [`localhost:3000`](http://localhost:3000)\nto view the application.\n\n---\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhybridlogics%2Floopback-angular-todo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhybridlogics%2Floopback-angular-todo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhybridlogics%2Floopback-angular-todo/lists"}