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

ANIL SINGH

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

    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book