Home > DeveloperSection > Blogs > AngularJs Includes

AngularJs Includes


Angular JS Angularjs Scope  Angularjs Controller 
Ratings:
0 Comment(s)
 679  View(s)
Rate this:

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.


Don't want to miss updates? Please click the below button!

Follow MindStick