Partial Views in Angular JS MVC project

Question

I am a newbie to Dot Net MVC and I am trying to re-build my razor views using Angular JS. But there is something I am stuck with. I have imported the Angular JS Core library in my project

And I have referenced the same in the BundleConfig.cs class also.

        //Added for angular reference
        bundles.Add(new ScriptBundle("~/bundles/angular").Include(
        "~/Scripts/angular.min.js"));

In my custom layout page _myTemplateLayoutPage.cshtml this is reflected via :

<html ng-app="">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prank Systems Pvt. Ltd.</title>
<link href="@Url.Content("~/Content/myTemplate/")style.css" rel="stylesheet" type="text/css" />
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/angular")

But when I try to load a partial view, Angular on the partial is not working.

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_myTemplateLayoutPage.cshtml";
    }


<h2>Index Details</h2>
<input type="text" ng-model="name" />
{{name}}

I understand I am not referencing ng-app in my partial view but that's referenced in the layout page.

Here's what I get when run in browser :

Possible duplicate of How to load MVC Partial View and keep Angular JS working — user4103496
– user4103496, Commented Apr 4, 2016 at 17:01

Hackerman · Accepted Answer · 2016-04-04 17:00:57Z

1

Just rename your angular script name from angular.min.js to angular.js:

And then in your BundleConfig.cs:

bundles.Add(new ScriptBundle("~/bundles/angular").Include(
    "~/Scripts/angular.js"));

The main reason of this issue is because Bundler is not including min files, and, your angular library doesn't get included on your project.

answered Apr 4, 2016 at 17:00

Hackerman

12.3k2 gold badges37 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hackerman Over a year ago

@StrugglingCoder, i'm glad to help...i face the exact same problem a few weeks ago :)

Collectives™ on Stack Overflow

Partial Views in Angular JS MVC project

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related