Angular ng-include directive

Since we know that embedding HTML pages in HTML pages is not supported in HTML and To achieve this we need to follow some custom approaches like Ajax and including HTML via server side programming.

Syntax:

//angular ng-include directive
<div ng-include src="'views/index.html'" />

Example,

<html>

<head>
  <title>using Angular ng-Include</title>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script>
    var mainApp = angular.module("ngApp", []);

    mainApp.controller('ngController', function($scope) {
      $scope.users = {
        fName: "Anil",
        lName: "Singh",
        age: 30,
      };
    });
  </script>
</head>

<body ng-app="ngApp">
  <div ng-controller="ngController">
    <div ng-include="'views/main.html'"></div>
    <div ng-include="'views/users.html'"></div>
  </div>
</body>

</html>

The Result looks like,

About Blogger

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz