AngularJs Includes

Hi everyone in this blog I’m explaining about angularjs Includes.

Introduction:

HTML does not support embedding html pages within html page. To achieve this functionality following ways are used.

1. Using Ajax -Make a server call to get the corresponding html page and set it in innerHTML of html control.

2. Using Server Side Includes - JSP, PHP and other web side server technologies can include html pages within a dynamic page.

Using AngularJS, we can embedded HTML pages within a HTML page using ng-include directive.

<divng-app=""ng-controller="studentController">
   <divng-include="'main.htm'"></div>
   <divng-include="'subjects.htm'"></div>
</div>

Example:

Angularjs.html

<html>
<head>
    <title>Angular JS Includes</title>
    <scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <style>
        table, th, td {
            border: 1pxsolidgrey;
            border-collapse: collapse;
            padding: 5px;
        }
 
            tabletr:nth-child(odd) {
                background-color: #f2f2f2;
            }
 
            tabletr:nth-child(even) {
                background-color: #ffffff;
            }
    </style>
</head>
<body>
    <h2>AngularJS Sample Application</h2>
    <divng-app="mainApp"ng-controller="studentController">
        <divng-include="'main.html'"></div>
        <divng-include="'subject.html'"></div>
    </div>
    <script>
        var mainApp = angular.module("mainApp", []);
 
        mainApp.controller('studentController', function ($scope) {
            $scope.student = {
                firstName: "Kamlakar",
                lastName: "Singh",
                fees: 500,
                subjects: [
                   { name: 'Physics', marks: 70 },
                   { name: 'Chemistry', marks: 80 },
                   { name: 'Biology', marks: 65 },
                   { name: 'English', marks: 75 },
                   { name: 'Hindi', marks: 67 }
                ],
                fullName: function () {
                    var studentObject;
                    studentObject = $scope.student;
                    return studentObject.firstName + " " + studentObject.lastName;
                }
            };
        });
    </script>
</body>
</html>

Main.html:

<tableborder="0">
        <tr>
            <td>Enter first name:</td>
            <td>
                <inputtype="text"ng-model="student.firstName"></td>
        </tr>
        <tr>
            <td>Enter last name: </td>
            <td>
                <inputtype="text"ng-model="student.lastName"></td>
        </tr>
        <tr>
            <td>Name: </td>
            <td>{{student.fullName()}}</td>
        </tr>
    </table>
Subject.html
<p>Subjects:</p>
    <table>
        <tr>
            <th>Name</th>
            <th>Marks</th>
        </tr>
        <trng-repeat="subject in student.subjects">
            <td>{{ subject.name }}</td>
            <td>{{ subject.marks }}</td>
        </tr>
    </table>

Output:

To run this example, you need to deploy textAngularJS.htm, main.htm and subjects.htm to a webserver. Open textAngularJS.htm using url of your server in a web browser. See the result.

blog

AngularJs Includes

Introduction:

Example:

Angularjs.html

Main.html:

Output:

Anonymous User

Leave Comment

Comments

Liked By