MContact – Contact Manager
Angular TypeScript
MContact – Contact Manager
Angular TypeScript

MContact – Contact Manager

MContact is a contact manager written using Angular frame work to showcase of an application written using the Typescript language and the Angular Framework.

Links available at the end

Start screen

1: Toggle the side navigation bar

2: Refresh the contact data

3: Change the data view from a list view to a grid view

4: The Application name and link back to home

What we will look at

  • The technology (Angular, Not AngularJs)
  • One way to handle settings (Local Storage)
  • Viewing your data (List & Grid )
  • Cohesion and coupling (Why and when) *
  • Accessing data(via httpclient) local and remote*
  • Accessing the current version of the code

The technology (Angular, Not AngularJs)

Angular Framework

Angular material – Provides UI components we can use in our application

  • Material UI component library
    • Grid
    • Button
    • Etc..

Handle settings (Local Storage)

In the snippet above we are storing a boolean value type named showContactsInaGrid, the value determines if we see our

contacts in a list or grid. A value of true means we expect our data as shown in the image below.

Viewing your data

list view
Grid view

Cohesion and Coupling (Why and when) *

Here I will introduce the concepts of Cohesion and Coupling. These can be topics of discussion on their own.

/*****************inform the UI*****************************/
    this.messageToSend = Common.showContactsInaGridKey;
    this.sendMessage()
    /**********************************************/
  • Cohesion(desirable) – The part/components of our application work well together. High Cohesion allows confidence that changing one part/component of our application will not negatively affect/impact another part/component
  • Coupling (Un desirable), tightly coupled parts prevent reuse and makes maintenance and testing challenging. We desire loose coupling were possible.
  • How we make use of components and libraries in our application will determine the measure to which we have one ; the other ; or both

In the snippet above you would have seen two lines command as informing the UI. The two models lines code

perform a message pass, the message type is known to the recipients, it’s up to the recipients to take action as a result of the message. This is an example of good cohesion and loose coupling.

Accessing data(via httpclient) local and remote *

HttpClient accessing local mocked data

An Injectable item provided for use by the Angular runtime environment

  • Here we are using the Injected HttpClient to access a local resouce[mocdata.json]
  • The client httpclint is accessable via our ContactService – More on that to come.
  • The method has a defined return type of Observable contact array , we will touch on that later as well, for now know that is the expeted return type from the ContactService.
  • The data source is fetched via a get request and the URI points to a file

Accessing the current version of the code

  • https://github.com/caribtechnet/MContact
  • git clone https://github.com/caribtechnet/MContact.git
  • Other Branches will be created as we explore the features of Angular and Typescript

Conclude

Typescript is an evolutionary language; taking inspiration from other languages we can produce code that is easier to maintain when compared to JavaScript, easier to work in a larger team with clean composability and robustness.

As they progress through the code base and extend this application you will get a chance to see some of those aspects in use happy coding