Sharing Top Content from the Angular-sphere.

Developing a Web Application Using Angular (Part 4)

Developing a Web Application Using #Angular (Part 4) via #MVB Justin Albano

  • This double-duty derives from the fact that components for creating a new order and editing an existing order look identical, with a few important caveats: – – This is a common issue in many web applications, but the Angular framework provides a mechanism for solving it with minimal repetition.
  • Combining these two mechanisms, we end up with the following components and templates for our UI layer: – – Although we could have skipped the creation of an abstract component and had our edit and create order components use the common template, by creating an abstract component, we ensure that…
  • In order to add some visual enhancements, we have also included some CSS for the template: – – The template for the list of order components is listed below and is very similar in its usage of HTML elements as the save order template, but it does have some noticeable…
  • Since our (that displays the list of existing orders) has the fewest number of interactions and intricacies, we will start with implementing this component: – – The decorator denotes that our class is a component that can be used by the Angular framework, which allows it to be used to…
  • In this particular case, we are injecting the and (provided by the Angular framework) through constructor injector; we will later use the to retrieve the list of all orders, while the object will be used for navigating to other components.

We continue to build our Angular application, this time taking a look at implementing our User interface (UI) layer, using HTML, CSS, and Typescript code.

In the previous article, we moved one step closer to our working web application by building our service provider layer that acts as an abstraction of our order management web service. With this foundation set, we are ready to complete the last layer in our web application: the User Interface (UI) layer.

The first step in implementing our UI layer is to reflect upon the UI design we created in Part 1. In this design, we created two main components: (1) an order list component and (2) a save order component. While the latter component is abstracted into a single component, we are actually designing it to perform two separate tasks: (1) create a new order and (2) edit an existing order. This double-duty derives from the fact that components for creating a new order and editing an existing order look identical, with a few important caveats:

This is a common issue in many web applications, but the Angular framework provides a mechanism for solving it with minimal repetition. Angular allows us to create a single template that acts as the look of a component, while at the same time allowing us to create multiple component classes that use this single template. We can also create an abstract component class that can contain the functionality that is common between the create order and edit order components. Combining these two mechanisms, we end up with the following components and templates for…

Developing a Web Application Using Angular (Part 4)

Comments are closed, but trackbacks and pingbacks are open.