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.

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

Angularjs.html
<html>
<head>
    <title>Angular JS Includes</title>
    <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js'></script>
    <style>
        table, th, td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
        }
 
            table tr:nth-child(odd) {
                background-color: #f2f2f2;
            }
 
            table tr:nth-child(even) {
                background-color: #ffffff;
            }
    </style>
</head>
<body>
    <h2>AngularJS Sample Application</h2>
    <div ng-app='mainApp' ng-controller='studentController'>
        <div ng-include=''main.html''></div>
        <div ng-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:
<table border='0'>
        <tr>
            <td>Enter first name:</td>
            <td>
                <input type='text' ng-model='student.firstName'></td>
        </tr>
        <tr>
            <td>Enter last name: </td>
            <td>
                <input type='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>
        <tr ng-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.

AngularJs Includes

Last updated:2/17/2018 12:50:50 AM
Anonymous User

Anonymous User

I am a content writter !

0 Comments

Leave Comment