Simple way to do it would be like follows:
MyAngularApp.js
var myAngularApp = angular.module('MyAngularApp', ['ngRoute']);myAngularApp.config(function ($routeProvider) { $routeProvider .when("/myprojects", { templateUrl: "MyAspMvcCtrl/GetTemplate?id=myprojects", controller:"MyAngularController" }) ... .otherwise({redirectTo:"/myprojects"})});myAngularApp.controller("MyAngularController", function ($scope) { ... // Do something $scope.mydata = { id = 1234, msg = "Hello" };});
ASP.Net MVC Controller
public class MyAspMvcCtrlController : Controller{ [HttpGet] public ActionResult GetTemplate(string id) { switch (id.ToLower()) { case "myprojects": return PartialView("~/Views/ProjectManagement/ProjectDetails.cshtml"); default: throw new Exception("Unknown template request"); } }}
Layout.cshtml
<html ng-app="myAngularApp">...<body> ...<div ...> ...<a href="#/myprojects">My Projects</a> ...</div><div ng-view></div> ...</body></html>
ProjectDetails.cshtml
<div ...><h3>ID: {{mydata.id}}</h3><p>Message: {{mydata.msg}}</p></div>