https://github.com/goyalyatin/mean-website-frontend

Frontend application using Angular4
https://github.com/goyalyatin/mean-website-frontend

angular4 frontend-application ui website-frontend

Last synced: 5 days ago
JSON representation

Frontend application using Angular4

• Host: GitHub
• URL: https://github.com/goyalyatin/mean-website-frontend
• Owner: GoyalYatin
• License: mit
• Created: 2019-08-10T12:36:57.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T08:41:45.000Z (almost 2 years ago)
• Last Synced: 2024-10-12T08:06:01.058Z (about 1 month ago)
• Topics: angular4, frontend-application, ui, website-frontend
• Language: TypeScript
• Size: 2.91 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 27
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# MEAN-Website-Frontend

Frontend application using Angular

Backend application is written in [MEAN-Website-Backend](https://github.com/GoyalYatin/MEAN-Website-Backend) repo.

## Index

- [Architecture](#arch)

- [Setup](#setup)

    - [Setup Angular Project](#project)

    - [Add Bootstrap and Font-awesome](#bootstrap)

- [UI View](#ui)

- [Development server](#dev)

- [Generate Build files](#build)

- [Reference](#ref)

- [License](#license)

## Architecture

![Highlevel](doc/highlevel.png)

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.

![Lowlevel](doc/lowlevel.png)

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 [email protected] @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

![ui](doc/ui.PNG)

## 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) license