In this ES6 MVC JavaScript tutorial, you’re going to learn how to build a simple CRUD app using ES6 Class.
STEP 01: Setting Up The Project
Here is the Address Book Project setup. It has just three simple files: HTML, CSS and JS.
1. Create a folder structure.
| AddressBook (folder)
| -- index.html
| -- app.js
| -- style.css
2. Link style.css and app.js file to the index.html file.
<!DOCTYPE html>
<html>
<head>
<title>Address Book - How to write testable javascript code</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
3. Create a contact list module inside index.html where all of the contacts will be.
<body>
<h2>Address Book</h2>
<!-- contact list module -->
<section>
<ul id="contact-list">
loading...
</ul>
</section>
</body>
2. Create An MVC Structure
Model
Add some Model Data which is the M part of MVC inside app.js. This could be a separate class fetching data from API via AJAX call.
For simplicity sake, I have made a simple array of objects called contactsData.
// ============== Model =========================
const contactsData = [
{
fname: "Anbu",
lname: "Arasan",
phone: "190-309-6101",
email: "anbu.arasan@email.com",
},
{
fname: "Arivu",
lname: "Mugilan",
phone: "490-701-7102",
email: "arivu.mugilan@email.com",
},
{
fname: "Bob",
lname: "Johnson",
phone: "574-909-3948",
email: "bob.johnson@email.com",
},
{
fname: "Raja",
lname: "Tamil",
phone: "090-909-0101",
email: "raja.tamil@email.com",
},
{
fname: "Sundar",
lname: "Kannan",
phone: "090-909-0101",
email: "sundar.kannan@email.com",
},
];
#programming #mvc #javascript #es6
17.45 GEEK