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

Example:

The Following we create a partial view UserList.cshtml .

UserList.cshtml

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

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

ng-include="'Home/UserList'"  

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

 

Index.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>   
</div>
 
<script>
    var mainApp = angular.module("mainApp", []);
    mainApp.controller('MyController', function ($scope) {
        $scope.data = {
        records:[{ id: '1', name: 'Rajeev',email:'rajeev@@adityapoint.in' },
                 { id: '2', name: 'Tarun' ,email:'tarun@@adityapoint.in'},
                 { id: '3', name: 'mayank',email:'mayank@@adityapoint.in' },
                 { id: '4', name: 'Sohel',email:'sohel@@adityapoint.in' },
                 { id: '5', name: 'karan', email: 'karan@@adityapoint.in' }]
    }            
    });
</script>
<style>
    table {
        width:500px;
        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;
        }
</style>

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

HomeController

 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();
        }    }    
}

  

OutPut:


ng-include in AngularJS

Thanks.

0 comments


Leave a comment

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

You may also like