Sharing Top Content from the Angular-sphere.

Developing a Web Application Using Angular (Part 2)

Developing a web Application in #Angular -  @DZone

  • While there is a tendency to display any layered architecture in a strictly hierarchical manner (with one layer directly above the other), it is more beneficial to look at our architecture in terms of the interactions between the UI layer, service layer, and resources, as illustrated in the following diagram:…
  • The service layer then creates new resources or uses existing ones passed by the UI layer to represent the orders received or sent to the web service.
  • Additionally, the UI layer does not directly interact with the web service but instead interacts with the service layer using order resources.
  • Based on the design of our web service, we expect the resource to be sent to us by the web service to resemble the following (in Javascript Object Notation, JSON): – – This means that we have to ensure that our resource can be deserialized from the above JSON and…
  • The contents of the new window should resemble the following, indicating that all tests have passed: – – In the next article, we will continue implementing our web service, starting with the service layer and ultimately culminating with the completion of the UI layer and the usage of our web…

We continue our series on how to develop an Angular web application by examining and discussing the steps needed to develop the architecture of our app.

In the previous article, we explored the basic User Interface (UI) design for our web application and laid the foundation for our project by using the Angular Command Line Interface (CLI) to generate a skeleton project for us. In this article, we will develop an architecture for our web application and begin to implement the classes required to bring our web application from the abstract to the concrete.

Much like the general architecture that we developed for the backend web service in Creating a REST Web Service with Java and Spring (Part 1), many web applications follow the same basic architecture. Starting from the components closest to the user, we have a UI that is the most direct interconnection with the end-user of the system. Between the UI and the web service we are interfacing with, we have a service layer that abstracts the interaction with the web service, encapsulating the Hypertext Transfer Protocol (HTTP) actions (such as GET, POST, etc.). Lastly, we have resources, which are produced by the web service and displayed by the UI layer.

While there is a tendency to display any layered architecture in a strictly hierarchical manner (with one layer directly above the other), it is more beneficial to look at our architecture in terms of the interactions between the UI layer, service layer, and resources, as illustrated in the following diagram:

In this architecture, the most depended upon…

Developing a Web Application Using Angular (Part 2)

Comments are closed, but trackbacks and pingbacks are open.