All Projects → spring-petclinic → Spring Petclinic Angular

spring-petclinic / Spring Petclinic Angular

Angular 8 version of the Spring Petclinic sample application (frontend)

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Spring Petclinic Angular

Spring Petclinic Rest
REST version of the Spring Petclinic sample application
Stars: ✭ 257 (+77.24%)
Mutual labels:  rest, spring, sample
Scala Pet Store
An implementation of the java pet store using FP techniques in scala
Stars: ✭ 812 (+460%)
Mutual labels:  rest, sample
Cerberus
A demonstration of a completely stateless and RESTful token-based authorization system using JSON Web Tokens (JWT) and Spring Security.
Stars: ✭ 482 (+232.41%)
Mutual labels:  rest, spring
Company Structure
A company structure with a list of projects and their users
Stars: ✭ 48 (-66.9%)
Mutual labels:  spring, frontend
Angularjs Springmvc Sample Boot
A RESTful sample using Spring Boot, Spring MVC, Spring Data and Angular/Bootstrap.
Stars: ✭ 309 (+113.1%)
Mutual labels:  rest, spring
Fakerest
Patch fetch/XMLHttpRequest to fake a REST API server in the browser, based on JSON data.
Stars: ✭ 350 (+141.38%)
Mutual labels:  rest, frontend
Restful.js
A pure JS client for interacting with server-side RESTful resources. Think Restangular without Angular.
Stars: ✭ 977 (+573.79%)
Mutual labels:  rest, frontend
Spring Hateoas Examples
Collection of examples on how (and why) to build hypermedia-driven apps with Spring HATEOAS
Stars: ✭ 219 (+51.03%)
Mutual labels:  rest, spring
Openapi Spring Webflux Validator
🌱 A friendly kotlin library to validate API endpoints using an OpenApi 3.0 and Swagger 2.0 specification
Stars: ✭ 67 (-53.79%)
Mutual labels:  rest, spring
Spring Boot Mongodb Angular Todo App
A Sample App built using Spring Boot, Angular and MongoDB
Stars: ✭ 84 (-42.07%)
Mutual labels:  spring, frontend
Spring Boot Angular Example
Example app showing how to build a Spring Boot REST API and Angular UI
Stars: ✭ 92 (-36.55%)
Mutual labels:  rest, angular-cli
Spring Boot File Upload Download Rest Api Example
Spring Boot File Upload / Download Rest API Example
Stars: ✭ 300 (+106.9%)
Mutual labels:  rest, spring
Java Interview
At the beginning, it was the repository with questions from Java interviews. Currently, it's more like knowledge base with useful links.
Stars: ✭ 114 (-21.38%)
Mutual labels:  rest, spring
Udash Core
Scala framework for building beautiful and maintainable web applications.
Stars: ✭ 405 (+179.31%)
Mutual labels:  rest, frontend
Mastering Junit5
A comprehensive collection of test examples created with JUnit 5
Stars: ✭ 223 (+53.79%)
Mutual labels:  rest, spring
Micro Server
Microserver is a Java 8 native, zero configuration, standards based, battle hardened library to run Java Rest Microservices via a standard Java main class. Supporting pure Microservice or Micro-monolith styles.
Stars: ✭ 929 (+540.69%)
Mutual labels:  rest, spring
Spring Boot Postgresql Jpa Hibernate Rest Api Demo
Building RESTful APIs with Spring Boot, PostgreSQL, JPA and Hibernate
Stars: ✭ 209 (+44.14%)
Mutual labels:  rest, spring
Bookmarks.dev
Bookmarks and Code Snippets Manager for Developers & Co
Stars: ✭ 218 (+50.34%)
Mutual labels:  rest, frontend
Microservices Springboot
Example of microservices application with Spring Boot, Zuul, Eureka, MongoDB and RabbitMQ.
Stars: ✭ 53 (-63.45%)
Mutual labels:  rest, spring
Golang Gin Realworld Example App
Exemplary real world application built with Golang + Gin
Stars: ✭ 1,780 (+1127.59%)
Mutual labels:  rest, sample

Spring Petclinic Angular Build Status

Angular frontend for Spring Petclinic

Warning: client only. Use REST API from backend spring-petclinic-rest project You need start backend server before start frontend application.

Screenshot

Screenshot of SPring Petclinic Angular

Installation

  1. Update angular-cli to latest version (8.0.3 current) as described on angular-cli github readme.md
npm uninstall -g angular-cli @angular/cli
npm cache clean
npm install -g @angular/[email protected]

Clone project from github

git clone https://github.com/spring-petclinic/spring-petclinic-angular.git

Install local project package

npm install --save-dev @angular/[email protected]
if npm version > 5.0 delete package-lock.json file  ( bug in npm 5.0 - this file prevent correct packages install)
npm install

Now project use Angular CLI v.8.0.3 and Angular v.8.0.1 You can see current dependencies in package.json file.

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.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

You can also build the application in a dedicated docker image using the provided Dockerfile as follows:

docker build -t spring-petclinic-angular:latest .

Then you will be able to use it as follows:

docker run --rm -p 8080:8080 spring-petclinic-angular:latest

Documentation

The documentation of the Spring Petclinic Angular application is generated by the compodoc tool.

Documentation URL: https://spring-petclinic.github.io/spring-petclinic-angular/

Regenerate the docs folder with compodoc:

compodoc -p src/tsconfig.app.json -d docs

Deploy on Web servers

Deploy on Nginx (for Nginx CentOS installation):

  1. Build Angular application:

ng build --prod --base-href=/petclinic/ --deploy-url=/petclinic/

  1. Create sub-directory /petclinic in default nginx directory /usr/share/nginx/html

  2. Copy /dist sub-directory from Angular appication to /usr/share/nginx/html/petclinic

  3. Edit nginx config (nginx.conf file in /etc/nginx/ directory)

server {
	listen       80 default_server;
        root         /usr/share/nginx/html;
        index index.html;

	location /petclinic/ {
                alias /usr/share/nginx/html/petclinic/dist/;
                try_files $uri$args $uri$args/ /petclinic/index.html;
        }
}
  1. Reload nginx: nginx -s reload

  2. Run app in brouser: http://server_name/petclinic/

Deploy on Apache (for Apache CentOS installation):

  1. Build Angular application:

ng build --prod --base-href=/petclinic/ --deploy-url=/petclinic/

  1. Create sub-directory /petclinic in default Apache directory /var/www/html

  2. Go into Angular appication /dist sub-directory and copy all files and sub-dirs from it to /var/www/html/petclinic

  3. Edit Apache config (/etc/https/conf/httpd.conf):

sudo vi /etc/httpd/conf/httpd.conf

Find the Directory /var/www/html> section and change the AllowOverride directive from None to All:

 /etc/httpd/conf/httpd.conf
 . . .
  <Directory /var/www/html>
 . . .
 # 
 # AllowOverride controls what directives may be placed in .htaccess files.
 # It can be "All", "None", or any combination of the keywords:
 # Options FileInfo AuthConfig Limit
 #
 AllowOverride All
 . . .
 </Directory>
 . . .
  1. Save and exit the file and then restart Apache to apply the change:

sudo systemctl restart httpd

  1. Create a .htaccess file in the directory /var/www/html/petclinic

sudo vi /var/www/html/petclinic/.htaccess

Add the following line to the top of the file to activate the RewriteEngine, which instructs Apache to process any rules that follow:

RewriteEngine On  
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]  
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d  
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ index.html  
  1. Reload Apache:

sudo systemctl restart httpd

  1. Run app in browser: http://server_name/petclinic/

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via ng serve.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].