AngularJS Includes

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

by Paola D'Antonio

HTML

<html>

  <head>
    <title>Angular JS Includes</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>


  </head>

  <body>

    <h2>Angular JS Includes</h2>

    <div ng-app="mainApp" ng-controller="studentController">

      <!-- instead of having the div table below we could use ng-include to call the code from another HTML document <div ng-include = "'/angularjs/src/include/main.html'"></div>-->

      <div id="TableStudent">
        <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>


      </div>
      <!-- instead of having the div table below we could use ng-include to call the code from another HTML document <div ng-include ="'/angularjs/src/include/subjects.html'"></div>  -->

      <div>
        <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>


      </div>
    </div>


  </body>

</html>

CSS

table,
 th,
 td {
   border: 1px solid pink;
   border-collapse: collapse;
   padding: 5px;
 }
 
 table tr:nth-child(odd) {
   background-color:lightpink;
 }
 
 table tr:nth-child(even) {
   background-color: lightblue;
 }

TypeScript

//mainApp.js
var mainApp = angular.module("mainApp", []);
//controller.js        
mainApp.controller('studentController', function($scope) {
  $scope.student = {
    firstName: "Paola",
    lastName: "DAntonio",
    fees: 500,

    subjects: [{
      name: 'Physics',
      marks: 70
    }, {
      name: 'Chemistry',
      marks: 80
    }, {
      name: 'Math',
      marks: 65
    }, {
      name: 'English',
      marks: 75
    }, {
      name: 'Spanish',
      marks: 67
    }],

    fullName: function() {
      var studentObject;
      studentObject = $scope.student;
      return studentObject.firstName + " " + studentObject.lastName;
    }
  };
});