Building an angularjs app
I have set up an asp.net mvc4 application and integrated the angularjs package using nuget. The Layout.cshtml file has been updated to look like this:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<script src="~/Scripts/angular.js"></script>
<script src="~/AngularJSApp/main.js"></script>
</head>
<body>
<div ng-controller="homeController" class="container body-content">
{{ testData }}
@RenderBody()
</div>
</body>
</html>
In addition, I have created a main.js file where the module and corresponding controller are stored:
var app = angular.module("myApp");
app.controller('homeController', ['$scope', function ($scope) {
$scope.testData = "this is test data";
}]);
I have verified that both .js files are loaded correctly from _Layout.cshtml.
However, when rendering the page, instead of seeing the actual data, I am only getting {{ testData }}.
Can anyone help me identify what might be missing or causing this issue?