HTTP, Observables & Reactive Forms

This section introduces you to concepts that take your mobile app to the “Real world” - accessing data from external servers, improving performance, forms and validation.  

Before we get there, there are some good practices that need to be looked at. This includes Managing code, which is often done by organizing code better. If code is not managed, it often turns out to be like spaghetti.

Using a design pattern like the MVC model helps organizing your code better. MVC stands for Model View Controller, with each component representing a layer of your code. Using such a framework helps you maintain your code better. 

Angular uses the MVC pattern and consequently, so does Ionic. In this chapter we will see how we can use the pattern effectively to manage data within the app and modularize the app further beyond the components, modules and services that we have already seen. 

Model

A model is a simple typescript class. In the case of our example, it is a class containing all the attributes of a course

Now this can be instantiated across the app whenever we are referring to a “course”.

In a similar way, it can be used in arrays as well

View & Controller

In the context of MVC the view and controller in Angular/ Ionic are the Component Template and the Component Class respectively. The Component is a central concept to modern JavaScript frameworks like Angular, React and Vue. 

A component has 3 parts as we have already seen.  

1. decorator function with metadata 
2. class 
3. Template 

In the above example, we have seen that the Model course has been used in the component class as an array and displayed in the template. 

Making HTTP Calls to fetch data 

In this example, we have initialized the array of courses ourselves. But in most cases, this is fetched from a back end application written in node/ Java/ ,net etc. Often, it is from a third party application. 

For this example, we have a Java application which returns a list of Courses on an http request.

Calling the API “http://localhost:8080/Course” will return the JSON 

[{"id":1,"course":"Java","faculty":null,"duration":null},
{"id":2,"course":"Spring","faculty":"Max","duration":null},
{"id":3,"course":"Angular","faculty":"Max","duration":null},
{"id":4,"course":"React","faculty":"Max","duration":null},
{"id":5,"course":"Vue","faculty":"Josh","duration":"10"}]

We will now see how this can be fetched into the Angular application.

HTTP requests can be made using the Angular module, HTTPClientModule.

In app.module.ts

We can use this to make http requests and fetch data. We change the method that initializes the array as follows: 

1. First we import the HTTPClient module and inject it into the constructor

2. We write a method to call the API

3. We call the method to initialize the array, asynchronously

Using a Singleton to store the API end-point in one place

We will not want to explicitly use the URL whenever API calls are made, so, we create a singleton service and store the URL in a variable 

Import the provider and inject into the component calling the API.

And use the variable in the get method

Moving the API call to a service

API calls are normally not done directly in a component, but rather in a service. So we create a service to manage data related functionality.

Inject this service into the component and call the new method.

Using observables

The Observer design pattern is aimed at loosely coupling layers of code. There are two parts to this pattern - a subject and an observer. Using this model is central to what is known as Reactive Programming. Propagation of change is central to Reactive Programming and we will see how that is done in Angular/ Ionic in this section 

A subject holds a list of observers to be notified whenever it undergoes a change 

Typically the subject is a model and an observer is an UI component. 

Observables are made available to Angular and Ionic through RXJS. Reactive Extensions for JavaScript (RxJS) is a set of libraries created by Matt Podwysocky. It is now maintained by Microsoft.  

In this example we will further work on the service we just created to include an observer and subscribe to it from the component. 

Declare the Observable variable

In this example, we use the BehaviourSubject. The BehaviourSubject holds the value that needs to shared/ propagated to other components. In this case, it will hold the array of courses.  

Assign Values to the Observable

The BehaviourSubject is assigned values using the next() method.

The courses variable is assigned the value returned by the HTTP request (data) using this.courses.next(data) 

Whenever the getCourses method is called the array of courses will be stored in the BehaviourSubject “courses”. It will then be propagated to all the components that subscribe to it. 

Subscribe to the Observable

This subscription will ensure that whenever there is a change in courseProvider.courses, its value will be assigned to the variable courses within the component. 

Call the getCourses() method to fetch data 

Calling this method will set the value to courseProvider.courses, which will propagate its value across the application to whichever component that subscribes to it.

Reactive Forms 

Reactive forms provide a model driven approach to handle form elements that change over time. To use forms in Angular/ Ionic, the Angular reactive forms module needs to be imported into the ngModule.

We generate a page to create a course

We put in html for inserting a course

In this case we control the binding of data to the form using FormGroup and FormElement

The FormGroup object is used to define a form. Each field in the form is defined as a FormControl in the component ts. Notice that this object exactly matches the structure of the “Course” object that we have defined as the model already.

Notice the use of formGroup, FormControlName and onSubmit in the form.

Now on clicking the submit button, we will display the values in the formgroup as an object,

We are now set to save these values to the database/ submit to the server. This is done using the post statement.
We create a post method in the service. Notice that course is sent as a parameter. (Post Data)

And call this method from the submit button

Further, Angular provides form validation features as well. This is accomplished by using the Validators object.

In Ionic if the data in the form is invalid, the color of the textbox reflects the status

The validity of the form can be programmatically accessed as follows:

Template driven forms

While in this section, we will look in detail at reactive forms, which is a model driven approach to forms. We will also take a brief look at template driven forms, where you can manually bind different controls in the form to attributes in the component.

Angular allows forms when you import the AngularFormsModule in the ngModule

We generate a page to create a course

We initialize the course object in the component ts.

And put in the HTML for the form

In the html, notice that [(ngModel)] binds each textbox to a an attribute of the course object and the course

The ngsubmit property on the form links to the onsubmit() method, where we save the course object

And that concludes this section, which covered examples of how to use the MVC framework effectively in forms and in making HTTP requests. We also saw the use of RXJS to use Observables to propagate changes to the model.