• Stars
    star
    199
  • Rank 196,105 (Top 4 %)
  • Language
    TypeScript
  • Created over 7 years ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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/cli@latest

Clone project from github

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

Install local project package

npm install --save-dev @angular/cli@latest
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.

More Repositories

1

spring-petclinic-microservices

Distributed version of Spring Petclinic built with Spring Cloud
Java
1,622
star
2

spring-petclinic-rest

REST version of the Spring Petclinic sample application
Java
459
star
3

spring-framework-petclinic

A Spring Framework application based on JSP, Spring MVC, Spring Data JPA, Hibernate and JDBC
CSS
360
star
4

spring-petclinic-kotlin

Kotlin version of Spring Petclinic
Kotlin
345
star
5

spring-petclinic-reactjs

ReactJS (with TypeScript) and Spring Boot version of the Spring Petclinic sample application
Java
269
star
6

spring-petclinic-graphql

PetClinic Example based on GraphQL
CSS
191
star
7

spring-petclinic-cloud

Fork of the Spring Cloud Microservices project packaged to be deployed on several Cloud platforms: Kubernetes and Cloud Foundry
Java
135
star
8

spring-petclinic-data-jdbc

Spring Data JDBC version of the Spring Boot Petclinic
Java
102
star
9

spring-petclinic-reactive

Reactive version of Spring PetClinic sample application based on Spring Webflux and Cassandra
Java
71
star
10

spring-petclinic-angularjs

AngularJS 1 and Spring Boot 2 version of the Spring Petclinic sample application
Java
71
star
11

spring-petclinic-microservices-config

Configuration repository for distributed Spring Petclinic application
44
star
12

spring-petclinic-htmx

Htmx version of the Spring PetClinic sample application
CSS
27
star
13

spring-petclinic-hilla

Hilla implementation of the Spring PetClinic sample
Java
8
star
14

spring-petclinic-vaadin-flow

Vaadin Flow implementation of the Spring PetClinic sample
Java
8
star
15

spring-petclinic.github.io

Spring Petclinic organisation website
CSS
7
star
16

spring-petclinic-mustache

Classic Spring PetClinic with Mustache templates
CSS
4
star
17

spring-petclinic-cloud-config

Configuration repository for the Spring Petclinic Cloud project
2
star