AngularJS  ng-include  directive  used to embedding html pages within html page. It’s Make a server call to get the corresponding html page and set it in innerHTML of html control.

<div ng-app="mainApp" ng-controller="MyController">
    <div ng-include="'Home/UserList'"></div>  


The Following we create a partial view UserList.cshtml .


<table border="0">
        <td colspan="3"><h2>AngularJS ng-repeat</h2></td>
    <tr ng-repeat="x in data.records">

The Following we create a view index.cshtml and embed partial UserList.cshtml using AngularJs ng-include Directive.


it’s called UserList server side method in Home Controller which is return Partial View (UserList.cshtml).



    ViewBag.Title = "Home Page";
<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/angular.js"></script>
<div ng-app="mainApp" ng-controller="MyController">
    <div ng-include="'Home/UserList'"></div>   
    var mainApp = angular.module("mainApp", []);
    mainApp.controller('MyController', function ($scope) {
        $ = {
        records:[{ id: '1', name: 'Rajeev',email:'' },
                 { id: '2', name: 'Tarun' ,email:''},
                 { id: '3', name: 'mayank',email:'' },
                 { id: '4', name: 'Sohel',email:'' },
                 { id: '5', name: 'karan', email: '' }]
    table {
        margin:0 auto;
     table, th, td {
        border: 1px solid grey;
        border-collapse: collapse;
        padding: 5px;
        table tr:nth-child(odd) {
            background-color: #ccc;
        table tr:nth-child(even) {
            background-color: #ffffff;

The Following we create a HomeController  and create to method index and UserList.


 using MvcApplication1.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcApplication1.Controllers
    public class HomeController : Controller
        public ActionResult Index()
          return  View();
        public PartialViewResult UserList()
            return PartialView();
        }    }    



ng-include in AngularJS


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like