Introducing Application Modeling Language AppML -Tutorial Savvy

AppML is an Application Modeling Language for bringing data to HTML pages.
The home page for AppML is as follows:-

http://www.w3schools.com/appml/default.asp

AppML extends the HTML with additional feature like data attribute and controller.
The AppML uses most of HTML elements and not complex unlike other frameworks like AngularJS or Backbone.
The code for appml.js is available on the following link:-

http://www.w3schools.com/appml/2.0.2/appml.js

In this demo, “We will develop a simple student table using a JSON file and AppML”.
To demonstrate AppML we created W3AppMLDemo project.The following screenshot shows the directory structure of W3AppMLDemo:-

The appml.js is the library file of AppML. We have downloaded it locally and used in this demo.
The student.json file contains JSON data for students.The content of students.json is as follows:-

{
    "list":[
    {"name":"Sandeep", "country":"India","subject":"Computer"},
    {"name":"John", "country":"UK","subject":"Geography"},
    {"name":"Miller", "country":"US","subject":"Computer"}
    ]
}

The index.html file contains HTML markup for a Table element.It has used appml-data attribute to load the students.json file.The table body repeats the student objects present inside list property and renders it in the browser.

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Students Detail</title>
</head>
<body>
    <h1>Students Table</h1>
    <div appml-data="students.json">
    <table border="1">
        <tr>
            <th>Name</th>
            <th>Country</th>
            <th>Subject</th>
        </tr>
        <tr appml-repeat="list">
            <td>{{name}}</td>
            <td>{{country}}</td>
            <td>{{subject}}</td>
        </tr>
    </table>
</div>
</body>
    <script src="appml.js"></script>
</html>