How to setup a project using bower and angularjs $resource

Table of Contents

• Requirements
• Bower configuration
  • .bowerrc
  • bower.json
  • install bower managed dependencies
  • install node module dependencies
• URLS
• Resource usage
• Test and generate report
• Swagger
• Application
• Monitoring and metrics
• Consul

Requirements

Installation of components below is required:

• jdk 8

• node package manager npm (brew install node)

• bower (npm install -g bower)

Bower configuration

Bower configuration consists of two files:

• .bowerrc

• bower.json

.bowerrc

In this file we configure the directory where bower will write components to.

{
  "directory": "src/main/resources/static/components/"
}

bower.json

This file contains the bower configuration. Find Bower information on the internet.

Example:

{
  "name": "example-resource",
  "authors": [
    "Ernst Vorsteveld <ernst.vorsteveld@gmail.com>"
  ],
  "description": "Test using $resource of angularjs",
  "main": "",
  "moduleType": [],
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular": "~1.4.8",
    "angular-ui-bootstrap": "0.14.3",
    "angular-route" :"1.4.8",
    "angular-mocks" : "1.4.8",
    "angular-resource" : "1.4.8"
  }
}

install bower managed dependencies

Execute for installation dependencies run: bower update

install node module dependencies

To install node dependencies run: npm update

URLS

IAdded a constant for specification of some constant values. I also used the persons controller url. This is not how you would expect it (this url should be defined in the person.factory.js. It is only created for showing how it could work.

Resource usage

The Person factory uses a angularjs $resource. It shows how you can retrieve a single user and all the users.

Test and generate report

Code coverage report for java is generated on: ./gradlew clean test jacoco

result: build/jacocoHtml/index.html

Code coverage report for javascript is generated on: ./gradlew clean karmaRun

result: build/coverage/PhantomJS%202.1.1%20(Mac%20OS%20X%200.0.0)/index.html

unit test report: build/reports/tests/index.html

Swagger

Find swagger documentation on-line:

Point your browser to: http://localhost:8080/swagger-ui.html

Application

You can start the application from your project directory with the command gradle bootRun or ./gradlew bootRun. Alternatively you can build and run in from the build/lib directory using: java -jar -Dserver.port=8080 example-resource-1.0-SNAPSHOT.jar.

This way you can start a second instance on a different port number: java -jar -Dserver.port=8081 example-resource-1.0-SNAPSHOT.jar

To enable service discovery use: java -jar -Dserver.port=8081 -Dspring.cloud.consul.discovery.enabled=true example-resource-1.0-SNAPSHOT.jar

Point your browser to: http://localhost:8080 or http://localhost:8081

Monitoring and metrics

Monitoring and metrics is provided using Spring Actuator. Access to the actuator endpoints is protected. Check application.resources for username/password and an example of the configuration.

• The list of all the available endpoints: http://localhost:8080/actuator; To include this you need to add`spring-boot-starter-hateoas`.

• You can also implement it yourself. Example implementation: ShowEndpoints.java. In that case a list if available at: http://localhost:8080/showEndPoints.

Some example endpoints:

• http://localhost:8080/metrics

• http://localhost:8080/info (info provided through application.properties)

• http://localhost:8080/health (custom health using CustomHealthCheck.java)

• http://localhost:8080/server (custom endpoint using ServerEndpoint.java)

Consul

The application registers itself with Consul. It expects consul to run on 192.168.99.100:8500. This can be configured in the application.yml and overwritten from the command line. Easy way to start a consul is using Docker:

docker run -p 8400:8400 -p 8500:8500 -p 8600:53/udp -h node1 progrium/consul -server -bootstrap -ui-dir /ui

You can then check if it’s running and the app has registered itself using the following link: http://192.168.99.100:8500.