The view of the application will contain three main parts,
- A form to enter the following information,
- First name,
- Last name,
- Phone number,
- A button to save the detail,
- A button to clear the form.
- A container that will contain the list of contacts.
- A component to display contact information,
- Full Name,
- Phone number,
- E-mail ID,
- A button to edit the contact,
- A button to delete the contact.
To start with, let us first create the HTML with a title and a heading, and, an empty node, and a footer. However you can add as many information as you like, but the empty node is the most important one, where we are going to mount our application.
Your index.html should look like this. There is not much in it, so you can go ahead and copy paste it in your index.html file.
Why is the sequence important?
- script/main.js– will work as the entry point for the entire application.
- scripts/modules/contacts/contacts.js – will work as the entry point for the contacts module.
- scripts/modules/contacts/contactItem.js- will contain each contact’s detail.
- scripts/modules/contacts/contactsViewTemplates.js- will contain all the HTML templates.
- scripts/modules/contacts/contactsController.js- controller
- scripts/modules/contacts/contactsModel.js- model
- scripts/modules/contacts/contactsView.js- view
Your main.js should look like this. Please note, at this point, it will not run and give an error in the console if you try to run the application.
// initialise contacts manager module // main.js var phonebook = window.contactsManager; phonebook.init (); // main.js window.contactsManager.init (); // main.js contactsManager.init ();
We can write any of the three code mentioned above. All we are trying here is to execute
In the next post, we will start with the contacts manager module’s code.