{"id":20186333,"url":"https://github.com/leolanese/angular-nodejs","last_synced_at":"2026-05-04T12:34:59.557Z","repository":{"id":170444294,"uuid":"646579297","full_name":"leolanese/Angular-NodeJS","owner":"leolanese","description":"Full-Stack Angular-NodeJS. Simple using FE Angular and NodeJS as BE","archived":false,"fork":false,"pushed_at":"2023-05-28T21:16:01.000Z","size":9064,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-13T03:33:21.355Z","etag":null,"topics":["angular16","endpoint","fullstack-javascript","javascript","nodejs","standalone"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leolanese.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-05-28T20:54:15.000Z","updated_at":"2023-05-28T21:06:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"435bd340-b86b-4664-83b0-56c20a244d0e","html_url":"https://github.com/leolanese/Angular-NodeJS","commit_stats":null,"previous_names":["leolanese/angular-nodejs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/leolanese/Angular-NodeJS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2FAngular-NodeJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2FAngular-NodeJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2FAngular-NodeJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2FAngular-NodeJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leolanese","download_url":"https://codeload.github.com/leolanese/Angular-NodeJS/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2FAngular-NodeJS/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32607726,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-04T10:08:07.713Z","status":"ssl_error","status_checked_at":"2026-05-04T10:08:02.005Z","response_time":58,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["angular16","endpoint","fullstack-javascript","javascript","nodejs","standalone"],"created_at":"2024-11-14T03:16:51.834Z","updated_at":"2026-05-04T12:34:59.545Z","avatar_url":"https://github.com/leolanese.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NodeJS and Angular\n\n\u003e Full-Stack Angular-NodeJS. Simple using FE Angular and NodeJS as BE\n\n## This is what we created:\n\n### Frontend (Angular Application): \n\n- We created a simple Angular application that includes a login form for users to enter their email and password. This form is handled by a LoginComponent, which uses an AuthService to send HTTP requests to the server.\n\n- The AuthService makes use of Angular's HttpClient to communicate with our server's API. We implemented both login and get user message functionality in this service, which corresponds to POST and GET requests to our server.\n\n- The login method in the AuthService makes a POST request to the /api/login endpoint on our server, and the getUser method makes a GET request to the /api/user endpoint.\n\n- The LoginComponent then uses these AuthService methods to handle form submission and fetch the user data. It displays a welcome message returned by the server upon a successful login.\n\n- Additionally, we created a MessageComponent to display a simple message fetched from the /api/message endpoint of our server.\n\n## Backend (Node.js Server): \n\n- We created a simple Express server in Node.js. This server has two endpoints: /api/login and /api/user. The /api/login endpoint accepts POST requests and checks the provided credentials against a mock user data. It returns a response indicating whether the login was successful.\n\n- The /api/user endpoint accepts GET requests and returns a welcome message. In a real-world application, this endpoint could be used to fetch and return user-specific data.\n\n- We also added a /api/message endpoint that returns a simple static message. This endpoint is used to demonstrate displaying data fetched from a server in an Angular component.\n\n- Integration of Frontend and Backend: Our Angular application and Node.js server communicate with each other over HTTP, allowing us to demonstrate a basic form of the Model-View-Controller (MVC) architecture where the server acts as the model and controller, and the Angular application acts as the view. The Angular application sends user data to the server and receives responses, displaying the received data and messages to the user.\n\n\u003e Please note that this is a very basic setup for demonstration purposes. In a real-world application, you would likely need to implement more advanced features such as data persistence with a database, password hashing for security, session management or JWT for keeping users logged in, error handling, form validation, and more.\n\n---\n\n## Setup step-by-step\n\n```js\n// FE\nnpm i -g @angular/cli --routing --style=scss --unit-testing\nng version\n\nng new testProject --routing --style=scss\ncd testProject\n\nng g c login --standalone\nng g s services/auth\n\nng serve\n```\n\n```js\n// BE\nmkdir loginAPi\ncd loginAPi\n\nnpm init -y\n\nnpm i express cors body-parser\nnpm i --save-dev typescript ts-node nodemon @types/node @types/express\n```\n\n```js\ntouch server.ts\n```\n\n```js\n// server.ts\nconst express = require('express');\nconst bodyParser = require('body-parser');\nconst cors = require('cors');\n\n// Initialize Express app\nconst app = express();\n\n// Use middlewares\napp.use(cors());\napp.use(bodyParser.json());\n\n// API endpoint for user data\napp.get('/api/message', (req, res) =\u003e {\n    res.json({ message: 'Hello from Node.js!' });\n  });\n\n// Start server\napp.listen(3000, () =\u003e console.log('Server started on port 3000'));\n```\n\n```js\nnode server.ts\n```\n\n### Validate end-point (POST)\n\n\u003e Remember to maintain both BE \u0026 FE services runnning\n\n```js\ncurl -X POST -H \"Content-Type: application/json\" -d '{\"email\":\"test@test.com\", \"password\":\"password\"}' http://localhost:3000/api/login\n// {\"success\":true,\"message\":\"Login successful!\"}%     \n```\n\n---\n\n## Usual Angular info here\n\n- This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.0.4.\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.\n\n## Code scaffolding\n\nRun `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.\n\n## Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.\n\n## Running unit tests\n\nRun `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Running end-to-end tests\n\nRun `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.\n\n---\n### :100: \u003ci\u003eThanks!\u003c/i\u003e\n#### Now, don't be an stranger. Let's stay in touch!\n\n##### :radio_button: linkedin: \u003ca href=\"https://www.linkedin.com/in/leolanese/\" target=\"_blank\"\u003e@LeoLanese\u003c/a\u003e\n##### :radio_button: Twitter: \u003ca href=\"https://twitter.com/LeoLanese\" target=\"_blank\"\u003e@LeoLanese\u003c/a\u003e\n##### :radio_button: Portfolio: \u003ca href=\"https://www.leolanese.com\" target=\"_blank\"\u003ewww.leolanese.com\u003c/a\u003e\n##### :radio_button: DEV.to: \u003ca href=\"https://www.dev.to/leolanese\" target=\"_blank\"\u003edev.to/leolanese\u003c/a\u003e\n##### :radio_button: Blog: \u003ca href=\"https://www.leolanese.com/blog\" target=\"_blank\"\u003eleolanese.com/blog\u003c/a\u003e\n##### :radio_button: Questions / Suggestion / Recommendation: developer@leolanese.com","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleolanese%2Fangular-nodejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleolanese%2Fangular-nodejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleolanese%2Fangular-nodejs/lists"}