Angular ng-include is not working with the razor page

Question

I have used ng-include as shown below.But it is not working.Could you tell me why ? Thanks in advance.

createOrEditPropertyModal.cshtml

<div ng-include="'propertymanagement/tabs/createPropertyForm.html'"></div>

I have tried this way also.But same 404 error.

 <div ng-include="'tabs/createPropertyForm.html'"></div>

createPropertyForm.cshtml

<script type="text/ng-template" id="createPropertyForm.html">
    <form name="createPropertyForm" role="form">

       //removed for clarity

    </form>
</script>

Soloution Tree

Note : When I put it on the same page then it works.But how can I do that in above way ? B'cos I would like to put that code on separate .cshtml file.

 <div ng-include="'createPropertyForm.html'"></div> //on same page where this works well

Answer 1

Method 1 : OP's Answer

You can do this.Here is the way.You have to give the full path as shown below.

<div ng-include="'~/App/tenant/views/propertymanagement/tabs/createPropertyForm.cshtml'"></div>

If you have any performance issues then check it out here : ng-Include is very slow with the external template

Method 2 :

you cant include .cshtml page by using ng-include

for it you have to go with proper routing of mvc ,Like

   <div ng-include="'controller/Template/createPropertyForm'"></div>

here createPropertyForm will be like a id part of a action method

    public ActionResult Template(string id)
     {
    switch (id.ToLower())
    {
        case "createPropertyForm":
            return PartialView("~/Views/propertymanagement/tabs/createPropertyForm.cshtml");

        default:
            throw new Exception("template not known");
    }
}

otherwise just create a html page and access it as

   <div ng-include="'createPropertyForm.html'"></div>