{"id":2073,"date":"2017-03-15T03:36:07","date_gmt":"2017-03-15T03:36:07","guid":{"rendered":"http:\/\/myprojects.advchaweb.com\/?p=2073"},"modified":"2017-03-15T09:58:57","modified_gmt":"2017-03-15T09:58:57","slug":"strongloop-looback-and-angularjs-first-tutorial","status":"publish","type":"post","link":"https:\/\/myprojects.advchaweb.com\/index.php\/2017\/03\/15\/strongloop-looback-and-angularjs-first-tutorial\/","title":{"rendered":"StrongLoop Looback And AngularJS First Tutorial"},"content":{"rendered":"

Ref: Loopback and AngularJs first tutorial<\/a>.<\/p>\n

Make sure you already installed node\/nodejs and npm on your system<\/p>\n

teddy@teddy-K43SJ:~$ npm -v\r\n3.10.8\r\nteddy@teddy-K43SJ:~$ node -v\r\nv6.9.1\r\nteddy@teddy-K43SJ:~$ nodejs -v\r\nv4.8.0\r\n<\/pre>\n
Then start installing Strongloop framework<\/p>\n
teddy@teddy-K43SJ:~$ sudo npm install -g strongloop<\/pre>\n
Wait until it’s finished. Then I go to my default directory for node project.<\/p>\n
teddy@teddy-K43SJ:~$ cd Documents\/node\/<\/pre>\n
Use ‘slc’ command to create a new project. My first node project name is ‘todo’. Type ‘slc loopback todo’:<\/p>\n
teddy@teddy-K43SJ:~\/Documents\/node$ slc loopback todo\r\n\r\n     _-----_     \r\n    |       |    \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\r\n    |--(o)--|    \u2502  Let's create a LoopBack \u2502\r\n   `---------\u00b4   \u2502       application!       \u2502\r\n    ( _\u00b4U`_ )    \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\r\n    \/___A___\\   \/\r\n     |  ~  |     \r\n   __'.___.'__   \r\n \u00b4   `  |\u00b0 \u00b4 Y ` \r\n\r\n? What's the name of your application? todo\r\n? Enter name of the directory to contain the project: todo\r\n   create todo\/\r\n     info change the working directory to todo\r\n\r\n? Which version of LoopBack would you like to use? 2.x (long term support)\r\n? What kind of application do you have in mind? empty-server (An empty LoopBack \r\nAPI, without any configured models or datasources)\r\nGenerating .yo-rc.json\r\n\r\n\r\nI'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.\r\n\r\n\r\n   create .editorconfig\r\n   create .eslintignore\r\n   create .eslintrc\r\n   create server\/boot\/root.js\r\n   create server\/middleware.development.json\r\n   create server\/middleware.json\r\n   create server\/server.js\r\n   create .gitignore\r\n   create client\/README.md\r\ntodo@1.0.0 \/home\/teddy\/Documents\/node\/todo\r\n\u251c\u2500\u252c compression@1.6.2 \r\n\u2502 \u251c\u2500\u252c accepts@1.3.3 \r\n\u2502 \u2502 \u251c\u2500\u2500 mime-types@2.1.14 \r\n\u2502 \u2502 \u2514\u2500\u2500 negotiator@0.6.1 \r\n\u2502 \u251c\u2500\u2500 bytes@2.3.0 \r\n\u2502 \u251c\u2500\u252c compressible@2.0.9 \r\n\u2502 \u2502 \u2514\u2500\u2500 mime-db@1.26.0 \r\n\u2502 \u251c\u2500\u252c debug@2.2.0 \r\n\u2502 \u2502 \u2514\u2500\u2500 ms@0.7.1 \r\n\u2502 \u251c\u2500\u2500 on-headers@1.0.1 \r\n\u2502 \u2514\u2500\u2500 vary@1.1.0 \r\n\u251c\u2500\u2500 cors@2.8.1 \r\n\u251c\u2500\u252c eslint@2.13.1 \r\n\u2502 \u251c\u2500\u252c chalk@1.1.3 \r\n\u2502 \u2502 \u251c\u2500\u2500 ansi-styles@2.2.1 \r\n\u2502 \u2502 \u251c\u2500\u2500 escape-string-regexp@1.0.5 \r\n\u2502 \u2502 \u251c\u2500\u2500 has-ansi@2.0.0 \r\n\u2502 \u2502 \u251c\u2500\u2500 strip-ansi@3.0.1 \r\n\u2502 \u2502 \u2514\u2500\u2500 supports-color@2.0.0 \r\n\u2502 \u251c\u2500\u252c concat-stream@1.6.0 \r\n\u2502 \u2502 \u251c\u2500\u2500 inherits@2.0.3 \r\n\u2502 \u2502 \u251c\u2500\u252c readable-stream@2.2.5 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 buffer-shims@1.0.0 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 process-nextick-args@1.0.7 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 string_decoder@0.10.31 \r\n\u2502 \u2502 \u2514\u2500\u2500 typedarray@0.0.6 \r\n\u2502 \u251c\u2500\u252c doctrine@1.5.0 \r\n\u2502 \u2502 \u2514\u2500\u2500 isarray@1.0.0 \r\n\u2502 \u251c\u2500\u252c es6-map@0.1.4 \r\n\u2502 \u2502 \u251c\u2500\u2500 d@0.1.1 \r\n\u2502 \u2502 \u251c\u2500\u2500 es5-ext@0.10.13 \r\n\u2502 \u2502 \u251c\u2500\u2500 es6-iterator@2.0.0 \r\n\u2502 \u2502 \u251c\u2500\u2500 es6-set@0.1.4 \r\n\u2502 \u2502 \u251c\u2500\u2500 es6-symbol@3.1.0 \r\n\u2502 \u2502 \u2514\u2500\u2500 event-emitter@0.3.4 \r\n\u2502 \u251c\u2500\u252c escope@3.6.0 \r\n\u2502 \u2502 \u251c\u2500\u2500 es6-weak-map@2.0.1 \r\n\u2502 \u2502 \u2514\u2500\u252c esrecurse@4.1.0 \r\n\u2502 \u2502   \u2514\u2500\u2500 estraverse@4.1.1 \r\n\u2502 \u251c\u2500\u252c espree@3.4.0 \r\n\u2502 \u2502 \u251c\u2500\u2500 acorn@4.0.4 \r\n\u2502 \u2502 \u2514\u2500\u252c acorn-jsx@3.0.1 \r\n\u2502 \u2502   \u2514\u2500\u2500 acorn@3.3.0 \r\n\u2502 \u251c\u2500\u2500 estraverse@4.2.0 \r\n\u2502 \u251c\u2500\u2500 esutils@2.0.2 \r\n\u2502 \u251c\u2500\u252c file-entry-cache@1.3.1 \r\n\u2502 \u2502 \u251c\u2500\u252c flat-cache@1.2.2 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 circular-json@0.3.1 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u252c del@2.2.2 \r\n\u2502 \u2502 \u2502 \u2502 \u251c\u2500\u252c globby@5.0.0 \r\n\u2502 \u2502 \u2502 \u2502 \u2502 \u251c\u2500\u252c array-union@1.0.2 \r\n\u2502 \u2502 \u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 array-uniq@1.0.3 \r\n\u2502 \u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 arrify@1.0.1 \r\n\u2502 \u2502 \u2502 \u2502 \u251c\u2500\u2500 is-path-cwd@1.0.0 \r\n\u2502 \u2502 \u2502 \u2502 \u251c\u2500\u252c is-path-in-cwd@1.0.0 \r\n\u2502 \u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 is-path-inside@1.0.0 \r\n\u2502 \u2502 \u2502 \u2502 \u251c\u2500\u2500 pify@2.3.0 \r\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u252c pinkie-promise@2.0.1 \r\n\u2502 \u2502 \u2502 \u2502   \u2514\u2500\u2500 pinkie@2.0.4 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 graceful-fs@4.1.11 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 write@0.2.1 \r\n\u2502 \u2502 \u2514\u2500\u2500 object-assign@4.1.1 \r\n\u2502 \u251c\u2500\u252c glob@7.1.1 \r\n\u2502 \u2502 \u251c\u2500\u2500 fs.realpath@1.0.0 \r\n\u2502 \u2502 \u251c\u2500\u252c inflight@1.0.6 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 wrappy@1.0.2 \r\n\u2502 \u2502 \u2514\u2500\u2500 once@1.4.0 \r\n\u2502 \u251c\u2500\u2500 globals@9.16.0 \r\n\u2502 \u251c\u2500\u2500 ignore@3.2.4 \r\n\u2502 \u251c\u2500\u2500 imurmurhash@0.1.4 \r\n\u2502 \u251c\u2500\u252c inquirer@0.12.0 \r\n\u2502 \u2502 \u251c\u2500\u2500 ansi-escapes@1.4.0 \r\n\u2502 \u2502 \u251c\u2500\u2500 ansi-regex@2.1.1 \r\n\u2502 \u2502 \u251c\u2500\u252c cli-cursor@1.0.2 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u252c restore-cursor@1.0.1 \r\n\u2502 \u2502 \u2502   \u251c\u2500\u2500 exit-hook@1.1.1 \r\n\u2502 \u2502 \u2502   \u2514\u2500\u2500 onetime@1.1.0 \r\n\u2502 \u2502 \u251c\u2500\u2500 cli-width@2.1.0 \r\n\u2502 \u2502 \u251c\u2500\u2500 figures@1.7.0 \r\n\u2502 \u2502 \u251c\u2500\u252c readline2@1.0.1 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 code-point-at@1.1.0 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u252c is-fullwidth-code-point@1.0.0 \r\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 number-is-nan@1.0.1 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 mute-stream@0.0.5 \r\n\u2502 \u2502 \u251c\u2500\u2500 run-async@0.1.0 \r\n\u2502 \u2502 \u251c\u2500\u2500 rx-lite@3.1.2 \r\n\u2502 \u2502 \u251c\u2500\u2500 string-width@1.0.2 \r\n\u2502 \u2502 \u2514\u2500\u2500 through@2.3.8 \r\n\u2502 \u251c\u2500\u252c is-my-json-valid@2.16.0 \r\n\u2502 \u2502 \u251c\u2500\u2500 generate-function@2.0.0 \r\n\u2502 \u2502 \u251c\u2500\u252c generate-object-property@1.2.0 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 is-property@1.0.2 \r\n\u2502 \u2502 \u251c\u2500\u2500 jsonpointer@4.0.1 \r\n\u2502 \u2502 \u2514\u2500\u2500 xtend@4.0.1 \r\n\u2502 \u251c\u2500\u252c is-resolvable@1.0.0 \r\n\u2502 \u2502 \u2514\u2500\u2500 tryit@1.0.3 \r\n\u2502 \u251c\u2500\u252c js-yaml@3.8.2 \r\n\u2502 \u2502 \u251c\u2500\u2500 argparse@1.0.9 \r\n\u2502 \u2502 \u2514\u2500\u2500 esprima@3.1.3 \r\n\u2502 \u251c\u2500\u252c json-stable-stringify@1.0.1 \r\n\u2502 \u2502 \u2514\u2500\u2500 jsonify@0.0.0 \r\n\u2502 \u251c\u2500\u252c levn@0.3.0 \r\n\u2502 \u2502 \u251c\u2500\u2500 prelude-ls@1.1.2 \r\n\u2502 \u2502 \u2514\u2500\u2500 type-check@0.3.2 \r\n\u2502 \u251c\u2500\u2500 lodash@4.17.4 \r\n\u2502 \u251c\u2500\u252c mkdirp@0.5.1 \r\n\u2502 \u2502 \u2514\u2500\u2500 minimist@0.0.8 \r\n\u2502 \u251c\u2500\u252c optionator@0.8.2 \r\n\u2502 \u2502 \u251c\u2500\u2500 deep-is@0.1.3 \r\n\u2502 \u2502 \u251c\u2500\u2500 fast-levenshtein@2.0.6 \r\n\u2502 \u2502 \u2514\u2500\u2500 wordwrap@1.0.0 \r\n\u2502 \u251c\u2500\u2500 path-is-absolute@1.0.1 \r\n\u2502 \u251c\u2500\u2500 path-is-inside@1.0.2 \r\n\u2502 \u251c\u2500\u2500 pluralize@1.2.1 \r\n\u2502 \u251c\u2500\u2500 progress@1.1.8 \r\n\u2502 \u251c\u2500\u252c require-uncached@1.0.3 \r\n\u2502 \u2502 \u251c\u2500\u252c caller-path@0.1.0 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 callsites@0.2.0 \r\n\u2502 \u2502 \u2514\u2500\u2500 resolve-from@1.0.1 \r\n\u2502 \u251c\u2500\u2500 shelljs@0.6.1 \r\n\u2502 \u251c\u2500\u2500 strip-json-comments@1.0.4 \r\n\u2502 \u251c\u2500\u252c table@3.8.3 \r\n\u2502 \u2502 \u251c\u2500\u252c ajv@4.11.5 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 co@4.6.0 \r\n\u2502 \u2502 \u251c\u2500\u2500 ajv-keywords@1.5.1 \r\n\u2502 \u2502 \u251c\u2500\u2500 slice-ansi@0.0.4 \r\n\u2502 \u2502 \u2514\u2500\u252c string-width@2.0.0 \r\n\u2502 \u2502   \u2514\u2500\u2500 is-fullwidth-code-point@2.0.0 \r\n\u2502 \u251c\u2500\u2500 text-table@0.2.0 \r\n\u2502 \u2514\u2500\u252c user-home@2.0.0 \r\n\u2502   \u2514\u2500\u2500 os-homedir@1.0.2 \r\n\u251c\u2500\u2500 eslint-config-loopback@4.0.0 \r\n\u251c\u2500\u252c helmet@1.3.0 \r\n\u2502 \u251c\u2500\u252c connect@3.4.1 \r\n\u2502 \u2502 \u251c\u2500\u252c finalhandler@0.4.1 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 unpipe@1.0.0 \r\n\u2502 \u2502 \u2514\u2500\u2500 utils-merge@1.0.0 \r\n\u2502 \u251c\u2500\u2500 dns-prefetch-control@0.1.0 \r\n\u2502 \u251c\u2500\u2500 dont-sniff-mimetype@1.0.0 \r\n\u2502 \u251c\u2500\u252c frameguard@1.1.0 \r\n\u2502 \u2502 \u2514\u2500\u2500 lodash.isstring@4.0.1 \r\n\u2502 \u251c\u2500\u252c helmet-csp@1.1.0 \r\n\u2502 \u2502 \u251c\u2500\u2500 camelize@1.0.0 \r\n\u2502 \u2502 \u251c\u2500\u252c content-security-policy-builder@1.0.0 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 dashify@0.2.2 \r\n\u2502 \u2502 \u251c\u2500\u252c lodash.assign@4.0.4 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 lodash.keys@4.2.0 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 lodash.rest@4.0.5 \r\n\u2502 \u2502 \u251c\u2500\u2500 lodash.isfunction@3.0.8 \r\n\u2502 \u2502 \u251c\u2500\u252c lodash.reduce@4.2.0 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 lodash._baseeach@4.1.3 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u252c lodash._baseiteratee@4.7.0 \r\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u252c lodash._stringtopath@4.8.0 \r\n\u2502 \u2502 \u2502 \u2502   \u2514\u2500\u2500 lodash._basetostring@4.12.0 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 lodash._basereduce@3.0.2 \r\n\u2502 \u2502 \u251c\u2500\u2500 lodash.some@4.2.0 \r\n\u2502 \u2502 \u2514\u2500\u2500 platform@1.3.1 \r\n\u2502 \u251c\u2500\u2500 hide-powered-by@1.0.0 \r\n\u2502 \u251c\u2500\u2500 hpkp@1.1.0 \r\n\u2502 \u251c\u2500\u252c hsts@1.0.0 \r\n\u2502 \u2502 \u2514\u2500\u2500 core-util-is@1.0.2 \r\n\u2502 \u251c\u2500\u2500 ienoopen@1.0.0 \r\n\u2502 \u251c\u2500\u2500 nocache@1.0.0 \r\n\u2502 \u2514\u2500\u2500 x-xss-protection@1.0.0 \r\n\u251c\u2500\u252c loopback@2.38.1 \r\n\u2502 \u251c\u2500\u2500 async@2.1.5 \r\n\u2502 \u251c\u2500\u2500 bcryptjs@2.4.3 \r\n\u2502 \u251c\u2500\u252c body-parser@1.17.1 \r\n\u2502 \u2502 \u251c\u2500\u2500 bytes@2.4.0 \r\n\u2502 \u2502 \u251c\u2500\u2500 content-type@1.0.2 \r\n\u2502 \u2502 \u251c\u2500\u252c debug@2.6.1 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 ms@0.7.2 \r\n\u2502 \u2502 \u251c\u2500\u2500 http-errors@1.6.1 \r\n\u2502 \u2502 \u251c\u2500\u2500 iconv-lite@0.4.15 \r\n\u2502 \u2502 \u251c\u2500\u252c on-finished@2.3.0 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 ee-first@1.1.1 \r\n\u2502 \u2502 \u251c\u2500\u2500 qs@6.4.0 \r\n\u2502 \u2502 \u251c\u2500\u252c raw-body@2.2.0 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 bytes@2.4.0 \r\n\u2502 \u2502 \u2514\u2500\u252c type-is@1.6.14 \r\n\u2502 \u2502   \u2514\u2500\u2500 media-typer@0.3.0 \r\n\u2502 \u251c\u2500\u2500 canonical-json@0.0.4 \r\n\u2502 \u251c\u2500\u252c cookie-parser@1.4.3 \r\n\u2502 \u2502 \u251c\u2500\u2500 cookie@0.3.1 \r\n\u2502 \u2502 \u2514\u2500\u2500 cookie-signature@1.0.6 \r\n\u2502 \u251c\u2500\u2500 depd@1.1.0 \r\n\u2502 \u251c\u2500\u2500 ejs@2.5.6 \r\n\u2502 \u251c\u2500\u252c errorhandler@1.5.0 \r\n\u2502 \u2502 \u2514\u2500\u2500 escape-html@1.0.3 \r\n\u2502 \u251c\u2500\u252c express@4.15.2 \r\n\u2502 \u2502 \u251c\u2500\u2500 array-flatten@1.1.1 \r\n\u2502 \u2502 \u251c\u2500\u2500 content-disposition@0.5.2 \r\n\u2502 \u2502 \u251c\u2500\u252c debug@2.6.1 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 ms@0.7.2 \r\n\u2502 \u2502 \u251c\u2500\u2500 encodeurl@1.0.1 \r\n\u2502 \u2502 \u251c\u2500\u2500 finalhandler@1.0.0 \r\n\u2502 \u2502 \u251c\u2500\u2500 merge-descriptors@1.0.1 \r\n\u2502 \u2502 \u251c\u2500\u2500 methods@1.1.2 \r\n\u2502 \u2502 \u251c\u2500\u2500 path-to-regexp@0.1.7 \r\n\u2502 \u2502 \u251c\u2500\u252c proxy-addr@1.1.3 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 forwarded@0.1.0 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 ipaddr.js@1.2.0 \r\n\u2502 \u2502 \u251c\u2500\u2500 range-parser@1.2.0 \r\n\u2502 \u2502 \u251c\u2500\u252c send@0.15.1 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 debug@2.6.1 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 destroy@1.0.4 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 mime@1.3.4 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 ms@0.7.2 \r\n\u2502 \u2502 \u251c\u2500\u2500 serve-static@1.12.1 \r\n\u2502 \u2502 \u251c\u2500\u2500 setprototypeof@1.0.3 \r\n\u2502 \u2502 \u2514\u2500\u2500 statuses@1.3.1 \r\n\u2502 \u251c\u2500\u2500 inflection@1.12.0 \r\n\u2502 \u251c\u2500\u2500 isemail@1.2.0 \r\n\u2502 \u251c\u2500\u2500 loopback-connector-remote@1.3.3 \r\n\u2502 \u251c\u2500\u252c loopback-context@1.0.0 \r\n\u2502 \u2502 \u2514\u2500\u252c continuation-local-storage@3.2.0 \r\n\u2502 \u2502   \u251c\u2500\u252c async-listener@0.6.4 \r\n\u2502 \u2502   \u2502 \u251c\u2500\u2500 semver@5.3.0 \r\n\u2502 \u2502   \u2502 \u2514\u2500\u2500 shimmer@1.1.0 \r\n\u2502 \u2502   \u2514\u2500\u252c emitter-listener@1.0.1 \r\n\u2502 \u2502     \u2514\u2500\u2500 shimmer@1.0.0 \r\n\u2502 \u251c\u2500\u252c loopback-phase@1.4.1 \r\n\u2502 \u2502 \u2514\u2500\u2500 async@0.9.2 \r\n\u2502 \u251c\u2500\u252c nodemailer@2.7.2 \r\n\u2502 \u2502 \u251c\u2500\u252c libmime@3.0.0 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 libbase64@0.1.0 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 libqp@1.1.0 \r\n\u2502 \u2502 \u251c\u2500\u252c mailcomposer@4.0.1 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u252c buildmail@4.0.1 \r\n\u2502 \u2502 \u2502   \u251c\u2500\u2500 addressparser@1.0.1 \r\n\u2502 \u2502 \u2502   \u2514\u2500\u2500 punycode@1.4.1 \r\n\u2502 \u2502 \u251c\u2500\u252c nodemailer-direct-transport@3.3.2 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u252c smtp-connection@2.12.0 \r\n\u2502 \u2502 \u2502   \u2514\u2500\u252c httpntlm@1.6.1 \r\n\u2502 \u2502 \u2502     \u251c\u2500\u2500 httpreq@0.4.23 \r\n\u2502 \u2502 \u2502     \u2514\u2500\u2500 underscore@1.7.0 \r\n\u2502 \u2502 \u251c\u2500\u252c nodemailer-shared@1.1.0 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 nodemailer-fetch@1.6.0 \r\n\u2502 \u2502 \u251c\u2500\u252c nodemailer-smtp-pool@2.8.2 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 nodemailer-wellknown@0.1.10 \r\n\u2502 \u2502 \u251c\u2500\u2500 nodemailer-smtp-transport@2.7.2 \r\n\u2502 \u2502 \u2514\u2500\u252c socks@1.1.9 \r\n\u2502 \u2502   \u251c\u2500\u2500 ip@1.1.5 \r\n\u2502 \u2502   \u2514\u2500\u2500 smart-buffer@1.1.15 \r\n\u2502 \u251c\u2500\u2500 nodemailer-stub-transport@1.1.0 \r\n\u2502 \u251c\u2500\u2500 stable@0.1.5 \r\n\u2502 \u251c\u2500\u252c strong-globalize@2.8.2 \r\n\u2502 \u2502 \u251c\u2500\u2500 async@1.5.2 \r\n\u2502 \u2502 \u251c\u2500\u2500 esprima@2.7.3 \r\n\u2502 \u2502 \u251c\u2500\u252c g11n-pipeline@1.3.0 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u252c swagger-client@2.1.32 \r\n\u2502 \u2502 \u2502   \u251c\u2500\u2500 btoa@1.1.2 \r\n\u2502 \u2502 \u2502   \u251c\u2500\u2500 cookiejar@2.1.0 \r\n\u2502 \u2502 \u2502   \u251c\u2500\u2500 lodash-compat@3.10.2 \r\n\u2502 \u2502 \u2502   \u251c\u2500\u2500 q@1.4.1 \r\n\u2502 \u2502 \u2502   \u2514\u2500\u252c superagent@2.3.0 \r\n\u2502 \u2502 \u2502     \u251c\u2500\u2500 component-emitter@1.2.1 \r\n\u2502 \u2502 \u2502     \u251c\u2500\u252c form-data@1.0.0-rc4 \r\n\u2502 \u2502 \u2502     \u2502 \u2514\u2500\u2500 async@1.5.2 \r\n\u2502 \u2502 \u2502     \u2514\u2500\u2500 formidable@1.1.1 \r\n\u2502 \u2502 \u251c\u2500\u252c htmlparser2@3.9.2 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 domelementtype@1.3.0 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 domhandler@2.3.0 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u252c domutils@1.5.1 \r\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u252c dom-serializer@0.1.0 \r\n\u2502 \u2502 \u2502 \u2502   \u2514\u2500\u2500 domelementtype@1.1.3 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 entities@1.1.1 \r\n\u2502 \u2502 \u251c\u2500\u252c md5@2.2.1 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 charenc@0.0.2 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 crypt@0.0.2 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 is-buffer@1.1.5 \r\n\u2502 \u2502 \u251c\u2500\u252c mktmpdir@0.1.1 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 rimraf@2.2.8 \r\n\u2502 \u2502 \u251c\u2500\u2500 optional@0.1.3 \r\n\u2502 \u2502 \u251c\u2500\u252c os-locale@1.4.0 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u252c lcid@1.0.0 \r\n\u2502 \u2502 \u2502   \u2514\u2500\u2500 invert-kv@1.0.0 \r\n\u2502 \u2502 \u251c\u2500\u2500 posix-getopt@1.2.0 \r\n\u2502 \u2502 \u251c\u2500\u2500 word-count@0.2.2 \r\n\u2502 \u2502 \u2514\u2500\u2500 yamljs@0.2.8 \r\n\u2502 \u251c\u2500\u252c strong-remoting@2.33.0 \r\n\u2502 \u2502 \u251c\u2500\u2500 eventemitter2@2.2.2 \r\n\u2502 \u2502 \u251c\u2500\u252c jayson@1.2.2 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u252c commander@1.3.2 \r\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 keypress@0.1.0 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 eyes@0.1.8 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u252c JSONStream@1.0.3 \r\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 jsonparse@1.0.0 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 lodash@3.6.0 \r\n\u2502 \u2502 \u251c\u2500\u2500 js2xmlparser@1.0.0 \r\n\u2502 \u2502 \u251c\u2500\u252c mux-demux@3.7.9 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 duplex@1.0.0 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 json-buffer@2.0.11 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u252c msgpack-stream@0.0.12 \r\n\u2502 \u2502 \u2502 \u2502 \u251c\u2500\u252c bops@0.0.6 \r\n\u2502 \u2502 \u2502 \u2502 \u2502 \u251c\u2500\u2500 base64-js@0.0.2 \r\n\u2502 \u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 to-utf8@0.0.1 \r\n\u2502 \u2502 \u2502 \u2502 \u251c\u2500\u2500 msgpack-js@0.3.0 \r\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 through@2.3.4 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u252c stream-combiner@0.0.2 \r\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 duplexer@0.0.4 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 stream-serializer@1.1.2 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 xtend@1.0.3 \r\n\u2502 \u2502 \u251c\u2500\u252c request@2.81.0 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 aws-sign2@0.6.0 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 aws4@1.6.0 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 caseless@0.12.0 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u252c combined-stream@1.0.5 \r\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 delayed-stream@1.0.0 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 extend@3.0.0 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 forever-agent@0.6.1 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u252c form-data@2.1.2 \r\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 asynckit@0.4.0 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u252c har-validator@4.2.1 \r\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 har-schema@1.0.5 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u252c hawk@3.1.3 \r\n\u2502 \u2502 \u2502 \u2502 \u251c\u2500\u2500 boom@2.10.1 \r\n\u2502 \u2502 \u2502 \u2502 \u251c\u2500\u2500 cryptiles@2.0.5 \r\n\u2502 \u2502 \u2502 \u2502 \u251c\u2500\u2500 hoek@2.16.3 \r\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 sntp@1.0.9 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u252c http-signature@1.1.1 \r\n\u2502 \u2502 \u2502 \u2502 \u251c\u2500\u2500 assert-plus@0.2.0 \r\n\u2502 \u2502 \u2502 \u2502 \u251c\u2500\u252c jsprim@1.4.0 \r\n\u2502 \u2502 \u2502 \u2502 \u2502 \u251c\u2500\u2500 assert-plus@1.0.0 \r\n\u2502 \u2502 \u2502 \u2502 \u2502 \u251c\u2500\u2500 extsprintf@1.0.2 \r\n\u2502 \u2502 \u2502 \u2502 \u2502 \u251c\u2500\u2500 json-schema@0.2.3 \r\n\u2502 \u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 verror@1.3.6 \r\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u252c sshpk@1.11.0 \r\n\u2502 \u2502 \u2502 \u2502   \u251c\u2500\u2500 asn1@0.2.3 \r\n\u2502 \u2502 \u2502 \u2502   \u251c\u2500\u2500 assert-plus@1.0.0 \r\n\u2502 \u2502 \u2502 \u2502   \u251c\u2500\u2500 bcrypt-pbkdf@1.0.1 \r\n\u2502 \u2502 \u2502 \u2502   \u251c\u2500\u252c dashdash@1.14.1 \r\n\u2502 \u2502 \u2502 \u2502   \u2502 \u2514\u2500\u2500 assert-plus@1.0.0 \r\n\u2502 \u2502 \u2502 \u2502   \u251c\u2500\u2500 ecc-jsbn@0.1.1 \r\n\u2502 \u2502 \u2502 \u2502   \u251c\u2500\u252c getpass@0.1.6 \r\n\u2502 \u2502 \u2502 \u2502   \u2502 \u2514\u2500\u2500 assert-plus@1.0.0 \r\n\u2502 \u2502 \u2502 \u2502   \u251c\u2500\u2500 jodid25519@1.0.2 \r\n\u2502 \u2502 \u2502 \u2502   \u251c\u2500\u2500 jsbn@0.1.1 \r\n\u2502 \u2502 \u2502 \u2502   \u2514\u2500\u2500 tweetnacl@0.14.5 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 is-typedarray@1.0.0 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 isstream@0.1.2 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 json-stringify-safe@5.0.1 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 oauth-sign@0.8.2 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 performance-now@0.2.0 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 safe-buffer@5.0.1 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 stringstream@0.0.5 \r\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 tough-cookie@2.3.2 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 tunnel-agent@0.6.0 \r\n\u2502 \u2502 \u251c\u2500\u252c sse@0.0.6 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 options@0.0.6 \r\n\u2502 \u2502 \u2514\u2500\u252c xml2js@0.4.17 \r\n\u2502 \u2502   \u251c\u2500\u2500 sax@1.2.2 \r\n\u2502 \u2502   \u2514\u2500\u2500 xmlbuilder@4.2.1 \r\n\u2502 \u251c\u2500\u2500 uid2@0.0.3 \r\n\u2502 \u2514\u2500\u252c underscore.string@3.3.4 \r\n\u2502   \u251c\u2500\u2500 sprintf-js@1.0.3 \r\n\u2502   \u2514\u2500\u2500 util-deprecate@1.0.2 \r\n\u251c\u2500\u252c loopback-boot@2.23.0 \r\n\u2502 \u251c\u2500\u2500 async@0.9.2 \r\n\u2502 \u251c\u2500\u2500 commondir@0.0.1 \r\n\u2502 \u251c\u2500\u2500 lodash@3.10.1 \r\n\u2502 \u251c\u2500\u2500 semver@4.3.6 \r\n\u2502 \u2514\u2500\u2500 toposort@0.2.12 \r\n\u251c\u2500\u252c loopback-component-explorer@2.7.0 \r\n\u2502 \u251c\u2500\u2500 lodash@3.10.1 \r\n\u2502 \u251c\u2500\u252c loopback-swagger@2.9.0 \r\n\u2502 \u2502 \u251c\u2500\u2500 async@1.5.2 \r\n\u2502 \u2502 \u251c\u2500\u2500 lodash@3.10.1 \r\n\u2502 \u2502 \u2514\u2500\u2500 underscore.string@2.3.3 \r\n\u2502 \u2514\u2500\u2500 strong-swagger-ui@21.0.2 \r\n\u251c\u2500\u252c loopback-datasource-juggler@2.54.1 \r\n\u2502 \u251c\u2500\u2500 async@1.0.0 \r\n\u2502 \u251c\u2500\u252c loopback-connector@2.7.1 \r\n\u2502 \u2502 \u251c\u2500\u2500 async@1.5.2 \r\n\u2502 \u2502 \u251c\u2500\u2500 bluebird@3.5.0 \r\n\u2502 \u2502 \u2514\u2500\u252c msgpack5@3.4.1 \r\n\u2502 \u2502   \u2514\u2500\u2500 bl@1.2.0 \r\n\u2502 \u251c\u2500\u252c minimatch@3.0.3 \r\n\u2502 \u2502 \u2514\u2500\u252c brace-expansion@1.1.6 \r\n\u2502 \u2502   \u251c\u2500\u2500 balanced-match@0.4.2 \r\n\u2502 \u2502   \u2514\u2500\u2500 concat-map@0.0.1 \r\n\u2502 \u251c\u2500\u2500 qs@3.1.0 \r\n\u2502 \u251c\u2500\u2500 shortid@2.2.8 \r\n\u2502 \u251c\u2500\u2500 traverse@0.6.6 \r\n\u2502 \u2514\u2500\u2500 uuid@3.0.1 \r\n\u251c\u2500\u252c nsp@2.6.3 \r\n\u2502 \u251c\u2500\u252c chalk@1.1.3 \r\n\u2502 \u2502 \u251c\u2500\u2500 ansi-styles@2.2.1 \r\n\u2502 \u2502 \u251c\u2500\u2500 escape-string-regexp@1.0.5 \r\n\u2502 \u2502 \u251c\u2500\u252c has-ansi@2.0.0 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 ansi-regex@2.0.0 \r\n\u2502 \u2502 \u251c\u2500\u252c strip-ansi@3.0.1 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 ansi-regex@2.0.0 \r\n\u2502 \u2502 \u2514\u2500\u2500 supports-color@2.0.0 \r\n\u2502 \u251c\u2500\u252c cli-table@0.3.1 \r\n\u2502 \u2502 \u2514\u2500\u2500 colors@1.0.3 \r\n\u2502 \u251c\u2500\u2500 cvss@1.0.1 \r\n\u2502 \u251c\u2500\u252c https-proxy-agent@1.0.0 \r\n\u2502 \u2502 \u251c\u2500\u252c agent-base@2.0.1 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 semver@5.0.3 \r\n\u2502 \u2502 \u251c\u2500\u252c debug@2.2.0 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 ms@0.7.1 \r\n\u2502 \u2502 \u2514\u2500\u2500 extend@3.0.0 \r\n\u2502 \u251c\u2500\u252c joi@6.10.1 \r\n\u2502 \u2502 \u251c\u2500\u2500 hoek@2.16.3 \r\n\u2502 \u2502 \u251c\u2500\u2500 isemail@1.2.0 \r\n\u2502 \u2502 \u251c\u2500\u2500 moment@2.12.0 \r\n\u2502 \u2502 \u2514\u2500\u2500 topo@1.1.0 \r\n\u2502 \u251c\u2500\u2500 nodesecurity-npm-utils@5.0.0 \r\n\u2502 \u251c\u2500\u2500 path-is-absolute@1.0.0 \r\n\u2502 \u251c\u2500\u252c rc@1.1.6 \r\n\u2502 \u2502 \u251c\u2500\u2500 deep-extend@0.4.1 \r\n\u2502 \u2502 \u251c\u2500\u2500 ini@1.3.4 \r\n\u2502 \u2502 \u251c\u2500\u2500 minimist@1.2.0 \r\n\u2502 \u2502 \u2514\u2500\u2500 strip-json-comments@1.0.4 \r\n\u2502 \u251c\u2500\u2500 semver@5.1.0 \r\n\u2502 \u251c\u2500\u252c subcommand@2.0.3 \r\n\u2502 \u2502 \u251c\u2500\u2500 cliclopts@1.1.1 \r\n\u2502 \u2502 \u251c\u2500\u252c debug@2.2.0 \r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 ms@0.7.1 \r\n\u2502 \u2502 \u251c\u2500\u2500 minimist@1.2.0 \r\n\u2502 \u2502 \u2514\u2500\u2500 xtend@4.0.1 \r\n\u2502 \u2514\u2500\u252c wreck@6.3.0 \r\n\u2502   \u251c\u2500\u2500 boom@2.10.1 \r\n\u2502   \u2514\u2500\u2500 hoek@2.16.3 \r\n\u251c\u2500\u252c serve-favicon@2.4.1 \r\n\u2502 \u251c\u2500\u2500 etag@1.8.0 \r\n\u2502 \u251c\u2500\u2500 fresh@0.5.0 \r\n\u2502 \u251c\u2500\u2500 ms@0.7.2 \r\n\u2502 \u2514\u2500\u2500 parseurl@1.3.1 \r\n\u2514\u2500\u252c strong-error-handler@1.2.1 \r\n  \u251c\u2500\u2500 http-status@0.2.5 \r\n  \u2514\u2500\u252c js2xmlparser@2.0.2 \r\n    \u2514\u2500\u2500 xmlcreate@0.1.1 \r\n\r\n\r\n\r\nNext steps:\r\n\r\n  Change directory to your app\r\n    $ cd todo\r\n\r\n  Create a model in your app\r\n    $ slc loopback:model\r\n\r\n  Run the app\r\n    $ node .\r\n<\/pre>\n
Then, as instructed, go to ‘todo’ directory<\/p>\n
teddy@teddy-K43SJ:~\/Documents\/node$ cd todo\/<\/pre>\n
then create a model<\/p>\n
teddy@teddy-K43SJ:~\/Documents\/node\/todo$ slc loopback:model\r\nWarning: Found no data sources to attach model. There will be no data-access methods available until datasources are attached.\r\n? Enter the model name: Todo\r\n? Select model's base class PersistedModel\r\n? Expose Todo via the REST API? Yes\r\n? Custom plural form (used to build REST URL): todos\r\n? Common model or server only? common\r\nLet's add some Todo properties now.\r\n\r\nEnter an empty property name when done.\r\n? Property name: title\r\n   invoke   loopback:property\r\n? Property type: string\r\n? Required? Yes\r\n? Default value[leave blank for none]: \r\n\r\nLet's add another Todo property.\r\nEnter an empty property name when done.\r\n? Property name: isDone\r\n   invoke   loopback:property\r\n? Property type: boolean\r\n? Required? No\r\n? Default value[leave blank for none]: \r\n\r\nLet's add another Todo property.\r\nEnter an empty property name when done.\r\n? Property name:<\/pre>\n
At the end if there is no more property needed, type ENTER twice!
\nThe last, Run the node server:<\/p>\n
teddy@teddy-K43SJ:~\/Documents\/node\/todo$ node .\r\nWeb server listening at: http:\/\/0.0.0.0:3000\r\nBrowse your REST API at http:\/\/0.0.0.0:3000\/explorer<\/pre>\n
Use your browser to see the action:
\nhttp:\/\/localhost:3000\/<\/p>\n
{\"started\":\"2017-03-15T03:33:41.941Z\",\"uptime\":20.173}<\/pre>\n
http:\/\/localhost:3000\/explorer\/:\"\"<\/a>Lest try to create a new post. Click ‘POST’ from the above explorer or http:\/\/localhost:3000\/explorer\/#!\/Todo\/Todo_create\"\"<\/a>Then click ‘Try out!’ button. Here is the response:\"\"<\/a>I also got the error in my terminal.<\/p>\n
Unhandled error for request POST \/api\/todos: Error: Cannot call Todo.create(). The create method has not been setup. The PersistedModel has not been correctly attached to a DataSource!\r\n    at throwNotAttached (\/home\/teddy\/Documents\/node\/todo\/node_modules\/loopback\/lib\/persisted-model.js:68:11)\r\n    at Function.PersistedModel.create (\/home\/teddy\/Documents\/node\/todo\/node_modules\/loopback\/lib\/persisted-model.js:105:5)\r\n    at SharedMethod.invoke (\/home\/teddy\/Documents\/node\/todo\/node_modules\/strong-remoting\/lib\/shared-method.js:263:25)\r\n    at HttpContext.invoke (\/home\/teddy\/Documents\/node\/todo\/node_modules\/strong-remoting\/lib\/http-context.js:389:12)\r\n    at phaseInvoke (\/home\/teddy\/Documents\/node\/todo\/node_modules\/strong-remoting\/lib\/remote-objects.js:654:9)\r\n    at runHandler (\/home\/teddy\/Documents\/node\/todo\/node_modules\/loopback-phase\/lib\/phase.js:135:5)\r\n    at iterate (\/home\/teddy\/Documents\/node\/todo\/node_modules\/loopback-phase\/node_modules\/async\/lib\/async.js:146:13)\r\n    at Object.async.eachSeries (\/home\/teddy\/Documents\/node\/todo\/node_modules\/loopback-phase\/node_modules\/async\/lib\/async.js:162:9)\r\n    at runHandlers (\/home\/teddy\/Documents\/node\/todo\/node_modules\/loopback-phase\/lib\/phase.js:144:13)\r\n    at iterate (\/home\/teddy\/Documents\/node\/todo\/node_modules\/loopback-phase\/node_modules\/async\/lib\/async.js:146:13)\r\n    at \/home\/teddy\/Documents\/node\/todo\/node_modules\/loopback-phase\/node_modules\/async\/lib\/async.js:157:25\r\n    at \/home\/teddy\/Documents\/node\/todo\/node_modules\/loopback-phase\/node_modules\/async\/lib\/async.js:154:25\r\n    at execStack (\/home\/teddy\/Documents\/node\/todo\/node_modules\/strong-remoting\/lib\/remote-objects.js:493:7)\r\n    at RemoteObjects.execHooks (\/home\/teddy\/Documents\/node\/todo\/node_modules\/strong-remoting\/lib\/remote-objects.js:497:10)\r\n    at phaseBeforeInvoke (\/home\/teddy\/Documents\/node\/todo\/node_modules\/strong-remoting\/lib\/remote-objects.js:650:10)\r\n    at runHandler (\/home\/teddy\/Documents\/node\/todo\/node_modules\/loopback-phase\/lib\/phase.js:135:5)<\/pre>\n
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.
\nNOTE: 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)<\/p>\n
? What's the name of your application? todo1\r\n? Enter name of the directory to contain the project: todo1\r\n   create todo1\/\r\n     info change the working directory to todo1\r\n\r\n? Which version of LoopBack would you like to use? 3.x (current)\r\n? What kind of application do you have in mind? notes (A project containing a basic working example, including a memory database)\r\nGenerating .yo-rc.json\r\n<\/pre>\n
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.<\/p>\n
? What's the name of your application? todo2\r\n? Enter name of the directory to contain the project: todo2\r\n   create todo2\/\r\n     info change the working directory to todo2\r\n\r\n? Which version of LoopBack would you like to use? 2.x (long term support)\r\n? What kind of application do you have in mind? notes (A project containing a basic working example, including a memory database)\r\nGenerating .yo-rc.json<\/pre>\n
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!
\nThe 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.<\/p>\n
...\r\n  \"files\": {\r\n    \"loopback#static\": {\r\n      \"params\": \"$!..\/client\"\r\n    }\r\n  },\r\n...<\/pre>\n
From now on all the files in the client folder will be served as static content.<\/p>\n
AngularJS
\nWe 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.<\/p>\n
{\r\n  \"directory\": \"client\/lib\"\r\n}<\/pre>\n
Then use ‘bower’ to install angular and the others.<\/p>\n
teddy@teddy-K43SJ:~\/Documents\/node\/todo$ bower install angular angular-resource bootstrap\r\nbower cached        https:\/\/github.com\/angular\/bower-angular-resource.git#1.5.11\r\nbower validate      1.5.11 against https:\/\/github.com\/angular\/bower-angular-resource.git#*\r\nbower cached        https:\/\/github.com\/angular\/bower-angular.git#1.6.2\r\nbower validate      1.6.2 against https:\/\/github.com\/angular\/bower-angular.git#*\r\nbower cached        https:\/\/github.com\/twbs\/bootstrap.git#3.3.7\r\nbower validate      3.3.7 against https:\/\/github.com\/twbs\/bootstrap.git#*\r\nbower new           version for https:\/\/github.com\/angular\/bower-angular.git#*\r\nbower resolve       https:\/\/github.com\/angular\/bower-angular.git#*\r\nbower new           version for https:\/\/github.com\/angular\/bower-angular-resource.git#*\r\nbower resolve       https:\/\/github.com\/angular\/bower-angular-resource.git#*\r\nbower download      https:\/\/github.com\/angular\/bower-angular\/archive\/v1.6.3.tar.gz\r\nbower download      https:\/\/github.com\/angular\/bower-angular-resource\/archive\/v1.6.3.tar.gz\r\nbower cached        https:\/\/github.com\/jquery\/jquery-dist.git#3.1.1\r\nbower validate      3.1.1 against https:\/\/github.com\/jquery\/jquery-dist.git#1.9.1 - 3\r\nbower extract       angular-resource#* archive.tar.gz\r\nbower resolved      https:\/\/github.com\/angular\/bower-angular-resource.git#1.6.3\r\nbower not-cached    https:\/\/github.com\/angular\/bower-angular.git#1.6.3\r\nbower resolve       https:\/\/github.com\/angular\/bower-angular.git#1.6.3\r\nbower download      https:\/\/github.com\/angular\/bower-angular\/archive\/v1.6.3.tar.gz\r\nbower extract       angular#* archive.tar.gz\r\nbower resolved      https:\/\/github.com\/angular\/bower-angular.git#1.6.3\r\nbower extract       angular#1.6.3 archive.tar.gz\r\nbower resolved      https:\/\/github.com\/angular\/bower-angular.git#1.6.3\r\nbower install       bootstrap#3.3.7\r\nbower install       jquery#3.1.1\r\nbower install       angular-resource#1.6.3\r\nbower install       angular#1.6.3\r\n\r\nbootstrap#3.3.7 client\/lib\/bootstrap\r\n\u2514\u2500\u2500 jquery#3.1.1\r\n\r\njquery#3.1.1 client\/lib\/jquery\r\n\r\nangular-resource#1.6.3 client\/lib\/angular-resource\r\n\u2514\u2500\u2500 angular#1.6.3\r\n\r\nangular#1.6.3 client\/lib\/angular<\/pre>\n
NOTE: at the beginning, I failed to execute the above code with this error<\/p>\n
...\r\nbower EACCES        EACCES: permission denied, rename '\/tmp\/teddy\/bower\/45e372c34ae270c802c414d1d5024500-24410-h2uZXe' -> '\/home\/teddy\/.cache\/bower\/packages\/4d6159b36679e972801e15ff4d8c6b05\/1.6.3'\r\n\r\nStack trace:\r\nError: EACCES: permission denied, rename '\/tmp\/teddy\/bower\/45e372c34ae270c802c414d1d5024500-24410-h2uZXe' -> '\/home\/teddy\/.cache\/bower\/packages\/4d6159b36679e972801e15ff4d8c6b05\/1.6.3'\r\n    at Error (native)\r\n\r\nConsole trace:\r\nError\r\n    at StandardRenderer.error (\/usr\/local\/lib\/node_modules\/bower\/lib\/renderers\/StandardRenderer.js:81:37)\r\n    at Logger.<anonymous> (\/usr\/local\/lib\/node_modules\/bower\/lib\/bin\/bower.js:110:26)\r\n    at emitOne (events.js:96:13)\r\n    at Logger.emit (events.js:188:7)\r\n    at Logger.emit (\/usr\/local\/lib\/node_modules\/bower\/lib\/node_modules\/bower-logger\/lib\/Logger.js:29:39)\r\n    at \/usr\/local\/lib\/node_modules\/bower\/lib\/commands\/index.js:48:20\r\n    at _rejected (\/usr\/local\/lib\/node_modules\/bower\/lib\/node_modules\/q\/q.js:844:24)\r\n    at \/usr\/local\/lib\/node_modules\/bower\/lib\/node_modules\/q\/q.js:870:30\r\n    at Promise.when (\/usr\/local\/lib\/node_modules\/bower\/lib\/node_modules\/q\/q.js:1122:31)\r\n    at Promise.promise.promiseDispatch (\/usr\/local\/lib\/node_modules\/bower\/lib\/node_modules\/q\/q.js:788:41)\r\nSystem info:\r\nBower version: 1.8.0\r\nNode version: 6.9.1\r\nOS: Linux 4.4.0-66-generic x64<\/pre>\n
I tried this solution: (ref:https:\/\/github.com\/bower\/bower\/issues\/2260)<\/p>\n
teddy@teddy-K43SJ:~\/Documents\/node\/todo$ sudo chown -R $USER:$GROUP ~\/.npm\r\nteddy@teddy-K43SJ:~\/Documents\/node\/todo$ sudo chown -R $USER:$GROUP ~\/.config\r\nteddy@teddy-K43SJ:~\/Documents\/node\/todo$ sudo chown -R $USER:$GROUP ~\/.cache<\/pre>\n
Before I tried ‘sudo bower update -a’, ‘sudo bower init –allow-root’, etc but no avail.
\nOkay. Now the angular, etc already installed in \/client\/lib\/ directory. Please check the directory to make sure.
\nTo test the angularjs in action, create a new html file ‘index.html’ in \/client\/ directory. Here is the content:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <title>Todo Application<\/title>\r\n    <link href=\"lib\/bootstrap\/dist\/css\/bootstrap.css\" rel=\"stylesheet\">\r\n<\/head>\r\n<body ng-app>\r\n \r\n{{\"AngularJS is working\"}}\r\n \r\n    <script src=\"lib\/jquery\/dist\/jquery.js\"><\/script>\r\n    <script src=\"lib\/bootstrap\/dist\/js\/bootstrap.js\"><\/script>\r\n    <script src=\"lib\/angular\/angular.js\"><\/script>\r\n    <script src=\"lib\/angular-resource\/angular-resource.js\"><\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
Open it in your browser: http:\/\/localhost:3000\/index.html
\nHere is the result:<\/p>\n
AngularJS is working<\/pre>\n
we will use the Loopback AngularJS client to create a service, compatible with the angular-resource module, to access the backend API.
\nCreate 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.<\/p>\n
teddy@teddy-K43SJ:~\/Documents\/node\/todo$ lb-ng server\/server.js client\/js\/lb-services.js\r\nLoading LoopBack app \"\/home\/teddy\/Documents\/node\/todo\/server\/server.js\"\r\nGenerating \"lbServices\" for the API endpoint \"\/api\"\r\nSaving the generated services source to \"\/home\/teddy\/Documents\/node\/todo\/client\/js\/lb-services.js\"<\/pre>\n
Check ‘lb-services.js’ in \/client\/js\/ dir.
\nNow create another file called ‘app.js’ into the same ‘js’ folder.<\/p>\n
var app = angular.module('todoApp', ['lbServices']);\r\n \r\napp.controller('todoController', function($scope, $http, Todo) {\r\n \r\n    $scope.todos = Todo.find();\r\n    $scope.todo;\r\n    $scope.loading=false;\r\n \r\n    $scope.add = function(){\r\n        $scope.loading=true;\r\n        \r\n        Todo.create({title: $scope.todo.title,isDone:false }).$promise\r\n            .then(function(todo) { \r\n                $scope.todos.push(todo);\r\n                $scope.todo.title='';\r\n                $scope.loading=false;\r\n            });;\r\n    };\r\n \r\n    $scope.delete = function($index){\r\n        \r\n        $scope.loading=true;\r\n        var todo = $scope.todos[$index];\r\n        \r\n        Todo.deleteById({ id: todo.id}).$promise\r\n            .then(function() {\r\n                $scope.todos.splice($index,1);\r\n                $scope.loading=false;\r\n            });\r\n    };\r\n \r\n    $scope.update = function(todo){\r\n        todo.$save();\r\n    };\r\n    \r\n});<\/pre>\n
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.<\/p>\n
The last thing in order to make this tutorial complete is to rewrite the index.html to suite our \u00a0application needs. Open the index.html previously created and paste the code below into it.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <title>Todo Application<\/title>\r\n    <link href=\"lib\/bootstrap\/dist\/css\/bootstrap.css\" rel=\"stylesheet\">\r\n    <link href=\"css\/style.css\" rel=\"stylesheet\">\r\n<\/head>\r\n<body ng-app = \"todoApp\">\r\n<div class=\"container\" ng-controller=\"todoController\">\r\n    <h2>LoopBack Todo Application<\/h2>\r\n    <div class=\"row\">\r\n        <div class=\"col-md-4\">\r\n            <table class=\"table table-striped\">\r\n                <tr ng-repeat='todo in todos'>\r\n                    <td><input type=\"checkbox\" ng-true-value=\"false\" ng-false-value=\"true\" ng-model=\"todo.isDone\" ng-change=\"update(todo)\"><\/td>\r\n                    <td>{{ todo.title}}<\/td>\r\n                    <td><button class=\"btn btn-danger btn-xs\" ng-click=\"delete($index)\">  <span class=\"glyphicon glyphicon-trash\" ><\/span><\/button><\/td>\r\n                <\/tr>\r\n            <\/table>\r\n        <\/div>\r\n    <\/div>\r\n    <div class=\"row\">\r\n        <div class=\"col-md-4\">\r\n            <input type='text' ng-model=\"todo.title\">\r\n            <button class=\"btn btn-primary btn-md\"  ng-click=\"add()\">Add<\/button>\r\n            <i ng-show=\"loading\" class=\"fa fa-spinner fa-spin\"><\/i>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n    <script src=\"lib\/jquery\/dist\/jquery.js\"><\/script>\r\n    <script src=\"lib\/bootstrap\/dist\/js\/bootstrap.js\"><\/script>\r\n    <script src=\"lib\/angular\/angular.js\"><\/script>\r\n    <script src=\"lib\/angular-resource\/angular-resource.js\"><\/script>\r\n    <script src=\"js\/lb-services.js\"><\/script>\r\n    <script src=\"js\/app.js\"><\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
IT IS NOT FINISHED YET! SETUP OUR DATASOURCE!
\nNow we want to connect it to a datasource, MySQL!. read: Connect your API to a data source<\/a>. Here are the steps:
\n1. Use scaffolding ‘slc’ to define the datasource. datasource name is ‘mysqlID’<\/p>\n
teddy@teddy-K43SJ:~\/Documents\/node\/todo$ slc loopback:datasource\r\n? Enter the data-source name: mysqlID\r\n? Select the connector for mysqlID: MySQL (supported by StrongLoop)\r\nConnector-specific configuration:\r\n? Connection String url to override other settings (eg: mysql:\/\/user:pass@host\/d\r\nb): \r\n? host: localhost\r\n? port: 3306\r\n? user: root\r\n? password: *****\r\n? database: loopback\r\n? Install loopback-connector-mysql@^2.2 Yes\r\ntodo@1.0.0 \/home\/teddy\/Documents\/node\/todo\r\n\u2514\u2500\u252c loopback-connector-mysql@2.4.1 \r\n  \u251c\u2500\u2500 async@0.9.2 \r\n  \u2514\u2500\u252c mysql@2.13.0 \r\n    \u251c\u2500\u2500 bignumber.js@3.1.2 \r\n    \u251c\u2500\u252c readable-stream@1.1.14 \r\n    \u2502 \u2514\u2500\u2500 isarray@0.0.1 \r\n    \u2514\u2500\u2500 sqlstring@2.2.0<\/pre>\n
2. Check the setting created in \/server\/datasources.json
\nSORRY, ONLY ADMIN CAN SHOW THIS!<\/span>
\n3. Create the database ‘loopback’ (utf8-general-ci) and table ‘Todo’ manually (via phpmyadmin). For the table ‘Todo’, Here are the fields:
\nid int, primary, auto increment,
\ntitle varchar(50),
\nisDone boolean
\n4. Don’t forget to hook the datasource ‘mysqlID’ in \/server\/model-config.json like this:<\/p>\n
{\r\n  ...,\r\n  \"Todo\": {\r\n    \"dataSource\": \"mysqlID\",\r\n    \"public\": true\r\n  }\r\n}<\/pre>\n
NOTE: TO ADD ANOTHER TABLE IN \/server\/model-config.json, PLS DO LIKE THIS (FOR EXAMPLE WE WANT TO ADD A TABLE ‘User’):<\/p>\n
{\r\n  ...,\r\n  \"Todo\": {\r\n    \"dataSource\": \"mysqlID\",\r\n    \"public\": true\r\n  },\r\n  \"User\": {\r\n    \"dataSource\": \"mysqlID\",\r\n    \"public\": true,\r\n    \"$promise\": {},\r\n    \"$resolved\": true\r\n  },\r\n}<\/pre>\n
SOMETHING LIKE THIS. PLS LEARN THE OTHERS PARAMS LIKE ‘$promise’ and ‘$resolved’.
\n5. 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\"\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Ref: Loopback and AngularJs first tutorial. Make sure you already installed node\/nodejs and npm on your system teddy@teddy-K43SJ:~$ npm -v 3.10.8 teddy@teddy-K43SJ:~$ node -v v6.9.1 teddy@teddy-K43SJ:~$ nodejs -v v4.8.0 Then start installing Strongloop framework teddy@teddy-K43SJ:~$ sudo npm install -g strongloop Wait until it’s finished. Then I go to my default directory for node project. teddy@teddy-K43SJ:~$ … Continue reading “StrongLoop Looback And AngularJS First Tutorial”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[60,13],"tags":[],"class_list":["post-2073","post","type-post","status-publish","format-standard","hentry","category-node","category-tutorial"],"_links":{"self":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/2073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/comments?post=2073"}],"version-history":[{"count":11,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/2073\/revisions"}],"predecessor-version":[{"id":2093,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/2073\/revisions\/2093"}],"wp:attachment":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/media?parent=2073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/categories?post=2073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/tags?post=2073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}