2

I have been doing extensive research into hooking up a Node.js/AngularJS front end server with a Spring Boot backend API server, but I keep encountering obstacles. And I have not found one single working example on the web.

The Spring examples all serve their Angular code from inside a Spring Boot app, but that is a horrible practice for many reasons.

Can someone point to some working examples of a Node.js/AngularJS front end server successfully making data/API transactions with a backend Spring Boot server?

Normally, I would never post a question asking for examples, but this is a special case because none of my research has located working examples, and my questions on the topic never seem to resolve this essential question.

2 Answers 2

2

Hello this is the spring api end point

@RestController
@RequestMapping("/api")
public class ExtendedRegisteredTimeResource {


    @Inject
    private ExtendedRegisteredTimeService ExtendedRegisteredTimeService;




    @GetMapping("/extended-registered-time/{employee}")
    @ResponseBody
    public ResponseEntity<List<Registered_time>> getSubLeaves(@PathVariable String employee) {

        List<Registered_time> result = ExtendedRegisteredTimeService.getSelectedRegisteredTime(employee);

        return new ResponseEntity<>(result, HttpStatus.OK);

    }

}

Above searches for the employee name which is passed in the front-end.I have manually passed my name on it.

(function() {
    'use strict';
    angular
        .module('cambioConnectApp')
        .factory('RegisteredTimeService', RegisteredTimeService);

    RegisteredTimeService.$inject = ['$resource'];

    function RegisteredTimeService ($resource) {

        var userName="HGajanayake";



       // var resourceUrl =  '/api/extended-registered-time?employee='+userName;
        var resourceUrl =  "/api/extended-registered-time/:employee";
        return $resource(resourceUrl, {}, {
            'query': {

                method: 'GET',

                isArray: true
            },

            'status':{
                method:"POST",
                isArray:true,

                transformRequest: function (data) {
                    var copy = angular.copy(data);
                    return angular.toJson(copy);
                }
            }

        });

This is the repository where query is implemented

public interface ExtendedRegisteredTimeRepository extends Registered_timeRepository {




    @Query("SELECT e from Registered_time e where e.employee=:employee ")
    public List<Registered_time> getSelectedRegisteredTime(@Param("employee") String employee);


}

This is the service implementation where Autowired annotation used

@Service
@Transactional
public class ExtendedRegisteredTimeServiceImpl implements ExtendedRegisteredTimeService {






    @Autowired
    private ExtendedRegisteredTimeRepository ExtendedRegisteredTimeRepository;


    @Override
    public List<Registered_time> getSelectedRegisteredTime(String employee) {


       return ExtendedRegisteredTimeRepository.getSelectedRegisteredTime(employee);
    }



}

You have to create a DTO of the table also

@Entity
@Table(name = "registered_time")
@Cache(usage = CacheConcurrencyStrategy.NONSTRICT_READ_WRITE)
public class Registered_time implements Serializable {

    private static final long serialVersionUID = 1L;

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(name = "employee")
    private String employee;

    @Column(name = "employee_department")
    private String employee_department;

    @Column(name = "employee_organisation")
    private String employee_organisation;

    @Column(name = "project")
    private String project;

    @Column(name = "project_organisation")
    private String project_organisation;

    @Column(name = "row_number")
    private Integer row_number;

    @Column(name = "local_date")
    private LocalDate local_date;

    @Column(name = "total_cost")
    private Float total_cost;

    @Column(name = "total_time")
    private Float total_time;

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getEmployee() {
        return employee;
    }

    public Registered_time employee(String employee) {
        this.employee = employee;
        return this;
    }

    public void setEmployee(String employee) {
        this.employee = employee;
    }

    public String getEmployee_department() {
        return employee_department;
    }

    public Registered_time employee_department(String employee_department) {
        this.employee_department = employee_department;
        return this;
    }

    public void setEmployee_department(String employee_department) {
        this.employee_department = employee_department;
    }

    public String getEmployee_organisation() {
        return employee_organisation;
    }

    public Registered_time employee_organisation(String employee_organisation) {
        this.employee_organisation = employee_organisation;
        return this;
    }

    public void setEmployee_organisation(String employee_organisation) {
        this.employee_organisation = employee_organisation;
    }

    public String getProject() {
        return project;
    }

    public Registered_time project(String project) {
        this.project = project;
        return this;
    }

    public void setProject(String project) {
        this.project = project;
    }

    public String getProject_organisation() {
        return project_organisation;
    }

    public Registered_time project_organisation(String project_organisation) {
        this.project_organisation = project_organisation;
        return this;
    }

    public void setProject_organisation(String project_organisation) {
        this.project_organisation = project_organisation;
    }

    public Integer getRow_number() {
        return row_number;
    }

    public Registered_time row_number(Integer row_number) {
        this.row_number = row_number;
        return this;
    }

    public void setRow_number(Integer row_number) {
        this.row_number = row_number;
    }

    public LocalDate getLocal_date() {
        return local_date;
    }

    public Registered_time local_date(LocalDate local_date) {
        this.local_date = local_date;
        return this;
    }

    public void setLocal_date(LocalDate local_date) {
        this.local_date = local_date;
    }

    public Float getTotal_cost() {
        return total_cost;
    }

    public Registered_time total_cost(Float total_cost) {
        this.total_cost = total_cost;
        return this;
    }

    public void setTotal_cost(Float total_cost) {
        this.total_cost = total_cost;
    }

    public Float getTotal_time() {
        return total_time;
    }

    public Registered_time total_time(Float total_time) {
        this.total_time = total_time;
        return this;
    }

    public void setTotal_time(Float total_time) {
        this.total_time = total_time;
    }

    @Override
    public boolean equals(Object o) {
        if (this == o) {
            return true;
        }
        if (o == null || getClass() != o.getClass()) {
            return false;
        }
        Registered_time registered_time = (Registered_time) o;
        if (registered_time.getId() == null || getId() == null) {
            return false;
        }
        return Objects.equals(getId(), registered_time.getId());
    }

    @Override
    public int hashCode() {
        return Objects.hashCode(getId());
    }

    @Override
    public String toString() {
        return "Registered_time{" +
            "id=" + getId() +
            ", employee='" + getEmployee() + "'" +
            ", employee_department='" + getEmployee_department() + "'" +
            ", employee_organisation='" + getEmployee_organisation() + "'" +
            ", project='" + getProject() + "'" +
            ", project_organisation='" + getProject_organisation() + "'" +
            ", row_number='" + getRow_number() + "'" +
            ", local_date='" + getLocal_date() + "'" +
            ", total_cost='" + getTotal_cost() + "'" +
            ", total_time='" + getTotal_time() + "'" +
            "}";
    }
}
Sign up to request clarification or add additional context in comments.

Comments

-1

I worked in the past on a project where we deployed front end on Node.Js with AngularJs. We used bower and nodejs to manage dependencies. Nodejs was also used as a server for front end. Front end was developed using angularJs. Spring rest web services were exposed to be consumed by front end. I don't have the code with me but I can look if you can share your code.

5 Comments

Thank you. I have approached it from so many angles that it would be too much code to post. It boils down to Spring Security treating requests differently when requests come from outside its proxy than when requests come from inside the proxy. So an AngularJS app inside a Spring Boot app can make RESTful calls to the API in the Spring App. But when you move the same AngularJS app to Node.js outside the Spring proxy, the same RESTful calls get rejected. At the moment, I am exploring OAuth2, and encountering similar issues when I replace the client Spring developed with a Node.js client.
This OP is general in nature, asking for ANY working example of a Node.js app talking with a Spring Boot API. I ask this general question because none of my many specific questions have been resolved. This particular OP will take ANYTHING so that I can at least have a working starting point. However, if you want specific code in a more specific question, then have a look at this GitHub post: github.com/spring-projects/spring-security-oauth/issues/806
We used csrf token for authentication and gulp for proxy handling. I will try to get that code and share it with you.
I am not sure whether this can be useful for you or not. We followed this as the base of project github.com/jhipster/jhipster-sample-app and set up proxy in node js with middleware(npmjs.com/package/http-proxy-middleware).
Thank you very much for taking the time to look into this. I will examine your links when I can devote some time to this long-standing problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.