You are currently viewing Using Angular2 to Develop a Web Based Digital Marketing Application
using-angular2-to-develop-a-web-based-digital-marketing-application

Using Angular2 to Develop a Web Based Digital Marketing Application

  • Post published:June 2, 2017

vteam #659 was hired to work on a web based digital marketing application. This application lets the users of our client to register themselves, create campaigns and multiple offers according to their location. In the first phase, the application’s front-end development in Angular2 was required. Additionally, the client wanted vteams to make the front-end application testable without integrating any real back-end.

vteams engineer Fahad Nisar went through the documentation of Angular2 and found MockBackend class. In order to mock real server calls, this class is used in unit testing as it keeps the unit test running quickly in isolation. Fahad used the power of mockbackend to enable the client’s application to intercept all HTTP calls and return the desired responses accordingly:

import { MockBackend } from '@angular/http/testing';
import { Http, HttpModule, BaseRequestOptions } from '@angular/http';

@NgModule({
    declarations: [APPLICATION_COMPONENTS],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        RouterModule.forRoot(routes)
    ],
    bootstrap: [AppComponent],
    providers: [
        MockBackend, BaseRequestOptions, {
            provide: Http,
            deps: [MockBackend, BaseRequestOptions],
            useFactory: (backend, options) => {
                return new Http(backend, options);
            }
        }
    ]
})

In this code, provide function is used to communicate Angular’s dependency injection system that which of the actual instances of a class will be used and what dependencies it will require. A custom instance of the HTTP service is created. deps part is used to declare the required dependencies which will be injected right before the call to provide function. Those dependencies will then be used to create a new instance of HTTP.

For the web service, HTTP will be used as it is generally used in any other Angular2 application for making HTTP calls:

import { Http, Headers } from '@angular/http';

constructor(private http: Http) { }

loadAllClients() {
 this.http.get('https://localhost:8080/api/client')
 .subscribe(res => {
     return return res.json();
 },
 err => console.log("Error Occured", err));
}

The implementation code is given below which will intercept the HTTP calls and will return a mock response including the “Response”, “ResponseOptions” and “Backendclass in the component (in which calls intercept is required):

import { ResponseOptions, Response } from '@angular/http';
import { MockBackend } from '@angular/http/testing';

Now, add the following code in the component constructor:

constructor(private backend: MockBackend, private ClientService: ClientService) {
        this.backend.connections.subscribe(c => {
            if (c.request.url === "https://localhost:8080/api/client" && c.request.method === 0) {
                let res = new Response(
                    new ResponseOptions({
                        body: JSON.stringify([
                            { Name: 'Mock Client 1', ClientId: 1, Note: 'amazing notes' },
                            { Name: 'Mock CLient 2', ClientId: 2, Note: 'amazing notes for Client 2' },
                            { Name: 'Mock Client 3', ClientId: 3, Note: 'amazing notes for Client 3' }
                        ])
                    }));

                c.mockRespond(res);
            }
            // POST: /Client
            else if (c.request.url === 'https://localhost:8080/api/ticket' && c.request.method === 1) {
            }
            // DELETE: /Client
            else if (c.request.url === 'https://localhost:8080/api/ticket' && c.request.method === 3) {
            }

        });
    }

Now, the application is subscribed to the backend connections stream. Each outgoing request can be checked and then can send the desired response.

Once the actual application data layer is ready, remove the MockBackend interception code and return the real response from the backend.