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 :

Answer 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.

Partial Views in Angular JS MVC project

1 个答案: