GoyalYatin / MEAN-Website-Frontend

Frontend application using Angular4

MEAN-Website-Frontend

Frontend application using Angular

Backend application is written in MEAN-Website-Backend repo.

Index

• Architecture
• Setup
  • Setup Angular Project
  • Add Bootstrap and Font-awesome
• UI View
• Development server
• Generate Build files
• Reference
• License

Architecture

Above picture describes how the applications are positioned. This is high level flow.

Testing is done manually. The tests can be automated using Robot framework's requests and ui testing libraries.

This picture describes the sequence of the calls, this is low level design for this complete application, this repo only consist of frontend side.

Lets setup the environment

Setup Angular Project-

• First run npm install -g @angular/cli to install the Official Angular CLI globally
• Now run ng new todoapp-angular --style=scss to generate an Angular app.
• cd todoapp-angular and then npm install
• Now run ng serve and Go to http://localhost:4200 to see the generated app.

Add Bootstrap and Font-awesome

Run npm install --save bootstrap@4.0.0-beta @ng-bootstrap/ng-bootstrap font-awesome

Other installations needed before running full app

npm install --save rxjs-compat
npm install @angular/http@latest

UI View

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Generate Build files

Run ng build to generate Built Files in the dist directory.

Reference

https://medium.com/@nomanbinhussein/mean-app-tutorial-with-angular-4-part-2-4250522c845

License

MIT license